Separator

A visual divider for separating content sections with optional label.

MateUI

An open-source UI component library.

Docs

Components

Blog

1'use client';
2
3import { Separator } from '@/components/ui/separator';
4
5export function Default() {
6  return (
7    <div className="w-full max-w-sm space-y-4">
8      <div>
9        <h4 className="text-sm font-medium">MateUI</h4>
10        <p className="text-muted-foreground text-sm">An open-source UI component library.</p>
11      </div>
12      <Separator />
13      <div className="flex h-5 items-center gap-4 text-sm">
14        <span>Docs</span>
15        <Separator orientation="vertical" />
16        <span>Components</span>
17        <Separator orientation="vertical" />
18        <span>Blog</span>
19      </div>
20    </div>
21  );
22}

Installation

pnpm dlx mateui add separator

Anatomy

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

1<Separator />

Variants

Default

Horizontal and vertical separators.

MateUI

An open-source UI component library.

Docs

Components

Blog

1'use client';
2
3import { Separator } from '@/components/ui/separator';
4
5export function Default() {
6  return (
7    <div className="w-full max-w-sm space-y-4">
8      <div>
9        <h4 className="text-sm font-medium">MateUI</h4>
10        <p className="text-muted-foreground text-sm">An open-source UI component library.</p>
11      </div>
12      <Separator />
13      <div className="flex h-5 items-center gap-4 text-sm">
14        <span>Docs</span>
15        <Separator orientation="vertical" />
16        <span>Components</span>
17        <Separator orientation="vertical" />
18        <span>Blog</span>
19      </div>
20    </div>
21  );
22}

With Label

Separator with centered inline text.

or continue with

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

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.

PreviousSelect NextSkeleton