Shadcn Separator Order Summary

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

• Label and value rows of equal weight with a rule between every row: use the Separator List Rows 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 discount takes text-success, a color this item does not install; without a success token in your theme it prints in the default text color
• Every amount is a typed string and the total is not summed from the rows; compute each dd from your order data
• The base Separator renders role separator, while the radix twin defaults decorative to true and renders role none, hidden from screen readers
• A vertical Separator takes its height from self-stretch, so it shows only in a flex row or grid unless given a height such as h-8