Badge
A versatile badge component with multiple variants and sizes built with shadcn/ui and Tailwind CSS.
This flexible badge component provides a comprehensive set of styling options for displaying labels, tags, and status indicators. It is built on top of the shadcn/ui badge but with several unique styles and variants to better fit the needs of design of modern landing pages and marketing websites.
The component includes essential features such as focus management and seamless dark mode support. Built with Shadcn, Tailwind CSS and class-variance-authority (CVA), it ensures consistent styling and accessibility across your interface.
Installation
Set up project
If you haven't done that already, follow the installation guide before installing your first component.
Install components and dependencies
npx shadcn@latest add "https://launchuicomponents.com/r/badge"
This command will:
- install necessary dependencies and add them to
package.json - add necessary components to
components/ui
Start using your component
Your component is ready to use!
Variants
Sizes
Need help?
File a feature request, report a bug, or ask me anything.