GIN Design
A component registry built on shadcn/ui.
BlogDocsSource
Profile
Billing
Settings
Logout
import { Separator } from "@/components/ui/separator";
export const SeparatorDemo = () => (
<div className="flex flex-col gap-8">
{/* Horizontal in text context */}
<div className="w-full max-w-xs">
<div className="space-y-1">
<h4 className="text-sm font-medium leading-none">GIN Design</h4>
<p className="text-muted-foreground text-sm">A component registry built on shadcn/ui.</p>
</div>
<Separator className="my-4" />
<div className="flex h-5 items-center gap-4 text-sm">
<span>Blog</span>
<Separator orientation="vertical" />
<span>Docs</span>
<Separator orientation="vertical" />
<span>Source</span>
</div>
</div>
{/* Between list items */}
<div className="w-full max-w-xs divide-y">
{["Profile", "Billing", "Settings", "Logout"].map((item) => (
<div key={item} className="py-2.5 text-sm">{item}</div>
))}
</div>
</div>
);Vertical
Set orientation="vertical" for an inline divider. The parent must have a fixed height — the separator fills h-full.
<div className="flex h-5 items-center gap-4 text-sm">
<span>Blog</span>
<Separator orientation="vertical" />
<span>Docs</span>
<Separator orientation="vertical" />
<span>Source</span>
</div>Semantic
Set decorative={false} when the separator represents a meaningful section boundary — Radix will render role="separator" so screen readers announce it.
<Separator decorative={false} />Spacing
Apply margin utilities directly on Separator.
<Separator className="my-4" /> {/* vertical gap */}
<Separator className="my-2" /> {/* tighter */}
<Separator className="mx-4 w-auto" /> {/* inset horizontal */}Props
Usage
import { Separator } from "@/components/ui/separator";
<Separator />
<Separator orientation="vertical" />Specs
# Mint — Separator Specs
## Component
- name: separator
- file: registry/mint/separator.tsx
- installs to: components/ui/separator.tsx
- dependencies: radix-ui
- registryDependencies: none
## What is it
A thin 1px dividing line built on Radix UI's Separator primitive. Use it to
create clear visual breaks between sections of content or inline elements.
Prefer Tailwind's `divide-y` / `divide-x` utilities when dividing a long list
of flex or grid children — it is simpler and more performant than inserting a
Separator between every item.
## Visual identity
A hairline rule using Mint's soft, translucent green `--border` colour. Fully
minimal — no radius, no shadow, no weight — keeping section breaks light and
unobtrusive.
## Design tokens
--border: oklch(0.88 0.04 155 / 60%) / oklch(0.32 0.05 155 / 40%) — divider colour (light / dark)
## States
- data-[orientation=horizontal]: h-px w-full — full-width horizontal rule
- data-[orientation=vertical]: h-full w-px — full-height vertical rule
## Conventions
- `shrink-0` is applied by default to prevent flex compression
- `decorative={true}` (default) adds `aria-hidden`; set `decorative={false}` for a meaningful section boundary — Radix renders `role="separator"` so screen readers announce it
- Apply spacing with margin utilities directly on `<Separator>` (e.g. `my-4`)
- For vertical orientation the parent container must have an explicit height — the separator fills `h-full`
- Sub-components expose `data-slot="separator"` for CSS targetingInstallation
GIN Design Plugin$ npx shadcn add https://gin-design.vercel.app/separator