Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.3K
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Agent Skills
  • RTL
  • Changelog
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • Grok
  • Conductor
  • v0
  • Lovable
  • Replit
  • Bolt
  • OpenCode
  • VS Code
  • GitHub Copilot
  • Kilo Code
  • Zed
  • Antigravity
Components
  • Alert
  • Autocomplete
  • Badge
  • Data GridRebuilt on TanStack Table v9, with pinning now start/end
  • Date Selector
  • Event CalendarNew event calendar component with five views
  • File Upload
  • FiltersSizing and interaction refinements
  • Frame
  • GanttNew gantt component with day to year scales
  • Icon Stack
  • Icon TileNew icon tile component with five surface variants
  • KanbanonValueCommit callback and accessibility improvements
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • SortableonValueCommit callback and accessibility improvements
  • StepperRender prop composition and styling refinements
  • Timeline
  • Tree

Application

  • App Shell
  • Auth
  • Card
  • Chart
  • Dashboard
  • Dialog
  • Empty State
  • Event CalendarThree new event calendar blocks added
  • Form
  • GanttNew gantt block added
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Wizard

Solutions

  • Agents
  • AI Ops
  • Analytics
  • Billing
  • Bookings
  • CRM
  • Files
  • Inventory
  • Users

Templates

  • E-commerce
  • SaaS
  • Dashboard
  • Landing
  • All templates

eCommerce

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

Data Grid

  • Base
  • Columns
  • Drag & DropNew drag and drop Data Grid block added
  • EditingNew editable Data Grid block added
  • Expansion
  • Filtering
  • GroupingFour new grouped and tree Data Grid blocks added
  • Virtualization

Marketing

  • Blog
  • Contact
  • CTA
  • FAQ

Resources

  • Components
  • Blocks
  • Docs
  • Support
  • Pricing
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

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

© 2026 ReUI. All rights reserved.

3.3K

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

Installation

pnpm dlx shadcn@latest add @reui/badge

Usage

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

Shadcn Badge Free Components

Browse 25 production-ready Shadcn Badge components for dashboards, forms, and product UI. These examples use Base UI primitives from @base-ui/react 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.

AutocompleteData Grid

On This Page

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

Examples

Secondary

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

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

Destructive

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

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

Success

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

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

Info

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

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

Warning

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

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

Outline

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

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

Primary Outline

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

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

Destructive Outline

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

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

Info Outline

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

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

Success Outline

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

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

Warning Outline

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

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

Primary Light

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

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

Destructive Light

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

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

Success Light

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

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

Info Light

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

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

Warning Light

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

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

Size

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>
  )
}

Full Radius

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>
  )
}

With Icon

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

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

With Icon Button

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>
  )
}

With Dot

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>
  )
}

With Link

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

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

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>
}