PrimitiveAvailable
Separator
A visual or semantic boundary between related content groups.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/separator.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
'use client';
import { Separator } from '@/components/ui/separator';
export default function Demo() {
return (
<div className="grid w-full max-w-md gap-4">
<h3 className="bl-type-card-title">Workspace</h3>
<p className="bl-type-small">Your shared component collection.</p>
<Separator />
<div className="flex h-6 items-center gap-4 bl-type-label">
<span>12 components</span>
<Separator orientation="vertical" />
<span>3 members</span>
</div>
</div>
);
}
States & interaction
Appearance, behavior and keyboard checks.
- A surface or content, not a control by default. No artificial hover, pressed or focus state.
- Internal actions use Button or links. Informational states need text as well as color.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | horizontal / vertical | horizontal | Direction of the separator. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Keep visible text labels and the semantic HTML shown in the example.
Retain keyboard focus styles and test the composition with keyboard navigation.
Use className for visual customization; preserve the primitive ARIA attributes.