SummaryTable

Key-value list optimised for transaction summaries, order details, and ticket info.

Order summary

emphasised on the total line keeps the eye where it belongs.

import { Card, SummaryTable } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function SummaryTableOrderPreview() {
  return (
    <PreviewLayout>
      <Card>
        <SummaryTable
          rows={[
            { label: "Subtotal", value: "$120.00" },
            { label: "Discount", value: "−$12.00" },
            { label: "Tax", value: "$9.60" },
            { label: "Total", value: "$117.60", emphasised: true },
          ]}
        />
      </Card>
    </PreviewLayout>
  )
}

Loyalty breakdown

Same component, points / cashback context.

import { Card, SummaryTable } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function SummaryTableLoyaltyPreview() {
  return (
    <PreviewLayout>
      <Card>
        <SummaryTable
          rows={[
            { label: "Starting balance", value: "12,480 pts" },
            { label: "Earned this month", value: "+1,200 pts" },
            { label: "Redeemed", value: "−800 pts" },
            { label: "Current balance", value: "12,880 pts", emphasised: true },
          ]}
        />
      </Card>
    </PreviewLayout>
  )
}

Installation

pnpm add @appboxo/ui-kit

TouchCell Cell

On This Page

Order summary Loyalty breakdown Installation

Build mini-apps with Boxo

Freedom UI Kit is the design system behind partner mini-apps shipping on the Boxo platform.