Shadcn.io is not affiliated with official shadcn/ui
List Separator
Horizontal React separators between definition-list rows using shadcn/ui Separator for key-value lists in Next.js
Divide stacked key-value rows without turning them into a table. This React Separator sits between dl rows in a flex column, matching the official shadcn list example. Built with shadcn/ui and Radix UI. Perfect for invoices, order summaries, account details, and any compact definition list.
List Separator preview
Scroll to load preview
Installation
Related Components
Horizontal Separator
Horizontal line between sections
Section Divider
Titled section breaks
Menu Separator
Vertical separators in a menu row
Tight Spacing
Compact gap between rows
Card
Card with section divisions
Simple Line
Minimal separator only
FAQ
Was this page helpful?
Sign in to leave feedback.