Scroll Area

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

const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)

export default function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-72 w-48 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}>
            <div className="text-sm">{tag}</div>
            <Separator className="my-2" />
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

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

const figures = Array.from({ length: 12 }).map((_, i) => `Figure ${i + 1}`)

export default function ScrollAreaHorizontalDemo() {
  return (
    <ScrollArea className="w-96 rounded-md border whitespace-nowrap">
      <div className="flex w-max gap-4 p-4">
        {figures.map((figure) => (
          <div
            key={figure}
            className="bg-muted flex size-28 shrink-0 items-center justify-center rounded-md text-sm font-medium"
          >
            {figure}
          </div>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

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

export default function ScrollAreaProseDemo() {
  return (
    <ScrollArea className="h-52 w-80 rounded-md border p-4">
      <h4 className="mb-3 text-sm font-medium">Terms of Service</h4>
      <div className="text-muted-foreground space-y-3 text-sm">
        <p>
          By accessing this registry you agree to copy, adapt, and ship these
          components in your own projects without attribution.
        </p>
        <p>
          Components are provided as-is. You own the code once it lands in your
          repository and are free to modify every token, variant, and style.
        </p>
        <p>
          Updates are opt-in: re-run the installer whenever you want the latest
          version of a component, then reconcile any local changes.
        </p>
        <p>
          Accessibility primitives are inherited from the underlying libraries.
          Test your own compositions before shipping to production.
        </p>
      </div>
    </ScrollArea>
  )
}