The Separator component is used to visually divide content or group related items in layouts.
It supports both horizontal and vertical orientations, different sizes, and style variants.

• Orientation: Can be horizontal or vertical.
• Style variants: Supports solid, dashed, and dotted.
• Custom sizing: Adjustable thickness and length.
• Flexible alignment: Can align with start, end, or center content.

Usage Example

Preview

start

end

center

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { Separator } from "@fefade-ui/svelte"

  const separatorVariants = ["dotted", "dashed", "solid"] as const
</script>

<div
  style="
    max-width: 300px;
    margin: 3rem auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    "
>
  {#each Constants.sizes as size, i (i)}
    <Separator
      {size}
      variant={i === 0 ? "solid" : i % 2 ? "dashed" : "dotted"}
    />
  {/each}

  {#each separatorVariants as variant, i (i)}
    <Separator
      height="3rem"
      orientation="vertical"
      {variant}
      size={i === 0 ? "md" : i % 2 ? "lg" : "xl"}
    />
  {/each}

  {#each ["start", "end", "center"] as value (value)}
    <div style="display: flex; gap: 0.5rem; align-items: baseline;">
      {#if value === "end" || value === "center"}
        <Separator style="flex: 1;" />
      {/if}
      <p style="flex-shrink: 0;">
        {value}
      </p>
      {#if value === "start" || value === "center"}
        <Separator style="flex: 1;" />
      {/if}
    </div>
  {/each}
</div>

Props

Prop	Type	Default	Description
size	string	md	Determines the thickness of the separator (sm, md, lg, xl).
variant	string	solid	Style of the line: solid, dashed, dotted.
orientation	string	horizontal	Orientation of the separator: horizontal or vertical.
height	string	—	Optional height for vertical separators.
class	string	—	Custom CSS classes.
style	string	—	Inline styles for additional customization.

Best Practices

• Use separators to group related content or divide sections clearly.
• Prefer subtle variants for less prominent separation, and solid for strong division.
• Adjust size according to surrounding content and layout.
• Combine orientation and alignment for responsive layouts.
• Avoid overusing separators to prevent visual clutter.