Separator

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

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}

Instalación

Copia y pega el siguiente código en tu proyecto.

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

Actualiza las rutas de importación para que coincidan con la estructura de tu proyecto.

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

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}

Con Label

Separador con texto centrado.

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}

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. Con `decorative` en `false` también es su nombre accesible.
`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

SiguienteSheet

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}

Instalación

Copia y pega el siguiente código en tu proyecto.

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

Actualiza las rutas de importación para que coincidan con la estructura de tu proyecto.

Variantes

Predeterminado (Default)

Separadores horizontales y verticales.

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}

Con Label

Separador con texto centrado.

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}

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. Con `decorative` en `false` también es su nombre accesible.
`className`	`string`	—	Clases CSS adicionales.