Separator

Dividir secciones visualmente. Estructurar UI compleja. Crear jerarquía.

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}

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 { 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}

Con Label

Separador con texto centrado.

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}

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.

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorSelect

SiguienteSkeleton