Carregando…

Separator

Layout

Horizontal or vertical divider with label, 3 styles and configurable spacing.

Horizontal

solid · dashed · dotted

Section above

Section below

With label

New

Start

Inline vertical separator

LeftRight

Instalação via CLI

$ npx kikitocn add separator

Interno:

@/lib/utils

Exemplo de uso

SeparatorExample.tsx

import { Separator } from "@/components/ui/cn/separator/Separator";

export function SeparatorExample() {
  return (
    <Separator />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direção do separador
`variant`	`'solid' \| 'dashed' \| 'dotted'`	`'solid'`	Estilo da linha
`label`	`ReactNode`	`undefined`	Texto ou elemento centralizado na linha
`labelAlign`	`'start' \| 'center' \| 'end'`	`'center'`	Posição do label
`spacing`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Margem vertical (horizontal) ao redor do separador
`decorative`	`boolean`	`false`	Marca como decorativo (aria-hidden) para acessibilidade

Carregando…