shadcn/ui
The Foundation for your Design System
A set of beautifully designed components that you can customize, extend, and build on.
<div class="flex max-w-sm flex-col gap-4 text-sm">
<div class="flex flex-col gap-1.5">
<div class="leading-none font-medium">shadcn/ui</div>
<div class="text-muted-foreground">The Foundation for your Design System</div>
</div>
<Separator />
<div>
A set of beautifully designed components that you can customize, extend, and build on.
</div>
</div>Installation
Install the separator component using the command or manual steps.
blazor-shadcn add separatorUsage
@using BlazorShadcn.Components.UI<Separator />Examples
Vertical
Use Orientation="Vertical" for vertical separators.
Blog
Docs
Source
<div class="flex h-5 items-center space-x-4 text-sm">
<span>Blog</span>
<Separator Orientation="@Separator.SeparatorOrientation.Vertical" />
<span>Docs</span>
<Separator Orientation="@Separator.SeparatorOrientation.Vertical" />
<span>Source</span>
</div>Menu
Vertical separators between menu items with descriptions.
Settings
Manage preferences
Account
Profile & security
Help
Support & docs
<div class="flex items-center gap-2 text-sm md:gap-4">
<div class="flex flex-col gap-1">
<span class="font-medium">Settings</span>
<span class="text-muted-foreground text-xs">Manage preferences</span>
</div>
<div class="mx-1 flex h-10 items-center">
<Separator Orientation="@Separator.SeparatorOrientation.Vertical" Class="shrink-0 bg-foreground/20" />
</div>
<div class="flex flex-col gap-1">
<span class="font-medium">Account</span>
<span class="text-muted-foreground text-xs">Profile & security</span>
</div>
<div class="mx-1 hidden h-10 items-center md:flex">
<Separator Orientation="@Separator.SeparatorOrientation.Vertical" Class="shrink-0 bg-foreground/20" />
</div>
<div class="hidden flex-col gap-1 md:flex">
<span class="font-medium">Help</span>
<span class="text-muted-foreground text-xs">Support & docs</span>
</div>
</div>List
Horizontal separators between list items.
- Item 1
- Value 1
- Item 2
- Value 2
- Item 3
- Value 3
<div class="flex w-full max-w-sm flex-col gap-2 text-sm">
<dl class="flex items-center justify-between">
<dt>Item 1</dt>
<dd class="text-muted-foreground">Value 1</dd>
</dl>
<Separator />
<dl class="flex items-center justify-between">
<dt>Item 2</dt>
<dd class="text-muted-foreground">Value 2</dd>
</dl>
<Separator />
<dl class="flex items-center justify-between">
<dt>Item 3</dt>
<dd class="text-muted-foreground">Value 3</dd>
</dl>
</div>