# V separator 12

> Section Heading with Line

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

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

## Install

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

## Files

### `registry/default/variants/v-separator-12.tsx`

```tsx
import { Separator } from "@/registry/default/ui/separator";

export default function Particle() {
  return (
    <div className="w-full max-w-xs space-y-4">
      <div className="flex items-center gap-3">
        <span className="shrink-0 font-medium text-sm">Recent Activity</span>
        <Separator />
      </div>
      <div className="space-y-1.5 text-muted-foreground text-sm">
        <p>Pushed 3 commits to main branch</p>
        <p>Opened pull request #45</p>
        <p>Commented on issue #38</p>
      </div>
      <div className="flex items-center gap-3">
        <span className="shrink-0 font-medium text-sm">Repositories</span>
        <Separator />
      </div>
      <div className="space-y-1.5 text-muted-foreground text-sm">
        <p>ui-cnippet (public)</p>
        <p>design-system (private)</p>
      </div>
    </div>
  );
}
```