Badge

Extended Features

• Size variants — xs, sm, default, and lg
• Success, Info, and Warning color variants

Install

Configure your registry in components.json:

{
  "registries": {
    "@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
  }
}

Then run:

npx shadcn@latest add @uxio/badge

Examples

Size Variants

Success Variant

For positive states like completed or confirmed.

Info Variant

For informational highlights or neutral status.

Warning Variant

For cautionary states that require attention.