Spacer

Espacio flexible o fijo entre hermanos. Separa elementos en un Flex o agrega un hueco en un Stack.

Nuevo

NorthwindIF

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4import { Button } from '@/components/ui/button';
5import { BellIcon } from '@/components/ui/bell';
6import { SearchIcon } from '@/components/ui/search';
7import { Flex } from '@/components/ui/flex';
8import { Spacer } from '@/components/ui/spacer';
9
10export function Default() {
11  return (
12    <Flex
13      align="center"
14      gap="2"
15      className="border-border bg-card w-full max-w-md rounded-xl border px-3 py-2"
16    >
17      <span className="px-2 text-sm font-semibold">Northwind</span>
18      <Spacer />
19      <Button variant="ghost" size="icon" aria-label="Search">
20        <SearchIcon size={16} />
21      </Button>
22      <Button variant="ghost" size="icon" aria-label="Notifications">
23        <BellIcon size={16} />
24      </Button>
25      <Avatar size="sm">
26        <Avatar.Fallback>IF</Avatar.Fallback>
27      </Avatar>
28    </Flex>
29  );
30}

Instalación

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

1import React from 'react';
2import { cn } from '../lib/cn';
3
4const SPACER_SIZES = {
5  vertical: {
6    '1': 'h-1',
7    '2': 'h-2',
8    '3': 'h-3',
9    '4': 'h-4',
10    '5': 'h-5',
11    '6': 'h-6',
12    '8': 'h-8',
13    '10': 'h-10',
14    '12': 'h-12',
15    '16': 'h-16',
16    '20': 'h-20',
17    '24': 'h-24',
18    '32': 'h-32',
19  },
20  horizontal: {
21    '1': 'w-1',
22    '2': 'w-2',
23    '3': 'w-3',
24    '4': 'w-4',
25    '5': 'w-5',
26    '6': 'w-6',
27    '8': 'w-8',
28    '10': 'w-10',
29    '12': 'w-12',
30    '16': 'w-16',
31    '20': 'w-20',
32    '24': 'w-24',
33    '32': 'w-32',
34  },
35} as const;
36
37type SpacerSize = keyof typeof SPACER_SIZES.vertical;
38type SpacerAxis = keyof typeof SPACER_SIZES;
39
40type SpacerOwnProps<E extends React.ElementType> = {
41  as?: E;
42  size?: SpacerSize;
43  axis?: SpacerAxis;
44  className?: string;
45};
46
47type SpacerProps<E extends React.ElementType = 'div'> = SpacerOwnProps<E> &
48  Omit<React.ComponentPropsWithRef<E>, keyof SpacerOwnProps<E>>;
49
50const Spacer = <E extends React.ElementType = 'div'>({
51  as,
52  size,
53  axis = 'vertical',
54  className,
55  ...props
56}: SpacerProps<E>) => {
57  const Component: React.ElementType = as ?? 'div';
58  return (
59    <Component
60      aria-hidden="true"
61      data-slot="spacer"
62      data-axis={axis}
63      className={cn(
64        'shrink-0',
65        size ? SPACER_SIZES[axis][size] : 'flex-1 self-stretch',
66        axis === 'horizontal' && !size && 'inline-block',
67        className,
68      )}
69      {...props}
70    />
71  );
72};
73
74Spacer.displayName = 'Spacer';
75
76export { Spacer };
77export type { SpacerProps, SpacerSize, SpacerAxis };

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

Anatomía

1import { Spacer } from '@/components/ui/spacer';

1<Flex align="center">
2  <Logo />
3  <Spacer />
4  <Button>Iniciar sesión</Button>
5</Flex>

Sin size el spacer es flex-1 y ocupa el espacio que sobra, así que empuja a los hermanos que le siguen hasta el borde. Con size se convierte en un bloque fijo en el eje indicado, que se lee mejor que un mt-6 suelto en layouts largos. En ambos casos queda oculto para la tecnología asistiva.

Ejemplos

Flexible

Una barra de herramientas con las acciones al final.

