Home/Componentes/Separator

Separator

Layout

Linha divisória visual para separar conteúdo e seções.

Preview

Visualização do componente Separator

Seção 1

Seção 2

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add separator

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Uso Básico

Exemplo básico

import { Separator } from "@scmposs/hollow-ui"

<div>
  <p>Conteúdo acima</p>
  <Separator />
  <p>Conteúdo abaixo</p>
</div>

Exemplos

Diferentes casos de uso do componente Separator

Separator Horizontal (Padrão)

Título Principal

Conteúdo da seção separado visualmente

<div className="space-y-1">
  <div className="text-sm font-medium">Título Principal</div>
  <Separator className="my-2" />
  <p className="text-sm text-muted-foreground">
    Conteúdo da seção separado visualmente
  </p>
</div>

Separator Vertical

Item 1

Item 2

Item 3

<div className="flex items-center gap-3 h-20">
  <span>Item 1</span>
  <Separator orientation="vertical" />
  <span>Item 2</span>
  <Separator orientation="vertical" />
  <span>Item 3</span>
</div>

Em Menus e Listas

Configurações

<div className="space-y-1">
  <div className="px-2 py-1.5 text-sm font-medium">Configurações</div>
  <Separator />
  <button className="w-full text-left px-2 py-1.5 text-sm hover:bg-muted rounded-sm">
    Perfil
  </button>
  <button className="w-full text-left px-2 py-1.5 text-sm hover:bg-muted rounded-sm">
    Preferências
  </button>
  <Separator className="my-1" />
  <button className="w-full text-left px-2 py-1.5 text-sm hover:bg-muted rounded-sm text-destructive">
    Sair
  </button>
</div>

Em Grid Layout

150

Total

Ativos

<div className="grid grid-cols-3 gap-4">
  <div className="text-center">
    <div className="text-2xl font-bold">150</div>
    <div className="text-sm text-muted-foreground">Total</div>
  </div>
  <div className="flex items-center justify-center">
    <Separator orientation="vertical" />
  </div>
  <div className="text-center">
    <div className="text-2xl font-bold">45</div>
    <div className="text-sm text-muted-foreground">Ativos</div>
  </div>
</div>

Espaçamento Customizado

Espaçamento pequeno

Espaçamento médio

Espaçamento grande

Final

<div>
  <p>Espaçamento pequeno</p>
  <Separator className="my-1" />
  
  <p>Espaçamento médio</p>
  <Separator className="my-4" />
  
  <p>Espaçamento grande</p>
  <Separator className="my-8" />
</div>

Propriedades

Props disponíveis para o componente Separator

Prop	Tipo	Padrão	Descrição
orientation	"horizontal" \| "vertical"	"horizontal"	Orientação do separator
decorative	boolean	true	Se é apenas decorativo (não semântico)
className	string	-	Classes CSS customizadas

Nota: Baseado em Radix UI Separator. Quando decorative=false, o separator tem role="separator" para leitores de tela.

Diretrizes de Uso

✅ Quando usar

Para dividir seções de conteúdo relacionado
Em menus dropdown e listas
Entre grupos de botões ou ações
Para criar hierarquia visual

❌ Quando evitar

Como borda de elementos (use border ao invés)
Entre cada item de uma lista longa
Quando o espaçamento já indica separação clara

💡 Dicas

Use margin (my-* ou mx-*) para controlar espaçamento
Separator vertical precisa de altura definida no container
Mantenha consistente com o design system
Use decorative=true para separadores puramente visuais

Acessibilidade

Por padrão, decorative=true torna o separator invisível para leitores de tela
Use decorative=false quando o separator tem significado semântico
Separadores verticais precisam de orientation="vertical" explícito
Baseado em padrões ARIA do Radix UI