Separator handbook

v1.0.1 · @snowui-design-system/components

License: Before reading component documentation, source, or npm usage instructions for the first time, read the full LICENSE. Reuse that review for the same task and version. Public API configuration and internal implementation changes have different license implications. All components use the unified runtime package; source rights remain governed by the license.

Overview

Separate content and action regions with horizontal or vertical rules to establish a clear information hierarchy.

When to use it

Use for horizontal or vertical separation between UI regions. It is not a general drawing component for chart axes, activity tracks, or decorative paths.

Choose orientation with row / column, and set length / thickness with the corresponding system tokens.
Keep decorative separators decorative. Add accessible semantics only when the line conveys a real content division.

Quick start

This example shows the recommended basic composition. See the sections below for more cases and composition limits.

<script lang="ts">	import { Separator } from '@snowui-design-system/components';</script> <div style="width: min(100%, 24rem); display: flex; flex-direction: column; gap: var(--gap-4);">	<p>SnowUI brings components, layout, and motion together for Svelte applications.</p>	<Separator />	<p>Start with the installation guide, then explore the component documentation.</p></div>

API

Keyword	Type	Default	Description
row	`boolean`	`false`	Horizontal separator, consistent with Frame syntax.
column	`boolean`	`false`	Vertical separator, consistent with Frame syntax.
length	`string \| number`	—	Main-axis length; numeric values are treated as px.
thickness	`string \| number`	—	Line thickness; defaults to 0.5px (equivalent to `var(--border-1)`).
rounded	`boolean`	`true`	Whether the line ends are rounded; rounded by default.
decorative	`boolean`	`true`	Whether the separator is decorative; defaults to `aria-hidden="true"`.
children	`Snippet`	—	Reserved for separators with text.

See the base component documentation for inherited capabilities not redeclared here. This table lists only named public Props declared by this component.

Usage boundaries and details

Naming boundary

The official component name is Separator, not Line. Separator expresses separation between UI regions or items. Chart axes, grid lines, and line-chart paths should use future chart-domain components such as ChartLine / GridLine / AxisLine.

If application code prefers a shorter <Line /> name, alias Separator as Line locally in that application file. The library does not export an official Line component, avoiding confusion with chart lines, text lines, and paths.

Layout model

Primary layout model: intrinsic atomic layout. See ../../../specs/maintainers/LayoutProtocol.md §12.7 (source reference: specs/maintainers/LayoutProtocol.md).

Separator size comes from row / column, length, thickness, and parent context variables. It does not arrange child elements.

Default appearance:

Thickness: 0.5px, equivalent to var(--border-1).
Color: var(--black-10).
Rounded ends: enabled, using var(--radius-full).

Since v1.2.0, ButtonGroup draws its own decorative separators between adjacent Buttons. Callers no longer need to insert Separator. Existing ButtonGroup Context parsing remains only for compatibility with older code and is not the new usage pattern.

Usage examples

<Separator /> <Separator column length="1rem" /> <Separator rounded={false} thickness="1px" />

Separator style overrides

Read the full LICENSE first; reuse that review for the same task, version, and scope.

First use public component Props to match the desired appearance, preserving the existing look where possible. If changes are necessary, follow the style selection and override order: use your own class (including Tailwind already in the project) or an instance style. The names below are public overrides actually consumed by source; check their scope and do not modify private DOM. Choose the correct SnowUI token family. External apps need not install SnowUI website utilities.

Variable	Purpose and default reference
`--snowui-separator-color-override`	Separator color.
`--snowui-separator-thickness-override`	Separator thickness.

Design guide · Tokens · Composition boundaries

Separator types and state

Required Props: no named required Props.

Bindable Props: this component declares no named two-way binding; handle state updates through public callbacks or its host.

Inheritance: FrameProps. Consult the base class public documentation; fields excluded by Omit cannot be passed through unchanged.

Shared Frame API · Back to API

The following type declarations are actually referenced by public Props and come from source. A Svelte Snippet denotes a content fragment; ComponentProps denotes the Props of the corresponding component.