Badge

Component

About

A neobrutalist label for statuses, counts and tags, with default, outline, solid and surface variants and small, medium and large sizes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Badge to your project and fits it to your theme.

Code

How Badge is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function BadgeStyleRounded() {
  return (
    <div className="space-x-4">
      <Badge variant="solid" className="rounded-sm">
        Rounded
      </Badge>
      <Badge variant="solid" className="rounded-full">
        Full
      </Badge>
    </div>
  );
}