Separator

Visually separates content, horizontally or vertically.

$ pnpm dlx shadcn@latest add https://dashral.com/r/separator.json

Dashral UI

An open-source component library.

Docs

Components

GitHub

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/separator.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/separator

Usage

example.tsx

1import { Separator } from "@/components/dashral/separator"
2
3<div className="flex h-5 items-center gap-4 text-sm">
4  <span>Docs</span>
5  <Separator orientation="vertical" />
6  <span>Blog</span>
7</div>

Examples

Or, between sign-in options

Two separators with the word between them.

Welcome back

Between numbers

Vertical separators take the row's height.

Sofia Davis

Product designer · Jakarta

48Projects

12.4KFollowers

312Following

API reference

Separator

Also takes every prop of Radix Separator(opens in a new tab).

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`decorative`	`boolean` Hidden from assistive technology unless false.	`true`

Accessibility

Decorative by default; set decorative={false} to expose role="separator" between groups of content.