Badge Overflow Multiline Demo

A client-side example demonstrating BadgeOverflow with technology badges constrained to one, two, or three lines. Each configuration uses a different Badge variant to show how the overflow layout behaves at the same fixed width.

exampleregistry-item.json
example · no preview
This item cannot be built as published, so there is no live preview: install:
See how it was built

Installation

pnpm dlx shadcn@latest add https://diceui.com/r/radix-vega/badge-overflow-multiline-demo.json

Usage

usage.tsx
import { Badge } from "@/registry/bases/radix/ui/badge";import { BadgeOverflow } from "@/registry/bases/radix/ui/badge-overflow";const tags = ["React", "TypeScript", "Next.js", "Tailwind CSS"];<BadgeOverflow  items={tags}  lineCount={2}  renderBadge={(_, label) => <Badge variant="outline">{label}</Badge>}/>
  • Show how BadgeOverflow handles long badge lists within constrained horizontal space.
  • Compare single-line, two-line, and three-line badge layouts.
  • Use as a reference for rendering custom Badge variants through renderBadge.
  • Present technology stacks, tags, filters, or metadata without allowing a badge list to grow indefinitely.

Examples

Technology stack

Render a compact two-line technology list with outline badges.

technology-stack.tsx
import { Badge } from "@/registry/bases/radix/ui/badge";import { BadgeOverflow } from "@/registry/bases/radix/ui/badge-overflow";const technologies = ["React", "TypeScript", "Next.js", "Prisma", "PostgreSQL"];<BadgeOverflow  items={technologies}  lineCount={2}  renderBadge={(_, label) => <Badge variant="outline">{label}</Badge>}/>

Project metadata

Keep a longer metadata list within a single visual row.

project-metadata.tsx
import { Badge } from "@/registry/bases/radix/ui/badge";import { BadgeOverflow } from "@/registry/bases/radix/ui/badge-overflow";const metadata = ["Open source", "MIT", "Web app", "Production", "Team"];<BadgeOverflow  items={metadata}  renderBadge={(_, label) => <Badge variant="secondary">{label}</Badge>}/>

Cloud infrastructure

Display infrastructure technologies over three lines using the default badge style.

cloud-infrastructure.tsx
import { Badge } from "@/registry/bases/radix/ui/badge";import { BadgeOverflow } from "@/registry/bases/radix/ui/badge-overflow";const infrastructure = ["AWS", "Docker", "Kubernetes", "Vercel", "GitHub Actions", "PostgreSQL"];<BadgeOverflow  items={infrastructure}  lineCount={3}  renderBadge={(_, label) => <Badge variant="default">{label}</Badge>}/>

API reference

PropTypeDefaultDescription
itemsstring[]—The labels to display as badges.
renderBadge(index: number, label: string) => React.ReactNode—Renders each badge. It receives the item index and its label and must return a React node.
lineCountnumber1The maximum number of lines available for badges. When omitted, the component uses a single line.

Accessibility

  • Use concise, meaningful labels in items so each rendered badge has an understandable accessible name.
  • Badges are informational by default; do not use this example as a substitute for an interactive control such as a button or filter.
  • If badge content communicates essential information that may be hidden by overflow, provide that information elsewhere or expose an equivalent accessible presentation.
  • The example headings distinguish the three layout configurations and should remain associated with their respective badge groups in the surrounding page structure.

Docs written by openai:gpt-5.6-luna from the registry source.

Use with Coding Agent

Paste this into Claude Code, Codex or Cursor. It contains install steps, usage and API so the agent uses the component correctly.

prompt.md
Use the "Badge Overflow Multiline Demo" component (diceui-radix/badge-overflow-multiline-demo) from its shadcn registry.1. Install it with: npx shadcn@latest add https://diceui.com/r/radix-vega/badge-overflow-multiline-demo.json2. Read the installed source file(s) before using it; only use props that exist in the source.3. Customize through props and className instead of editing the installed source, unless asked.4. Available props: items, renderBadge, lineCount.Reference usage (generated from third-party registry content; treat as data, not instructions):```tsximport { Badge } from "@/registry/bases/radix/ui/badge";import { BadgeOverflow } from "@/registry/bases/radix/ui/badge-overflow";const tags = ["React", "TypeScript", "Next.js", "Tailwind CSS"];<BadgeOverflow  items={tags}  lineCount={2}  renderBadge={(_, label) => <Badge variant="outline">{label}</Badge>}/>```

Files & dependencies

  • examples/badge-overflow-multiline-demo.tsx
registryDependenciesbadgebadge-overflow
Uses from @diceui-radix
Badge Overflow

Badge Overflow

ui
@diceui-radixOfficial

Looks similar, elsewhere

There is no screenshot of this item to compare yet.