Separator

Separate content and actions horizontally or vertically to clarify information hierarchy.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Separator for a horizontal or vertical division between UI regions. It is not a general drawing primitive for chart axes, activity trails, or decorative paths.

Choose orientation with row or column. Set length and thickness using the appropriate system tokens.
Keep a purely decorative separator decorative. Add accessible semantics only when the line genuinely separates content.

Import

import { Separator } from '@snowui-design-system/components';

Usage

Vertical

Length

Line endings

Section break

API Reference

Property	Type	Default	Example	Description
`row`	`boolean`	`false`	`row`	Horizontal separator, matching the Frame orientation syntax.
`column`	`boolean`	`false`	`column`	Vertical separator, matching the Frame orientation syntax.
`length`	`string \| number`	`—`	`length="Example"`	Length along the main axis; numeric values are treated as pixels.
`thickness`	`string \| number`	`—`	`thickness="Example"`	Line width, defaulting to 0.5px (equivalent to var(--border-1)).
`rounded`	`boolean`	`true`	`rounded`	Whether the line ends are rounded; rounded by default.
`decorative`	`boolean`	`true`	`decorative`	Whether the separator is decorative; by default it outputs aria-hidden="true".
`children`	`Snippet`	`—`	`<Separator>Content</Separator>`	Reserved for a separator that includes text.