Separator with centered text label
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A lone rule with a small muted caption, or continue with, sitting on a background patch at its middle
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
- A named phase break inside an agent run log or chat transcript: use the Marker component
- A captioned break between groups of inputs inside a form: use the Field component
- A trail of links from the current page back up to its parent pages: use the Breadcrumb component
- A list of rows each led by an avatar or icon, with text and an action: use the Item component
Agent notes
- The caption
spanhides the rule behind it withbg-background; on a card or muted surface swap in that surface color - 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-5.mdget_example("c-separator-5")npx shadcn@latest add @reui/c-separator-5Shadcn Components in Separator Centered Label
About Shadcn Separator Centered Label
Separator with centered text label. Built with the Separator component. A free, open source shadcn separator example you can install with npx shadcn@latest add @reui/c-separator-5 and edit as your own code.
What You Can Build With Shadcn Separator Centered Label
- 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-5
- 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.
- List Rows Horizontal separator between items in a list.
- 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 Centered Label?
Use it for a lone rule with a small muted caption, or continue with, sitting on a background patch at its middle.
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 a named phase break inside an agent run log or chat transcript, use the Marker component. For a captioned break between groups of inputs inside a form, use the Field component. For a trail of links from the current page back up to its parent pages, use the Breadcrumb 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 Centered Label?
Is Shadcn Separator Centered Label free to use?
Which components does Shadcn Separator Centered Label 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.