# V badge 16

> Notification category badges with unread counts

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-badge-16).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-badge-16
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-badge-16-light-0fe3b5f9a87701fb.png
- Registry item: https://ui.cnippet.dev/r/v-badge-16.json
- Categories: badge
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-16.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/badge`

## Files

### `registry/default/variants/v-badge-16.tsx`

```tsx
import { BellIcon, GitPullRequestIcon, MessageSquareIcon } from "lucide-react";
import { Badge } from "@/registry/default/ui/badge";
import { Button } from "@/registry/default/ui/button";
import { Frame, FramePanel } from "@/registry/default/ui/frame";

const notifications = [
  {
    count: 12,
    icon: MessageSquareIcon,
    label: "Messages",
    variant: "default" as const,
  },
  {
    count: 3,
    icon: BellIcon,
    label: "Mentions",
    variant: "destructive" as const,
  },
  {
    count: 7,
    icon: GitPullRequestIcon,
    label: "Reviews",
    variant: "info" as const,
  },
];

export function Pattern() {
  return (
    <div className="mx-auto w-full max-w-xs">
      <Frame>
        <FramePanel>
          <p className="mb-3 font-semibold text-sm">Notifications</p>
          <div className="flex flex-col gap-1.5">
            {notifications.map((n) => (
              <Button
                className="h-auto justify-between px-2 py-2"
                key={n.label}
                variant="ghost"
              >
                <span className="flex items-center gap-2 text-sm">
                  <n.icon className="size-4 text-muted-foreground" />
                  {n.label}
                </span>
                <Badge size="sm" variant={n.variant}>
                  {n.count}
                </Badge>
              </Button>
            ))}
          </div>
        </FramePanel>
      </Frame>
    </div>
  );
}
```