Ledger Row
Web (React)
A list row that glides aside on a swipe to reveal a drawer of actions, set like an entry in a printed ledger.
Card-coloured rows with serif copy and mono action labels sit on the paper; the drawer is a muted tone and the action takes the theme's primary ink. Swipe past the commit point to fire the first action outright.
Folio 12Proof returned with notes
Folio 13Awaiting the second read
Folio 14Set in type, ready to bind
Installation
CLI
npx @modus-ui/cli add glide-ledger-rowManual
- Copy the code from the component tab.
- Create a file at
components/ui/glide-ledger-row.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | any | - | - |
| actions | any | DEFAULT_ACTIONS | - |
| actionColor | string | "hsl(var(--primary))" | - |
| drawerColor | string | "hsl(var(--muted))" | - |
| rowColor | string | "hsl(var(--card))" | - |
| textColor | string | "hsl(var(--foreground))" | - |
| height | number | 64 | - |
| radius | number | 16 | - |
| actionWidth | number | 80 | - |
| direction | string | "left" | - |
| snapBounce | number | 0.2 | - |
| resistance | number | 0.55 | - |
| collapseMs | number | 200 | - |
| commitAt | number | 0.6 | - |
| fullSwipe | boolean | true | - |
| disabled | boolean | false | - |
| open | any | - | - |
| onOpenChange | any | - | - |
| onAction | any | - | - |
| onCommit | any | - | - |
| closeOnAction | boolean | true | - |
| haptic | boolean | true | - |
| label | string | "Ledger entry" | - |
| style | any | - | - |
Comments