Shadcn.io is not affiliated with official shadcn/ui
Vertical Separator
A vertical React separator between inline items using orientation vertical, a fixed parent height, and Tailwind gap for Next.js toolbars
Split inline items with a vertical line. This React Separator sets orientation to vertical and lets the parent flex row (h-5 items-center) define height so the default h-full rule can paint a 1px rule. Built with shadcn/ui and Radix UI. Perfect for nav trails, metadata rows, toolbars, and any horizontal cluster that needs a light divider.
Vertical Separator preview
Scroll to load preview
Installation
Related Components
Horizontal Separator
Horizontal line between rows
In Navigation
Vertical separators in nav links
Menu Separator
Vertical separators in a menu row
Simple Line
Minimal separator example
Breadcrumb
Navigation with separators
Card
Card with column layout
FAQ
Was this page helpful?
Sign in to leave feedback.