Capítulo 41 de 108

Separator

Core Idea

Separa conteúdo visual ou semanticamente, horizontal (padrão) ou vertical. Built on Base UI Separator.

Key Concepts

  • Separator: componente único, sem subcomponentes.
  • orientation="vertical": troca o eixo padrão (horizontal) para separador vertical, exige altura definida no container pai (ex.: h-5 items-center).

Code Examples

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

<div className="flex h-5 items-center gap-4 text-sm">
  <div>Blog</div>
  <Separator orientation="vertical" />
  <div>Docs</div>
  <Separator orientation="vertical" />
  <div>Source</div>
</div>
  • O que demonstra: separadores verticais entre itens de menu inline, requer items-center e altura no flex pai.
<Separator />
  • O que demonstra: uso mínimo, separador horizontal padrão entre blocos de conteúdo empilhados.

Key Takeaways

  1. Sem orientação especificada, Separator é horizontal.
  2. Para separador vertical funcionar visualmente, o container flex precisa de altura (h-5, items-center).
  3. Instalação manual requer npm install @base-ui/react.
  4. Útil tanto entre blocos de texto (horizontal) quanto entre itens de menu/lista inline (vertical).

Connects To

  • Scroll Area: exemplo de docs usa Separator entre itens dentro de uma lista rolável.
  • RTL guide (/docs/rtl): dir propaga ao Separator em layouts bidirecionais.
AnteriorTabsPróximoScroll Area