# V frame 7

> With badge status indicator

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

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

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-frame-7.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/frame`

## Files

### `registry/default/variants/v-frame-7.tsx`

```tsx
import { Badge } from "@/registry/default/ui/badge";
import {
  Frame,
  FrameDescription,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@/registry/default/ui/frame";

export function Pattern() {
  return (
    <Frame className="w-full max-w-md">
      <FrameHeader className="flex-row items-start justify-between">
        <div>
          <FrameTitle>API Status</FrameTitle>
          <FrameDescription>Current system health</FrameDescription>
        </div>
        <Badge variant="success">Operational</Badge>
      </FrameHeader>
      <FramePanel>
        <div className="flex flex-col gap-2">
          {[
            { label: "Authentication API", status: "operational" },
            { label: "Storage API", status: "operational" },
            { label: "Webhooks", status: "degraded" },
          ].map((service) => (
            <div
              className="flex items-center justify-between"
              key={service.label}
            >
              <p className="text-sm">{service.label}</p>
              <span
                className={`size-2 rounded-full ${service.status === "operational" ? "bg-success" : "bg-warning"}`}
              />
            </div>
          ))}
        </div>
      </FramePanel>
    </Frame>
  );
}
```