How do I install the Vibe UI Badge component?

You can install Badge into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add badge" in your terminal.

Does Vibe UI Badge support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Badge component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

Badge

Displays a badge or a component that looks like a badge for statuses, tags, count indicators, and categories.

Badge

Displays a badge or a component that looks like a badge for statuses, tags, count indicators, and categories.

Preview

DefaultSecondaryOutlineGlowGlassRetro

Installation

pnpm dlx vibe-ui-kit@latest add badge

1. Styles & Variations

Presets

DefaultSecondaryOutlineDestructiveGlow AccentGlassmorphicRetro Brutalist

Accents & Indicators

Live System

Gradient Accent

FeaturedMessages

2. Composition & Patterns

Interactive Tags

React

TypeScript

Tailwind CSS

Props

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "outline" \| "glass" \| "retro" \| "glow"	"default"	Visual preset theme variant of the badge element.
className	string	-	Additional CSS class names to apply to the badge.

PreviousAvatar

Next Breadcrumb

Related Vibe UI Components

Explore all components →

Contributors

Jenish Sabhadiya

Badge

Badge

Preview

Installation

1. Styles & Variations

Presets

Accents & Indicators

2. Composition & Patterns

Interactive Tags

Props

Related Vibe UI Components

Contributors

Theme Customizer