Use PUI.Separator for horizontal or vertical boundaries. It is decorative by
default and can opt into separator semantics with decorative={false}.
Horizontal
Account details
Notification preferences
heex
<div class="space-y-4">
<p class="text-sm text-muted-foreground">Account details</p>
<.separator />
<p class="text-sm text-muted-foreground">Notification preferences</p>
</div>Vertical
Overview
Activity
Settings
heex
<div class="flex h-8 items-center gap-3 text-sm">
<span>Overview</span>
<.separator orientation="vertical" class="h-5" />
<span>Activity</span>
<.separator orientation="vertical" class="h-5" />
<span>Settings</span>
</div><.separator />
<.separator orientation="vertical" class="mx-2 h-5" />