Separator

Installation

uvx django_shadcn@latest add separator

Usage

<c-separator />

Examples

Vertical

A vertical separator takes its height from the row around it, so give that row a height.

<div class="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    <c-separator orientation="vertical" />
    <div>Docs</div>
</div>

Semantic

A separator is decorative by default: it gets role="none" and a screen reader skips it. When the line is the only thing telling two groups apart, say so and it becomes a real separator with an aria-orientation.

<c-separator decorative="false" />