EstávelLayoutdesde v0.1.0

Separator

Linha divisória horizontal ou vertical.

Quando usar

Divisão visual entre seções. Prefira em vez de bordas manuais.

Playground

Ajuste props ou edite o código em tempo real (componentes compatíveis).

Controles interativos disponíveis em breve para este componente. Use os exemplos abaixo como referência.

import { Separator } from "./separator"

export default function App() {
  return (
    <div style={{ display: "flex", width: 280, alignItems: "center", gap: 16 }}>
      <span>A</span>
      <Separator style={{ flex: 1 }} />
      <span>B</span>
    </div>
  )
}

Open Sandbox

Exemplos

Variações comuns de uso.

Uso básico

Antes

Depois

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

export function SeparatorDemo() {
  return <Separator />
}

API

Props principais documentadas para o time.

Prop	Tipo	Padrão	Descrição
className	string	—	Classes Tailwind para layout e espaçamento.
children	ReactNode	—	Conteúdo interno do componente.

Instalação

pnpm dlx shadcn@latest add http://localhost:3000/r/separator.json

pnpm dlx shadcn@latest add @youxgroup/separator

Dependências

npm: cn