fma-ds

Order Summary

What the user is about to confirm before buying: lines, an applicable benefit, discounts, the total and the action.

originalMITexperimentalChangelogRegistry JSON

Overview

OrderSummary takes the title, totalLabel, total and optional totalDescription (values formatted by the app) and the action button.

  • Large screens: a card that sticks while the page scrolls — put it in the side column.
  • Smaller screens: a bar fixed to the bottom with the total and the action; the total opens the lines in a bottom sheet. Leave room under the page, e.g. pb-28 lg:pb-0.

Its children sit in a description-list:

  • `OrderSummaryLine`: label, value and a description under the label — an item, a fee, who the order is for. tone="discount" for a negative value.
  • `OrderSummaryOption`: a benefit behind a Switch, such as the account balance, its amount struck through while off.

The total stands apart by size and weight, not only color.

Built-in text is in English; translate it with i18n.labels.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/order-summary

    Files land in components/fma-ds/order-summary/order-summary.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0lucide-react@^1.61.0