Starting Point
v0.25.0
Start typing to search...
Go to Page
escClose
Guides
IntroductionInstallationCustomizationHelpChangelog
Resources
AvatarsUnsplash Editor
Components
AccordionAvatarBadgeBreadcrumbButtonButton GroupCardCheckboxCollapsibleComboboxDialogDropdownFieldFormsInputInput GroupKbdLabelPaginationPopoverProgressRadio GroupScrollbarSelectSeparatorSheetSidebarSliderSwitchTableTabsTextareaToastTooltip
Examples
Cards

Separator

The separator draws a thin line that visually divides content, horizontally between sections or vertically between inline items.

<div class="flex flex-col gap-4 text-sm">
  <div class="flex flex-col gap-1.5">
    <div class="leading-none font-medium">Starting Point UI</div>
    <div class="text-muted-foreground">
      The foundation for your design system
    </div>
  </div>
  <div class="separator"></div>
  <div>
    A set of beautifully designed components that you can customize, extend, and
    build on.
  </div>
</div>

Usage

Add the separator class to an empty element; it renders horizontally unless you add separator-vertical. A vertical separator stretches to its container's height, so give the row a height or let the tallest sibling define it.

ClassDescription
separatorAdd to an empty element; horizontal by default
separator-horizontalAdd to separator to force the horizontal axis
separator-verticalAdd to separator for a vertical divider
<div class="separator"></div>

Examples

Vertical

Divide inline items with separator-vertical.

<div class="flex h-5 items-center gap-4 text-sm">
  <div>Blog</div>
  <div class="separator separator-vertical"></div>
  <div>Docs</div>
  <div class="separator separator-vertical"></div>
  <div>Source</div>
</div>

Menu

Vertical separators divide richer inline groups too; hide trailing ones responsively along with their content.

<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-xs text-muted-foreground">Manage preferences</span>
  </div>
  <div class="separator separator-vertical"></div>
  <div class="flex flex-col gap-1">
    <span class="font-medium">Account</span>
    <span class="text-xs text-muted-foreground">Profile &amp; security</span>
  </div>
  <div class="separator separator-vertical hidden md:block"></div>
  <div class="hidden flex-col gap-1 md:flex">
    <span class="font-medium">Help</span>
    <span class="text-xs text-muted-foreground">Support &amp; docs</span>
  </div>
</div>

List

Separate rows of a definition list.

<div class="flex 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>
  <div class="separator"></div>
  <dl class="flex items-center justify-between">
    <dt>Item 2</dt>
    <dd class="text-muted-foreground">Value 2</dd>
  </dl>
  <div class="separator"></div>
  <dl class="flex items-center justify-between">
    <dt>Item 3</dt>
    <dd class="text-muted-foreground">Value 3</dd>
  </dl>
</div>