Vertical separator for inline elements.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A single line of 3 one word labels, Blog, Docs and Source, split by 2 rules as tall as the row
When to use
- Thin rules between a heading and its body, or between the stacked rows of a list or a summary
- Vertical rules between inline labels or side by side menu entries along one row
- Labeled breaks with a short caption centered on the rule, like an or continue with line
When not to use
- Side by side entries that each stack a title over a caption: use the Separator Grouped Menu Items example
- A trail of links from the current page back up to its parent pages: use the Breadcrumb component
- Step lines and named phase breaks in an agent run log or transcript: use the Marker component
- A list of rows each led by an avatar or icon, with text and an action: use the Item component
Agent notes
- Blog, Docs and Source are plain
divtext, not links; wrap each in an anchor with a real target before using the row as navigation - The base
Separatorrenders role separator, while the radix twin defaultsdecorativeto true and renders role none, hidden from screen readers - A vertical
Separatortakes its height fromself-stretch, so it shows only in a flex row or grid unless given a height such ash-8
https://reui.io/components/separator/c-separator-2.mdget_example("c-separator-2")npx shadcn@latest add @reui/c-separator-2Shadcn Components in Separator Vertical
About Shadcn Separator Vertical
Vertical separator for inline elements. Built with the Separator component. A free, open source shadcn separator example you can install with npx shadcn@latest add @reui/c-separator-2 and edit as your own code.
What You Can Build With Shadcn Separator Vertical
- Composes Separator, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-separator-2
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Separator Examples
- Horizontal Horizontal separator for content sections.
- Grouped Menu Items Vertical separator groups related menu items.
- List Rows Horizontal separator between items in a list.
- Centered Label Separator with centered text label
- Order Summary Order summary with separators
Related Shadcn Component Categories
Open-source shadcn sheet components for slide-over details, side panels, and task flows.
Open-source shadcn sidebar components for app shells, collapsible side navigation, and dashboard layouts.
Open-source shadcn signature pad components for e-signature forms, agreements, and proof of delivery.
Open-source shadcn skeleton components for loading placeholders, perceived performance, and content previews.
Open-source shadcn slider components for range filters, pricing controls, and media settings.
Open-source shadcn Sonner toast components for success feedback, error states, and non-blocking updates.
Frequently Asked Questions
When should I use Shadcn Separator Vertical?
Use it for a single line of 3 one word labels, Blog, Docs and Source, split by 2 rules as tall as the row.
Shadcn Separator as a whole fits:
- Thin rules between a heading and its body, or between the stacked rows of a list or a summary
- Vertical rules between inline labels or side by side menu entries along one row
- Labeled breaks with a short caption centered on the rule, like an or continue with line
For side by side entries that each stack a title over a caption, use the Separator Grouped Menu Items example. For a trail of links from the current page back up to its parent pages, use the Breadcrumb component. For step lines and named phase breaks in an agent run log or transcript, use the Marker component. For a list of rows each led by an avatar or icon, with text and an action, use the Item component.
How do I install Shadcn Separator Vertical?
Is Shadcn Separator Vertical free to use?
Which components does Shadcn Separator Vertical use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.