Kinetiq

KQ-567 · SUMMARY/HEM

Summary Hem

A sticky summary that pays for its own space. At rest it is a card of lines, total and action; scrolling the container down condenses it to a slim bar on glide, keeping the total and the button as the same travelling elements while only the itemised lines cross-fade. Scrolling back up reopens it, and the heading holds a disclosure button so Enter or Space does the same from the keyboard.

KQ-567 · SUMMARY/HEM

Coldbrook cart

  • House blend, whole bean

    2 × 340g

    24.00

  • Kettle point single origin

    1 × 250g

    13.50

  • Cold brew concentrate

    3 × 1L

    27.00

  • Paper filters, size 02

    1 × 100

    6.00

  • Decaf, water process

    1 × 340g

    12.00

  • Travel tin

    1

    9.00

  • Bag credit returned

    5 bags

    -2.50

Items (14)
89.00
Delivery, north basin
4.00
Bag credit
-2.50
Total90.50

Hem expanded

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/summary-hem

Props

container
React.RefObject<HTMLElement | null>
default —
The scrolling element the hem listens to. The hem sits over it, not inside it.
lines
{ label: string; value: string }[]
default —
Itemised lines. They are what the condensed bar gives up.
total
string
default —
Formatted total. Kept in both states, as one element that travels.
cta
{ label: string; onPress: () => void }
default —
The action. Kept in both states; full width expanded, beside the total when condensed.
heading
string
default "Order summary"
Names the region and the disclosure button.
onCondensedChange
(condensed: boolean) => void
default —
Fires when the hem condenses or expands, whatever caused it.