Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Scrollable Tags Scroll Area for Vue

A Technologies heading over one row of badges, from React and Next.js onward, in a panel that scrolls sideways.

UI library: Ark UI

Technologies heads a bordered panel. Inside, badges sit on one line, starting with React, Next.js, TypeScript and Tailwind CSS. The line scrolls sideways.

Keep tags on one scrolling line when wrapping would break a filter row. A Toggle Group fits if each tag is a control. In Vue, Ark UI does not choose which badges appear.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Scroll Area anatomy: root, viewport, content, scrollbar, thumb

Usage

<div class="flex w-full max-w-md flex-col gap-2">
  <h3 class="font-semibold text-sm">Technologies</h3>
  <ScrollArea class="w-full whitespace-nowrap rounded-md border bg-background">
    <div class="flex w-max gap-2 p-4">
      <Badge v-for="tag in tags" :key="tag" variant="secondary">{{ tag }}</Badge>
    </div>
  </ScrollArea>
</div>

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?

Both bars are already rendered. The wide row scrolls on the inline axis without a second ScrollBar.

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.

API Reference

Scroll Area

No extra props in this demo. The rest is on the Scroll Area page.

Badge

Sets v-for="tag in tags", key="tag" and variant="secondary". The rest is on the Badge page.

All 8 scroll area examples