Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Scroll Area examples · Layout

Scrollable Tags Scroll Area for React

A row of technology badges in a horizontal scroll area.

Framework
UI library

Horizontal space is cheap, vertical space is not. This example lists twenty technologies as secondary Badges on a single line under a Technologies heading, inside a Scroll Area that scrolls sideways. The frame has whitespace-nowrap and the row is flex w-max gap-2, so the tags never wrap into a tall cloud. Use it for tech stacks, skill lists, category filters, and any row of chips that should stay one line high.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Why do the badges stay on one line?

ScrollArea has whitespace-nowrap, and the inner row is flex w-max gap-2. w-max sizes the row to the badges, so the extra width scrolls. The frame is w-full, inside a max-w-md column.

What does each tag look like?

A Badge with variant secondary. There are twenty names, from React through CI/CD. p-4 on the row insets the first and last badge from the border.

Where is the sideways bar?

ScrollBar is rendered inside ScrollArea with orientation set to horizontal. The built-in bar is vertical, and this row is only one line tall.

Does the Technologies heading scroll?

No. The h3 is before ScrollArea, with font-semibold text-sm. Only the badge row is inside the area.

How do I change the space between badges?

gap-2 is on the flex row. Use gap-1 for a tighter row or gap-3 for a wider one. The badges stay variant secondary.

What draws the frame around the tags?

rounded-md border bg-background on ScrollArea. The column around the heading and the area is flex flex-col gap-2.

All 8 scroll area examples