Separator
A visual divider between content.
Overview
A separator draws a thin line between groups of content, horizontally or vertically.
Morpha UIAn open component library.
DocsComponentsCLI
$ npx morpha-ui add separatorExamples
Vertical
Set orientation="vertical" to divide content placed side by side, such as an
inline navigation row.
BlogDocsChangelog
Menu example
A common pattern: vertical separators dividing a row of labeled items, each paired with supporting text.
SettingsManage preferences
AccountProfile & security
HelpSupport & docs
List example
Horizontal separators dividing rows of key/value content.
Item 1Value 1
Item 2Value 2
Item 3Value 3
Installation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add separator. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add separatorAPI Reference
Prop
Type
Accessibility
- The separator always exposes
role="separator"with its orientation (Base UI has nodecorativemode). - When the line is purely visual, add
aria-hiddenso it is skipped by assistive tech.