{"@context":"https://schema.org","@graph":[{"@type":"TechArticle","headline":"Separator","description":"A minimalist divider used to create visual distinction between content sections, improving readability and organization. It supports horizontal orientations.","url":"https://intentui.com/docs/components/surfaces/separator","author":{"@type":"Person","name":"Irsyad","url":"https://x.com/irsyad"},"publisher":{"@type":"Organization","name":"Intent UI","url":"https://intentui.com","logo":{"@type":"ImageObject","url":"https://intentui.com/icon.svg"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://intentui.com/docs/components/surfaces/separator"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://intentui.com/docs"},{"@type":"ListItem","position":3,"name":"Components","item":"https://intentui.com/docs/components"},{"@type":"ListItem","position":4,"name":"Surfaces","item":"https://intentui.com/docs/components/surfaces"},{"@type":"ListItem","position":5,"name":"Separator","item":"https://intentui.com/docs/components/surfaces/separator"}]}]}
Surfaces
Separator
A minimalist divider used to create visual distinction between content sections, improving readability and organization. It supports horizontal orientations.
Basic
Sometimes you need a separator to separate content. This component is a simple wrapper around the Separator component from react-aria-components. It's a breeze to use.
Installation
Install the component via the CLI in one command.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/separator
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm
pnpm
yarn
bun
npm install react-aria-components
Anatomy
import { Separator } from "@/components/ui/separator"
<Separator orientation='vertical | horizontal' />Orientation
Separator has two orientations: horizontal and vertical. The default is horizontal.
Intent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.