Visão geral

O Separator é uma linha semântica (hr/div com role=separator) com suporte a orientação.

Horizontal (padrão)

Seção A

Conteúdo da seção A.

Seção B

Conteúdo da seção B.

Vertical

Blog

Docs

GitHub

Import

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

Padrão de implementação

Snippets para uso do Separator.

Separator básico

<Separator />  // horizontal
<Separator orientation="vertical" />  // vertical

Cor customizada

<Separator className="bg-border" />     // cor padrão
<Separator className="bg-primary/20" /> // verde suave
<Separator className="bg-white" />      // branco (para sections)

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter