Separator

Un divisor visual para separar secciones de contenido con label opcional.

NachUI

An open-source UI component library.

Docs

Components

Blog

default.tsx

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">NachUI</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}

Instalación

pnpm dlx nachui add separator

Anatomía

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

1<Separator />

Variantes

Predeterminado (Default)

Separadores horizontales y verticales.

NachUI

An open-source UI component library.

Docs

Components

Blog

default.tsx

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">NachUI</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}

Con Label

Separador con texto centrado.

or continue with

with-label.tsx

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}

Referencia de API

Separator

Prop	Tipo	Por defecto	Descripción
`orientation`	`"horizontal"` \| `"vertical"`	`"horizontal"`	La dirección del separador.
`decorative`	`boolean`	`true`	Si es `true`, usa `role="none"` para accesibilidad.
`label`	`string`	—	Texto opcional mostrado dentro del separador.
`className`	`string`	—	Clases CSS adicionales.

AnteriorSelect SiguienteSkeleton