Colored Badge

8 variants

Badge tinted with a color (background 10%, text full, border 20%).

Component 1 of 1

Install

Add this component to your project with the shadcn CLI. Pick the mode that matches how you installed the registry.

bash

npx shadcn@latest add deessejs/ui/colored-badge

Other install modes

URL mode — works against the deployed showcase site:

bash

npx shadcn@latest add https://ui.deessejs.com/r/colored-badge.json

Namespace mode — register once, then any item by short name:

bash

npx shadcn@latest registry add @deessejs=https://ui.deessejs.com/r/{name}.json

bash

npx shadcn@latest add @deessejs/colored-badge

Previewdefault

BlueGreenRedYellowOrangePurplePinkGray