Horizontal separator between items in a list.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A stack of 3 label and value rows with a rule between every row, labels on the left and muted values on the right
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
- Priced line items with one rule under the heading and another above the total: use the Separator Order Summary 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
- 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-4.mdget_example("c-separator-4")npx shadcn@latest add @reui/c-separator-4Shadcn Components in Separator List Rows
About Shadcn Separator List Rows
Horizontal separator between items in a list. Built with the Separator component. A free, open source shadcn separator example you can install with npx shadcn@latest add @reui/c-separator-4 and edit as your own code.
What You Can Build With Shadcn Separator List Rows
- 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-4
- 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.
- Vertical Vertical separator for inline elements.
- Grouped Menu Items Vertical separator groups related menu items.
- 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 List Rows?
Use it for a stack of 3 label and value rows with a rule between every row, labels on the left and muted values on the right.
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 priced line items with one rule under the heading and another above the total, use the Separator Order Summary 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 List Rows?
Is Shadcn Separator List Rows free to use?
Which components does Shadcn Separator List Rows 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.