Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Embed
  • Agent Skills
  • llms.txt
  • RTL
  • Changelogv2.8.1
  • YouTube
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • Grok
  • Conductor
  • v0
  • Lovable
  • Replit
  • Bolt
  • OpenCode
  • VS Code
  • GitHub Copilot
  • Kilo Code
  • Zed
  • Antigravity
  • Gemini CLI
Components
  • Alert
  • Autocomplete
  • Badge
  • CascaderCascader keeps a saved selection's full path, popup open or closed
  • Code Block
  • Color Picker
  • Data GridData Grid works in apps that run React Compiler, with resizing, edits and callbacks kept live
  • Date SelectorDate Selector keeps its year list and Today button current in apps that run React Compiler
  • Emoji Picker
  • Event CalendarEvent Calendar keeps today and the agenda current in apps that run React Compiler
  • File TypeFile Type knows 171 formats, .env and Dockerfile included
  • File Upload
  • Filters
  • Frame
  • GanttGantt keeps its Today button and tooltip current in apps that run React Compiler
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Signature Pad
  • Sortable
  • Stepper
  • Time Picker
  • Timeline
  • Tree

Application

  • App Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.7K

Shadcn Badge

PreviousNext

Custom Shadcn Badge for React and Tailwind CSS. Badges are used to highlight items, notify users, or display statuses.

Base UIRadix UI
Radix UI

Installation

pnpm dlx shadcn@latest add @reui/badge

Usage

import { Badge } from "@/components/reui/badge"
<

Shadcn Badge Free Components

Browse 25 production-ready Shadcn Badge components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

Browse all 25 Shadcn Badge components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.

AutocompleteCascader

On This Page

InstallationUsageFor AI AgentsExamplesSecondaryDestructiveSuccessInfoWarningOutlinePrimary OutlineDestructive OutlineInfo OutlineSuccess OutlineWarning OutlinePrimary LightDestructive LightSuccess LightInfo LightWarning LightInvert LightSizeFull RadiusWith IconWith Icon ButtonWith DotWith LinkAPI ReferenceProps
Badge
>Badge</
Badge
>

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

  • Status and severity labels in solid, light and outline tones for success, warning, info and errors
  • Counts and short tags such as an unread number or a New marker, sized to the text around them
  • Compact chips pairing a label with an icon, a dot, an avatar, a flag or a remove control, or acting as a link

When not to use

  • An action that saves, opens or submits a form when pressed: use the Button component
  • Helper text revealed when a control is hovered or focused: use the Tooltip component
  • A finished KPI or profile tile with a trend or status chip as one detail: use the Card blocks

Agent notes

  • Import Badge from @/components/reui/badge; the shadcn Badge of the same name lacks size, radius and the success, info and warning variants
  • The default radius follows the style, square in lyra and sera and a pill in maia, luma and rhea; radius full gives a pill in every style

Third-party API docs

  • Radix UI v1: docs
Markdownhttps://web.dev.reui.io/docs/components/radix/badge.md
MCPget_component("badge")
Installnpx shadcn@latest add @reui/badge
Full index for agents:llms.txtReUI MCP setup

Examples

Secondary

Destructive

Success

Info

Warning

Outline

Primary Outline

Destructive Outline

Info Outline

Success Outline

Warning Outline

Primary Light

Destructive Light

Success Light

Info Light

Warning Light

Invert Light

Size

Full Radius

With Icon

With Icon Button

With Dot

With Link

API Reference

This component follows the same API design as the Badge Component from shadcn/ui. The key difference is that it uses extended color tokens such as --success, --info, --warning and --invert for badge variants instead of utility classes.

This approach enables consistent, reusable state variants across the project without relying on custom Tailwind color utilities.

<Badge variant="success-light" size="sm">
  Success
</Badge>
<Badge variant="outline" radius="full">
  Pill
</Badge>

Props

PropType
variant"default" | "secondary" | "destructive" | "outline" | "info" | "success" | "warning" | "invert"
variant (Outline)"primary-outline" | "warning-outline" | "success-outline" | "info-outline" | "destructive-outline" | "invert-outline"
variant (Light)"primary-light" | "warning-light" | "success-light" | "info-light" | "destructive-light" | "invert-light"
size"default" | "xs" | "sm" | "lg" | "xl"
radius"default" (active style radius) | "full" (rounded-full)
import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge>Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="secondary">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="destructive">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="success">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="info">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="warning">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="outline">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="primary-outline">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="destructive-outline">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="info-outline">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="success-outline">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="warning-outline">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="primary-light">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="destructive-light">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="success-light">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="info-light">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="warning-light">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return <Badge variant="warning-light">Badge</Badge>
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return (
    <div className="flex items-center gap-2.5">
      <Badge size="sm">Small</Badge>
      <Badge size="default">Default</Badge>
      <Badge size="lg">Large</Badge>
    </div>
  )
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return (
    <div className="flex flex-col items-center justify-center gap-6">
      <div className="flex items-center gap-2.5">
        <Badge size="sm" radius="full">
          3
        </Badge>
        <Badge size="default" radius="full">
          3
        </Badge>
        <Badge size="lg" radius="full">
          3
        </Badge>
      </div>
      <div className="flex items-center gap-2.5">
        <Badge size="sm" radius="full">
          New
        </Badge>
        <Badge radius="full">New</Badge>
        <Badge size="lg" radius="full">
          New
        </Badge>
      </div>
      <div className="flex items-center gap-2.5">
        <Badge size="sm" radius="full" variant="outline">
          New
        </Badge>
        <Badge radius="full" variant="secondary">
          New
        </Badge>
        <Badge size="lg" radius="full" variant="success-light">
          New
        </Badge>
      </div>
    </div>
  )
}

import { Badge } from "@/components/reui/badge"
import { CheckIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Badge variant="outline">
      <CheckIcon />
      Badge
    </Badge>
  )
}

import { Badge } from "@/components/reui/badge"

import { Button } from "@/components/ui/button"
import { XIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Badge variant="outline" className="gap-0.5">
      Badge
      <Button
        variant="ghost"
        size="icon"
        className="size-3 hover:bg-transparent"
      >
        <XIcon />
      </Button>
    </Badge>
  )
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return (
    <Badge variant="info-light">
      <span className="ms-0.25 size-1.25 rounded-full! bg-[currentColor]" />{" "}
      Badge
    </Badge>
  )
}

import { Badge } from "@/components/reui/badge"

export function Pattern() {
  return (
    <Badge variant="outline" asChild>
      <a href="#">Badge</a>
    </Badge>
  )
}