NorthwindIF

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4import { Button } from '@/components/ui/button';
5import { BellIcon } from '@/components/ui/bell';
6import { SearchIcon } from '@/components/ui/search';
7import { Flex } from '@/components/ui/flex';
8import { Spacer } from '@/components/ui/spacer';
9
10export function Default() {
11  return (
12    <Flex
13      align="center"
14      gap="2"
15      className="border-border bg-card w-full max-w-md rounded-xl border px-3 py-2"
16    >
17      <span className="px-2 text-sm font-semibold">Northwind</span>
18      <Spacer />
19      <Button variant="ghost" size="icon" aria-label="Search">
20        <SearchIcon size={16} />
21      </Button>
22      <Button variant="ghost" size="icon" aria-label="Notifications">
23        <BellIcon size={16} />
24      </Button>
25      <Avatar size="sm">
26        <Avatar.Fallback>IF</Avatar.Fallback>
27      </Avatar>
28    </Flex>
29  );
30}

Fijo

Huecos con nombre en un layout apilado, vertical y horizontal.

Delete workspace

Every project, deploy and member is removed. This cannot be undone.

1import { Button } from '@/components/ui/button';
2import { Spacer } from '@/components/ui/spacer';
3
4export function Fixed() {
5  return (
6    <div className="border-border bg-card w-full max-w-sm rounded-xl border p-6">
7      <p className="text-base font-semibold">Delete workspace</p>
8      <Spacer size="2" />
9      <p className="text-muted-foreground text-sm">
10        Every project, deploy and member is removed. This cannot be undone.
11      </p>
12      <Spacer size="6" />
13      <div className="flex">
14        <Button variant="outline" size="sm">
15          Keep it
16        </Button>
17        <Spacer axis="horizontal" size="3" />
18        <Button variant="destructive" size="sm">
19          Delete
20        </Button>
21      </div>
22    </div>
23  );
24}

Referencia de API

Spacer

