Separator

Separator provides a visual line to divide content sections.

Import​

<script>
  import { Separator } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<div>Content above</div>
<Separator />
<div>Content below</div>

Props​

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Line direction
decorative	boolean	true	If decorative (no semantic meaning)
class	string	-	Additional classes

Horizontal Separator​

Default horizontal divider:

<div class="space-y-4">
  <p>First section content</p>
  <Separator />
  <p>Second section content</p>
</div>

Vertical Separator​

For horizontal layouts:

<div class="flex items-center gap-4 h-6">
  <span>Item 1</span>
  <Separator orientation="vertical" />
  <span>Item 2</span>
  <Separator orientation="vertical" />
  <span>Item 3</span>
</div>

In Navigation​

<nav class="flex items-center gap-2">
  <a href="/">Home</a>
  <Separator orientation="vertical" class="h-4" />
  <a href="/products">Products</a>
  <Separator orientation="vertical" class="h-4" />
  <a href="/about">About</a>
</nav>

With Text​

<div class="flex items-center gap-4">
  <Separator class="flex-1" />
  <span class="text-sm text-muted-foreground">OR</span>
  <Separator class="flex-1" />
</div>

Semantic vs Decorative​

For decorative separators (visual only):

<Separator decorative />

For meaningful separators (between distinct sections):

<Separator decorative={false} />

Custom Styling​

<!-- Thicker line -->
<Separator class="h-[2px]" />

<!-- Colored line -->
<Separator class="bg-primary" />

<!-- Dashed line -->
<Separator class="border-t border-dashed border-border bg-transparent h-0" />

<!-- Shorter width -->
<Separator class="w-1/2 mx-auto" />

Examples​

Form Sections​

<form class="space-y-6">
  <div class="space-y-4">
    <h3 class="font-medium">Personal Information</h3>
    <Input label="Name" />
    <Input label="Email" type="email" />
  </div>

  <Separator />

  <div class="space-y-4">
    <h3 class="font-medium">Address</h3>
    <Input label="Street" />
    <Input label="City" />
  </div>

  <Separator />

  <Button type="submit">Submit</Button>
</form>

Dropdown Menu​

<DropdownMenu>
  <DropdownMenu.Item>Profile</DropdownMenu.Item>
  <DropdownMenu.Item>Settings</DropdownMenu.Item>
  <Separator class="my-1" />
  <DropdownMenu.Item>Help</DropdownMenu.Item>
  <DropdownMenu.Item>Feedback</DropdownMenu.Item>
  <Separator class="my-1" />
  <DropdownMenu.Item>Log out</DropdownMenu.Item>
</DropdownMenu>

Login Divider​

<div class="space-y-4">
  <Button class="w-full">
    <GoogleIcon class="mr-2" />
    Continue with Google
  </Button>

  <div class="flex items-center gap-4">
    <Separator class="flex-1" />
    <span class="text-xs text-muted-foreground uppercase">or continue with email</span>
    <Separator class="flex-1" />
  </div>

  <form class="space-y-4">
    <Input label="Email" type="email" />
    <Input label="Password" type="password" />
    <Button type="submit" class="w-full">Sign In</Button>
  </form>
</div>

Toolbar​

<div class="flex items-center gap-2 p-2 border rounded-lg">
  <Button variant="ghost" size="icon"><BoldIcon /></Button>
  <Button variant="ghost" size="icon"><ItalicIcon /></Button>
  <Button variant="ghost" size="icon"><UnderlineIcon /></Button>

  <Separator orientation="vertical" class="h-6" />

  <Button variant="ghost" size="icon"><AlignLeftIcon /></Button>
  <Button variant="ghost" size="icon"><AlignCenterIcon /></Button>
  <Button variant="ghost" size="icon"><AlignRightIcon /></Button>

  <Separator orientation="vertical" class="h-6" />

  <Button variant="ghost" size="icon"><LinkIcon /></Button>
  <Button variant="ghost" size="icon"><ImageIcon /></Button>
</div>

Card Footer​

<Card>
  <Card.Header>
    <Card.Title>Subscription</Card.Title>
  </Card.Header>
  <Card.Content>
    <p>You are currently on the Pro plan.</p>
  </Card.Content>
  <Separator />
  <Card.Footer>
    <Button variant="outline">Change Plan</Button>
    <Button variant="ghost" class="text-destructive">Cancel</Button>
  </Card.Footer>
</Card>

Dimensions​

• Horizontal: h-[1px] w-full
• Vertical: h-full w-[1px]
• Color: bg-black (from design tokens)

Accessibility​

• Uses Bits UI Separator primitive
• decorative prop controls role attribute
• Screen readers announce non-decorative separators

Related Components​

• Card - Content containers
• Section - Content sections
• DropdownMenu - Menu separators