Scroll Area

{
  "registries": {
    "@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
  }
}

npx shadcn@latest add @uxio/scroll-area

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

export function ScrollAreaVertical() {
  return (
    <ScrollArea scrollbar="vertical">
      {Array.from({ length: 24 }, (_, i) => (
        <p key={i}>Row {i + 1}</p>
      ))}
    </ScrollArea>
  )
}

export function ScrollAreaHorizontal() {
  return (
    <ScrollArea scrollbar="horizontal">
      <p>{"Long content ".repeat(30)}</p>
    </ScrollArea>
  )
}

export function ScrollAreaBothAxes() {
  return (
    <ScrollArea scrollbar="both">
      {Array.from({ length: 16 }, (_, i) => (
        <p key={i}>
          Row {i + 1}
          {" …".repeat(50)}
        </p>
      ))}
    </ScrollArea>
  )
}