Separator

A horizontal or vertical line.

import { Separator } from 'components/UI/Separator'

Horizontal

Use a separator to divide groups of content when white space is not enough. Horizontal is the default, and the line fills the width of its container.

Product analytics

Trends, funnels, retention, and paths for every event.

Use vertical between groups of items in a row, such as links or actions. Set orientation="vertical".

Docs

Pricing

Changelog

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Inside Menu, Select, Combobox, Autocomplete, and Toolbar, use that component's Separator part.
Outside a flex row, a vertical separator needs a height, such as h-4.