104Get started
HextaUI

Scroll area: Horizontal

Set scrollbars="horizontal" and give the content w-max so it can grow past the box.

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

const tags = [
  "Design systems",
  "Motion",
  "Accessibility",
  "Typography",
  "Color",
  "Layout",
  "Forms",
  "Data tables",
  "Charts",
  "Navigation",
  "Overlays",
  "Feedback",
]

export function ScrollAreaHorizontal() {
  return (
    <ScrollArea
      scrollbars="horizontal"
      className="w-full max-w-md rounded-lg border"
    >
      <div className="flex w-max gap-2 p-3">
        {tags.map((tag) => (
          <span
            key={tag}
            className="rounded-full border px-3 py-1 text-sm whitespace-nowrap"
          >
            {tag}
          </span>
        ))}
      </div>
    </ScrollArea>
  )
}

Add this example

This adds the example as components/examples/scroll-area/horizontal.tsx, together with the Scroll area component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/scroll-area-horizontal.json

To add only the component, follow the Scroll area installation.

Props in this example

The Scroll area props this example sets, from the API reference.

ScrollArea

PropTypeDefault
scrollbars
"vertical" | "horizontal" | "both""vertical"
className
string | (state) => string–

Every prop is in the Scroll area API reference.

More Scroll area examples

See them all, with keyboard support and accessibility notes, on the Scroll area page.

Related components