Scroll Area

import { ScrollArea } from "@/components/ui/scroll-area";

<ScrollArea className="h-20 w-50 rounded-md border">
  <p>
    The ScrollArea component allows for overflow content to be easily scrollable
    while maintaining a clean and responsive UI. It is particularly useful when
    dealing with long lists, articles, or any content that exceeds the
    designated container height.
  </p>
</ScrollArea>

<ScrollArea className="h-72 w-48 rounded-md border p-4">
  <div className="space-y-4">
    {Array.from({ length: 50 }).map((_, i) => (
      <div key={i} className="text-sm">
        Item {i + 1}
      </div>
    ))}
  </div>
</ScrollArea>

<ScrollArea scrollbars="horizontal" className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex gap-4 p-4">
    {Array.from({ length: 20 }).map((_, i) => (
      <div key={i} className="inline-block w-32 h-32 bg-muted rounded-md" />
    ))}
  </div>
</ScrollArea>

<ScrollArea scrollbars="both" className="h-72 w-96 rounded-md border">
  <div className="min-w-max p-4">
    <table className="w-full">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
          <th>Column 5</th>
        </tr>
      </thead>
      <tbody>
        {Array.from({ length: 50 }).map((_, i) => (
          <tr key={i}>
            <td>Row {i + 1} Col 1</td>
            <td>Row {i + 1} Col 2</td>
            <td>Row {i + 1} Col 3</td>
            <td>Row {i + 1} Col 4</td>
            <td>Row {i + 1} Col 5</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
</ScrollArea>

<ScrollArea className="h-96 w-full rounded-md border p-4">
  <article className="prose dark:prose-invert">
    <h2>Understanding Component Architecture</h2>
    <p>
      The scroll area component provides a consistent scrolling experience
      across different browsers and platforms. It uses custom styled scrollbars
      that match your design system while maintaining accessibility.
    </p>
    <p>
      This component is particularly useful for displaying long content in a
      constrained space, such as terms of service, privacy policies, or
      documentation pages that need to fit within a modal or sidebar.
    </p>
  </article>
</ScrollArea>

<ScrollArea className="h-60 w-64 rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
    {tags.map((tag) => (
      <>
        <div key={tag} className="text-sm py-2">
          {tag}
        </div>
        <Separator />
      </>
    ))}
  </div>
</ScrollArea>

<ScrollArea className="h-[450px] w-full rounded-md border bg-muted/50">
  <div className="p-6 space-y-4">
    {/* Your content */}
  </div>
</ScrollArea>