Prop	Tipo	Por defecto	Descripción
`size`	`'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '8' \| '10' \| '12' \| '16' \| '20' \| '24' \| '32'`	-	Tamaño fijo en la escala de espaciado. Omite para flex
`axis`	`'vertical' \| 'horizontal'`	`'vertical'`	Dirección de un spacer fijo
`as`	`React.ElementType`	`'div'`	Elemento a renderizar
`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

AnteriorCenter

SiguienteSplit

Spacer

Espacio flexible o fijo entre hermanos. Separa elementos en un Flex o agrega un hueco en un Stack.

Nuevo

NorthwindIF

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4import { Button } from '@/components/ui/button';
5import { BellIcon } from '@/components/ui/bell';
6import { SearchIcon } from '@/components/ui/search';
7import { Flex } from '@/components/ui/flex';
8import { Spacer } from '@/components/ui/spacer';
9
10export function Default() {
11  return (
12    <Flex
13      align="center"
14      gap="2"
15      className="border-border bg-card w-full max-w-md rounded-xl border px-3 py-2"
16    >
17      <span className="px-2 text-sm font-semibold">Northwind</span>
18      <Spacer />
19      <Button variant="ghost" size="icon" aria-label="Search">
20        <SearchIcon size={16} />
21      </Button>
22      <Button variant="ghost" size="icon" aria-label="Notifications">
23        <BellIcon size={16} />
24      </Button>
25      <Avatar size="sm">
26        <Avatar.Fallback>IF</Avatar.Fallback>
27      </Avatar>
28    </Flex>
29  );
30}

Instalación

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

1import React from 'react';
2import { cn } from '../lib/cn';
3
4const SPACER_SIZES = {
5  vertical: {
6    '1': 'h-1',
7    '2': 'h-2',
8    '3': 'h-3',
9    '4': 'h-4',
10    '5': 'h-5',
11    '6': 'h-6',
12    '8': 'h-8',
13    '10': 'h-10',
14    '12': 'h-12',
15    '16': 'h-16',
16    '20': 'h-20',
17    '24': 'h-24',
18    '32': 'h-32',
19  },
20  horizontal: {
21    '1': 'w-1',
22    '2': 'w-2',
23    '3': 'w-3',
24    '4': 'w-4',
25    '5': 'w-5',
26    '6': 'w-6',
27    '8': 'w-8',
28    '10': 'w-10',
29    '12': 'w-12',
30    '16': 'w-16',
31    '20': 'w-20',
32    '24': 'w-24',
33    '32': 'w-32',
34  },
35} as const;
36
37type SpacerSize = keyof typeof SPACER_SIZES.vertical;
38type SpacerAxis = keyof typeof SPACER_SIZES;
39
40type SpacerOwnProps<E extends React.ElementType> = {
41  as?: E;
42  size?: SpacerSize;
43  axis?: SpacerAxis;
44  className?: string;
45};
46
47type SpacerProps<E extends React.ElementType = 'div'> = SpacerOwnProps<E> &
48  Omit<React.ComponentPropsWithRef<E>, keyof SpacerOwnProps<E>>;
49
50const Spacer = <E extends React.ElementType = 'div'>({
51  as,
52  size,
53  axis = 'vertical',
54  className,
55  ...props
56}: SpacerProps<E>) => {
57  const Component: React.ElementType = as ?? 'div';
58  return (
59    <Component
60      aria-hidden="true"
61      data-slot="spacer"
62      data-axis={axis}
63      className={cn(
64        'shrink-0',
65        size ? SPACER_SIZES[axis][size] : 'flex-1 self-stretch',
66        axis === 'horizontal' && !size && 'inline-block',
67        className,
68      )}
69      {...props}
70    />
71  );
72};
73
74Spacer.displayName = 'Spacer';
75
76export { Spacer };
77export type { SpacerProps, SpacerSize, SpacerAxis };

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

Anatomía

1import { Spacer } from '@/components/ui/spacer';

1<Flex align="center">
2  <Logo />
3  <Spacer />
4  <Button>Iniciar sesión</Button>
5</Flex>

Ejemplos

Flexible

Una barra de herramientas con las acciones al final.

NorthwindIF

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4import { Button } from '@/components/ui/button';
5import { BellIcon } from '@/components/ui/bell';
6import { SearchIcon } from '@/components/ui/search';
7import { Flex } from '@/components/ui/flex';
8import { Spacer } from '@/components/ui/spacer';
9
10export function Default() {
11  return (
12    <Flex
13      align="center"
14      gap="2"
15      className="border-border bg-card w-full max-w-md rounded-xl border px-3 py-2"
16    >
17      <span className="px-2 text-sm font-semibold">Northwind</span>
18      <Spacer />
19      <Button variant="ghost" size="icon" aria-label="Search">
20        <SearchIcon size={16} />
21      </Button>
22      <Button variant="ghost" size="icon" aria-label="Notifications">
23        <BellIcon size={16} />
24      </Button>
25      <Avatar size="sm">
26        <Avatar.Fallback>IF</Avatar.Fallback>
27      </Avatar>
28    </Flex>
29  );
30}

Fijo

Huecos con nombre en un layout apilado, vertical y horizontal.

Delete workspace

Every project, deploy and member is removed. This cannot be undone.

1import { Button } from '@/components/ui/button';
2import { Spacer } from '@/components/ui/spacer';
3
4export function Fixed() {
5  return (
6    <div className="border-border bg-card w-full max-w-sm rounded-xl border p-6">
7      <p className="text-base font-semibold">Delete workspace</p>
8      <Spacer size="2" />
9      <p className="text-muted-foreground text-sm">
10        Every project, deploy and member is removed. This cannot be undone.
11      </p>
12      <Spacer size="6" />
13      <div className="flex">
14        <Button variant="outline" size="sm">
15          Keep it
16        </Button>
17        <Spacer axis="horizontal" size="3" />
18        <Button variant="destructive" size="sm">
19          Delete
20        </Button>
21      </div>
22    </div>
23  );
24}

Referencia de API

Spacer

Prop	Tipo	Por defecto	Descripción
`size`	`'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '8' \| '10' \| '12' \| '16' \| '20' \| '24' \| '32'`	-	Tamaño fijo en la escala de espaciado. Omite para flex
`axis`	`'vertical' \| 'horizontal'`	`'vertical'`	Dirección de un spacer fijo
`as`	`React.ElementType`	`'div'`	Elemento a renderizar
`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

AnteriorCenter

SiguienteSplit