Separator

Separator marks a boundary between groups of content or controls, such as a heading and its body or two toolbar items. It divides visually and semantically; use gap or margin for spacing.

Install

bashnpx shadcn@4.18.0 add @siteplane/separator

Import it from @/siteplane/components/separator. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Frame: Pick Frame when the sections need their own surfaces.

Rules

• Set orientation="vertical" for a vertical divider; it stretches only when its parent row has a defined height.
• Use role="presentation" when the layout already separates content, such as list rows, so screen readers skip each line.
• Name content groups with headings; a line alone carries no structure.
• Use gap or margin for spacing, not an invisible separator.

Reference

• Separator docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Layout & utilities. Read the installed source under src/siteplane before relying on an API.