Separator

Divide sections visually. Structure complex UIs. Create hierarchy.

NachUI

An open-source UI component library.

Docs

Components

Blog

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

Installation

Copy and paste the following code into your project.

1import * as React from 'react';
2import { cn } from '../lib/cn';
3
4type SeparatorOrientation = 'horizontal' | 'vertical';
5
6interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
7  ref?: React.Ref<HTMLDivElement>;
8  orientation?: SeparatorOrientation;
9  decorative?: boolean;
10  label?: string;
11}
12
13function Separator({
14  className,
15  orientation = 'horizontal',
16  decorative = true,
17  label,
18  ref,
19  ...props
20}: SeparatorProps) {
21  const semanticProps = decorative
22    ? { role: 'none' as const }
23    : { role: 'separator' as const, 'aria-orientation': orientation };
24
25  if (label) {
26    return (
27      <div
28        ref={ref}
29        aria-label={decorative ? undefined : label}
30        className={cn(
31          'flex items-center gap-3',
32          orientation === 'vertical' && 'flex-col',
33          className,
34        )}
35        {...semanticProps}
36        {...props}
37      >
38        <span
39          className={cn(
40            'bg-border shrink-0',
41            orientation === 'horizontal' ? 'h-px flex-1' : 'w-px flex-1',
42          )}
43        />
44        <span className="text-muted-foreground shrink-0 text-xs font-medium">{label}</span>
45        <span
46          className={cn(
47            'bg-border shrink-0',
48            orientation === 'horizontal' ? 'h-px flex-1' : 'w-px flex-1',
49          )}
50        />
51      </div>
52    );
53  }
54
55  return (
56    <div
57      ref={ref}
58      className={cn(
59        'bg-border shrink-0',
60        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
61        className,
62      )}
63      {...semanticProps}
64      {...props}
65    />
66  );
67}
68
69Separator.displayName = 'Separator';
70
71export { Separator };
72export type { SeparatorProps };

Update the import paths to match your project structure.

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

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

With Label

Separator with centered inline text.

Sign in to Acme Studio

Use the account your team invited.

or continue with

Single sign on is available on the Team plan.

1import { Button } from '@/components/ui/button';
2import { Separator } from '@/components/ui/separator';
3
4export function WithLabel() {
5  return (
6    <div className="border-border bg-card w-full max-w-sm space-y-4 rounded-xl border p-6">
7      <div>
8        <h4 className="text-sm font-medium">Sign in to Acme Studio</h4>
9        <p className="text-muted-foreground text-sm">Use the account your team invited.</p>
10      </div>
11      <Button className="w-full">Continue with email</Button>
12      <Separator label="or continue with" />
13      <div className="grid grid-cols-2 gap-2">
14        <Button variant="outline">GitHub</Button>
15        <Button variant="outline">Google</Button>
16      </div>
17      <Separator />
18      <p className="text-muted-foreground text-xs">Single sign on is available on the Team plan.</p>
19    </div>
20  );
21}

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. When `decorative` is `false` it also becomes the accessible name.
`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

NextSheet

1import { Fragment } from 'react';

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

5const navLinks = ['Docs', 'Components', 'Blog'] as const;

7export function Default() {

8 return (

9 <div className="w-full max-w-sm space-y-4">

10 <div>

11 <h4 className="text-sm font-medium">NachUI</h4>

12 <p className="text-muted-foreground text-sm">An open-source UI component library.</p>

13 </div>

14 <Separator />

15 <div className="flex h-5 items-center gap-4 text-sm">

16 {navLinks.map((link, index) => (

17 <Fragment key={link}>

18 {index > 0 && <Separator orientation="vertical" />}

19 <span>{link}</span>

20 </Fragment>

21 ))}

22 </div>

23 </div>

24 );

25}

Installation

Copy and paste the following code into your project.

1import * as React from 'react';
2import { cn } from '../lib/cn';
3
4type SeparatorOrientation = 'horizontal' | 'vertical';
5
6interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
7  ref?: React.Ref<HTMLDivElement>;
8  orientation?: SeparatorOrientation;
9  decorative?: boolean;
10  label?: string;
11}
12
13function Separator({
14  className,
15  orientation = 'horizontal',
16  decorative = true,
17  label,
18  ref,
19  ...props
20}: SeparatorProps) {
21  const semanticProps = decorative
22    ? { role: 'none' as const }
23    : { role: 'separator' as const, 'aria-orientation': orientation };
24
25  if (label) {
26    return (
27      <div
28        ref={ref}
29        aria-label={decorative ? undefined : label}
30        className={cn(
31          'flex items-center gap-3',
32          orientation === 'vertical' && 'flex-col',
33          className,
34        )}
35        {...semanticProps}
36        {...props}
37      >
38        <span
39          className={cn(
40            'bg-border shrink-0',
41            orientation === 'horizontal' ? 'h-px flex-1' : 'w-px flex-1',
42          )}
43        />
44        <span className="text-muted-foreground shrink-0 text-xs font-medium">{label}</span>
45        <span
46          className={cn(
47            'bg-border shrink-0',
48            orientation === 'horizontal' ? 'h-px flex-1' : 'w-px flex-1',
49          )}
50        />
51      </div>
52    );
53  }
54
55  return (
56    <div
57      ref={ref}
58      className={cn(
59        'bg-border shrink-0',
60        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
61        className,
62      )}
63      {...semanticProps}
64      {...props}
65    />
66  );
67}
68
69Separator.displayName = 'Separator';
70
71export { Separator };
72export type { SeparatorProps };

Update the import paths to match your project structure.

Variants

Default

Horizontal and vertical separators.

NachUI

An open-source UI component library.

Docs

Components

Blog

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

With Label

Separator with centered inline text.

Sign in to Acme Studio

Use the account your team invited.

or continue with

Single sign on is available on the Team plan.

1import { Button } from '@/components/ui/button';
2import { Separator } from '@/components/ui/separator';
3
4export function WithLabel() {
5  return (
6    <div className="border-border bg-card w-full max-w-sm space-y-4 rounded-xl border p-6">
7      <div>
8        <h4 className="text-sm font-medium">Sign in to Acme Studio</h4>
9        <p className="text-muted-foreground text-sm">Use the account your team invited.</p>
10      </div>
11      <Button className="w-full">Continue with email</Button>
12      <Separator label="or continue with" />
13      <div className="grid grid-cols-2 gap-2">
14        <Button variant="outline">GitHub</Button>
15        <Button variant="outline">Google</Button>
16      </div>
17      <Separator />
18      <p className="text-muted-foreground text-xs">Single sign on is available on the Team plan.</p>
19    </div>
20  );
21}

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. When `decorative` is `false` it also becomes the accessible name.
`className`	`string`	—	Additional CSS class names.