# Separator > A thin line that divides content, horizontal or vertical. - Name: `separator` - Status: beta - Categories: layout - File: the install writes `separator.tsx` to your `ui` alias, `@/components/ui` by default. - npm packages: `@base-ui/react`, `class-variance-authority`. The install adds them. - Gallery: https://arbokui.com/components/separator - Registry item: https://arbokui.com/r/separator.json ## Install 1. Add the registry to `components.json`. Do this first, once: ```bash npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json" ``` The command writes this entry. You can also add it by hand: ```json { "registries": { "@arbokui": "https://arbokui.com/r/{name}.json" } } ``` Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control. 2. Add the theme once per app. It replaces your color tokens with ones checked for contrast: ```bash npx shadcn@latest add @arbokui/theme ``` 3. Add the component: ```bash npx shadcn@latest add @arbokui/separator ``` ## Use it for - Dividing groups that belong to different topics: sections of a settings panel, the account links and the sign-out link in a menu. - Use orientation='vertical' between items in a row, like a toolbar or a list of links. - Leave it announced when the break matters to the reading order. Add aria-hidden when the line only adds visual rhythm. ## Avoid it for - Adding space. Use gap, margin, or padding instead. - A line between every item in a list. Use divide-y on the list instead. - A labeled divider, like 'or' between two sign-in options. A separator cannot hold text. Use two separators with a \ between them. - Separating items inside a menu, select, or toolbar. Use that component's own separator part. ## Props - `orientation`: `"horizontal" | "vertical"`. Default `"horizontal"`. Which way the line runs. Sets aria-orientation and data-orientation. - `className`: `string`. Extra classes. Later classes win, so className='h-4 self-center' gives a vertical line a fixed height. - `aria-hidden`: `boolean`. Hides a purely decorative line from screen readers. - `render`: `ReactElement`. Render prop. Swaps the \

for another element. - `children`: `never`. Not allowed. TypeScript rejects content inside a separator. ## Accessibility - Renders a \

with role="separator" and aria-orientation, so screen readers announce a break between groups. - It is not focusable. Keyboard users move past it. - When the line is only decoration, add aria-hidden. Screen readers then skip it instead of saying "separator". - Text inside a separator is not read out, so TypeScript rejects children. - The line uses the border token. It is decoration, so the theme does not hold it to a contrast minimum. Never use it as the only boundary of a control. ## Examples ### Between two sections ```tsx

Profile

Notifications

``` ### Vertical, between links in a row ```tsx ``` ### Decoration only ```tsx

Usage

1,204 of 5,000 requests

``` ### A divider with a label ```tsx

```