Separator

Visually or semantically separates content.

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add separator

Variants & Examples

Horizontal Separator

A horizontal line to visually separate content.

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

Code for Horizontal Separator

1import { Separator } from "@/components/ui/separator";
2
3export function HorizontalSeparator() {
4  return (
5    <div>
6      <div className="space-y-1">
7        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
8        <p className="text-sm text-muted-foreground">
9          An open-source UI component library.
10        </p>
11      </div>
12      <Separator className="my-4" />
13      <div className="flex h-5 items-center space-x-4 text-sm">
14        <div>Blog</div>
15        <Separator orientation="vertical" />
16        <div>Docs</div>
17        <Separator orientation="vertical" />
18        <div>Source</div>
19      </div>
20    </div>
21  )
22}

Vertical Separator

A vertical line to visually separate content, often used in navigation or lists.

Item 1

Item 2

Item 3

Code for Vertical Separator

1import { Separator } from "@/components/ui/separator";
2
3export function VerticalSeparator() {
4  return (
5    <div className="flex h-5 items-center space-x-4 text-sm">
6      <div>Item 1</div>
7      <Separator orientation="vertical" />
8      <div>Item 2</div>
9      <Separator orientation="vertical" />
10      <div>Item 3</div>
11    </div>
12  )
13}

Props

These are the available props for the Separator component:

Prop	Type	Description	Default
orientation	"horizontal" \| "vertical"	The orientation of the separator.	"horizontal"
decorative	boolean	Whether the separator is purely decorative and not semantic.	false