Surfaces

Separator

A minimalist divider used to create visual distinction between content sections, improving readability and organization.

useSeparator
HeadingShow More

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

npx shadcn@latest add @intentui/separator

Manual installation

npm i 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.

Unlock the full power of
Design Intent UI
Build modern web apps faster with 450+ blocks and polished templates crafted for you.
Claim 35% Off
Heading
Show More