Default
Annual plan1 seat, billed yearly£24.00
Show the codeHide the code
Default, code
<SummaryLine label="Annual plan" value="£24.00" detail="1 seat, billed yearly" />SummaryLine
One line of an order summary: a label and an amount, end aligned. Discount draws a minus and the success colour; Total sits under a rule at the heavier weight.
- Pro
- Version 2.0.0-rc.1
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Order summary
Annual plan1 seat, billed yearly£48.00
Extra seat£12.00
Subtotal£60.00
Launch offer−£15.00
VAT (20%)£9.00
Total£54.00
Show the codeHide the code
Order summary, code
<section aria-label="Order summary">
<SummaryLine label="Annual plan" value="£48.00" detail="1 seat, billed yearly" />
<SummaryLine label="Extra seat" value="£12.00" />
<SummaryLine kind="subtotal" label="Subtotal" value="£60.00" />
<SummaryLine kind="discount" label="Launch offer" value="£15.00" />
<SummaryLine kind="subtotal" label="VAT (20%)" value="£9.00" />
<SummaryLine kind="total" label="Total" value="£54.00" />
</section>Tokens
The 6 design tokens SummaryLine reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 6 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.border.default | … | --sd-color-border-default |
| color.text.default | … | --sd-color-text-default |
| color.text.secondary | … | --sd-color-text-secondary |
| color.text.success | … | --sd-color-text-success |
| spacing.gap.md | … | --sd-spacing-gap-md |
| spacing.inset.sm | … | --sd-spacing-inset-sm |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/summary-lineThen import it
import { SummaryLine } from "@/components/ui/summary-line"Props
| Prop | Type | What it does |
|---|---|---|
kind | 'item' | 'subtotal' | 'discount' | 'total'Default 'item' | item (default), subtotal (secondary label), discount (a minus and the success colour) or total (under a rule, heavier). |
labelrequired | string | What the line is for ("Annual plan", "Subtotal", "Total"). |
valuerequired | string | The amount, already formatted for the locale ("£24.00"). Discounts are given without the minus: the line draws it (U+2212, read as "minus"). |
detail | string | One line under the label ("1 seat, billed yearly"). |
When to use it
Use it for
- Order summaries in checkout and invoices
- Subtotals, discounts, tax and totals under a list of items
Use something else for
- Editable quantities: use NumberField in a line item
- Tables of many columns: use Table
Accessibility
Screen readers announce "Launch offer, minus £15.00" (the label, then the amount).
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.8, 1.4.9.
Not interactive: density changes spacing only.
What your product still has to do
- Format amounts for the locale and currency before passing them
- Pass discounts without a minus: the line draws a minus sign (U+2212), which screen readers read as "minus"
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 280 text runs: 0 below 7:1, lowest 8.43:1 |
| Target size | 0 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 0 focus stops in 0 browser engines: all pass |
Manual passes with VoiceOver and NVDA haven’t been done yet.
In Figma
The Figma component is SummaryLine, with Kind (Item, Subtotal, Discount, Total). The Figma library isn’t published yet.
Figma to code: Kind → kind (Item = "item", Subtotal = "subtotal", Discount = "discount", Total = "total"); Label → label; Value → value; Detail → detail when Show detail.