Separator
Visually or semantically separates content.
Installation
import { Separator } from "@gradeui/ui"Usage
Dashboard
Keep track of what's shipping.
Overview
Analytics
Settings
Examples
Horizontal
Active Users
Today: 1,284
Sessions
Today: 6,210
New Signups
Today: 42
Vertical
Projects
Analytics
Reports
Settings
In Card
Marketing SiteLive
Version
v2.4
Visits
1,284
With Label
Or continue with
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the separator. |
| decorative | boolean | true | Whether the separator is purely decorative. When true, removes it from the accessibility tree. |
| className | string | - | Additional CSS classes. |
Accessibility
- Built on Radix UI Separator
- Uses proper ARIA role="separator"
- Set decorative=false for semantic separators
- Decorative separators are hidden from screen readers
Sidecar
The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/separator.md and shipped inside the published @gradeui/ui tarball.
---
name: Separator
import: "@gradeui/ui"
props:
- orientation? ("horizontal" | "vertical") — default "horizontal"
- decorative?: boolean (default true) — hide from a11y tree
- className?: string
when_to_use: Light divider between sibling blocks in a Card, list, or header. For section-level partition use extra spacing instead.
composes_with: [Card (between CardHeader/Content/Footer), navigation menus, any vertical stacks]
aliases: [divider, rule, hr, line, horizontal rule]
---
```jsx
<Separator />
<Separator orientation="vertical" className="h-6" />
```