Things

The Badge component displays a small badge or label with various styling options. It supports multiple variants including default, secondary, destructive, and outline. Built from scratch using React and native HTML div elements. No UI library dependencies.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/badge.json

Usage

tsx

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

<Badge>Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

Examples

Badge

Secondary

Destructive

Outline