Separator

Divide sections visually. Structure complex UIs. Create hierarchy.

NachUI

An open-source UI component library.

Docs

Components

Blog

default.tsx

1'use client';
2
3import { Fragment } from 'react';
4
5import { Separator } from '@/components/ui/separator';
6
7const navLinks = ['Docs', 'Components', 'Blog'] as const;
8
9export function Default() {
10  return (
11    <div className="w-full max-w-sm space-y-4">
12      <div>
13        <h4 className="text-sm font-medium">NachUI</h4>
14        <p className="text-muted-foreground text-sm">An open-source UI component library.</p>
15      </div>
16      <Separator />
17      <div className="flex h-5 items-center gap-4 text-sm">
18        {navLinks.map((link, index) => (
19          <Fragment key={link}>
20            {index > 0 && <Separator orientation="vertical" />}
21            <span>{link}</span>
22          </Fragment>
23        ))}
24      </div>
25    </div>
26  );
27}

Installation

pnpm dlx nachui add separator

Anatomy

1import { Separator } from '@/components/ui/separator';

1<Separator />

Variants

Default

Horizontal and vertical separators.

NachUI

An open-source UI component library.

Docs

Components

Blog

default.tsx

1'use client';
2
3import { Fragment } from 'react';
4
5import { Separator } from '@/components/ui/separator';
6
7const navLinks = ['Docs', 'Components', 'Blog'] as const;
8
9export function Default() {
10  return (
11    <div className="w-full max-w-sm space-y-4">
12      <div>
13        <h4 className="text-sm font-medium">NachUI</h4>
14        <p className="text-muted-foreground text-sm">An open-source UI component library.</p>
15      </div>
16      <Separator />
17      <div className="flex h-5 items-center gap-4 text-sm">
18        {navLinks.map((link, index) => (
19          <Fragment key={link}>
20            {index > 0 && <Separator orientation="vertical" />}
21            <span>{link}</span>
22          </Fragment>
23        ))}
24      </div>
25    </div>
26  );
27}

With Label

Separator with centered inline text.

or continue with

with-label.tsx

1'use client';
2
3import { Separator } from '@/components/ui/separator';
4
5const labels = ['OR', 'or continue with'] as const;
6
7export function WithLabel() {
8  return (
9    <div className="w-full max-w-sm space-y-4">
10      {labels.map((label) => (
11        <Separator key={label} label={label} />
12      ))}
13    </div>
14  );
15}

API Reference

Separator

Prop	Type	Default	Description
`orientation`	`"horizontal"` \| `"vertical"`	`"horizontal"`	The direction of the separator.
`decorative`	`boolean`	`true`	If `true`, uses `role="none"` for accessibility.
`label`	`string`	—	Optional text displayed within the separator.
`className`	`string`	—	Additional CSS class names.

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousSelect

NextSkeleton