basecn
Components

Badge

Displays a badge or a component that looks like a badge.

BadgeSecondaryDestructiveOutline
Verified89920+

Installation

pnpm dlx shadcn@latest add https://basecn.dev/r/badge.json
or

If you are using a namespaced registry, you can use the following command:

pnpm dlx shadcn@latest add @basecn/badge

Examples

Variants

DefaultSecondaryDestructiveOutline

Status

Todo In Progress Done Cancelled

With Image

shadcnshadcnshadcnshadcn

Indicator

Migrating from Radix UI

Common Migration Steps

All components share several migration patterns when moving from Radix UI to Base UI. Before proceeding with component-specific changes, review the essential migration patterns.

Familiarizing yourself with these patterns will make the component-specific migration steps much clearer.