Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Vertical Separator
A vertical separator line dividing horizontal content columns using orientation vertical prop with flex layout
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Columns need boundaries—vertical separators divide horizontal content. This React Separator creates vertical dividing lines between flex items using orientation equals vertical prop. Built with shadcn/ui Separator and Radix UI primitives, vertical lines separate columns—perfect for navigation items, toolbar buttons, breadcrumb trails, dashboard metrics, or any horizontal layout where visual separation between adjacent elements improves clarity without excessive spacing or borders.
Left
Center
Right
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Horizontal Separator
Horizontal line between rows
In Navigation
Vertical separators in nav links
Simple Line
Minimal separator example
Breadcrumb
Navigation with separators
Button Group
Grouped buttons with dividers
Card
Card with column layout