Lists
A list for each kind of data
Every list is built from the same parts (kit/list.tsx): one card, rows split by hairlines, a leading mark, the content, and a trailing action. They adapt to the width of their container, not the screen, so they work in a phone, a side panel or a full page. Try them on the Devices page.
Which list to use
- Money in and out over time
- Ledger
- Work moving through stages
- Queue
- People and their access
- People
- Things that happened
- Activity feed
- Quantities that run out
- Stock
- Things at a time of day
- Schedule
- Documents and uploads
- Files
- Things to pick and buy
- Catalog
- Doing one thing to many rows
- Selection
- Preferences
- Settings
- Details of one record
- Key–value
- Anything else
- Simple or two-line
For a specific kind of data
Ledger
Money over time. Grouped by day with the day's total. Money in is success-green with a +; money out stays plain, never red (spending isn't an error). Pending gets a warning badge.
- Today+Rs 40,840.00
- Yesterday−Rs 10,650.00
Queue
Work moving through stages. Each row shows its stage as a status badge and the one action that moves it on. Late items say so in words, not only colour.
- #10422× Chicken momo, 1× Lemon tea2 min agoNew
- #10411× Thakali set, 2× Lassi9 min agoPreparing
- #10393× Veg chowmein21 min ago · running latePreparing
- #10381× Sel roti, 1× Milk tea14 min agoReady
- #10361× Buff sekuwa30 min agoCancelled
People
Members and their access. Initials when there's no photo. Role is changed in place; state shows only when it isn't the normal one.
4 people · 1 invite pending
- ASAarati Shresthaaarati@example.com
- BTBikash Tamangbikash.tamang@example.com
- CGChandani Gurungchandani@example.comInvited
- DMDipesh Maharjan Shakya Bajracharyadipesh.maharjan.shakya@verylongdomain.example.comSuspended
Activity feed
What happened, newest first, grouped by time. Unread rows are bolder with a brand dot; the icon's tint says what kind of event it was.
2 unread
- Today
- Earlier
Stock
Quantities that run out. The bar is brand-coloured when fine, warning when low (under 20%), danger when out, each with a word.
- Basmati rice (25 kg)RCE-02518/40
- Lemon tea bagsTEA-LMNLow4/50
- Paper cups 250 mlCUP-250Out of stock0/500
- Mustard oil (1 L)OIL-MST32/36
Schedule
Things at a time of day, on a line. The current item is marked with the brand; deadlines with danger.
- 09:0009:30Stock deliveryBack door
- 11:0012:00Staff meetingNowFirst floor
- 13:3015:00Private booking · 12 guestsRooftop
- 18:00VAT return dueDeadline
Files
Type shown by icon and tint, long names truncate, size and date underneath.
- Menu October 2026.pdf1.2 MB · Today
- Floor plan photo.jpg3.4 MB · Yesterday
- Sales report Q3 with all branches and every single category broken down.xlsx860 KB · 12 Oct
Catalog
Things to pick: picture, name, two lines of description, price, and Add turning into a stepper.
- Chicken momo (steam)10 pieces with tomato achar and sesame soup.Rs 220.002
- Thakali setRice, dal, seasonal greens, gundruk, pickles and your choice of curry. Refills on rice and dal.Rs 480.00
- Masala teaMilk tea with cardamom and ginger.Rs 60.00Sold out
Selection
Act on many rows at once. A select-all row on top, and a floating bar with the actions once anything is picked.
- 1 selected
1 selected
Settings
Grouped rows: values that open an editor, switches that apply at once, and a destructive action alone in its own group.
Organization
- Add 13% VAT to bills
- Sound on new orderPlays on this device only.
General purpose
Simple
One line, leads somewhere.
Two-line
Title, supporting text, meta.
Key–value
Details of one record. Stacks when narrow.
- Bill number
- INV-2081-001042
- Date
- 2081-07-06 (22 Oct 2026)
- Table
- T-04 · First floor
- Status
- Paid
- Total
- Rs 2,340.00
- Note
- Customer asked for less spice in everything, and for the tea to come after the meal, not before.
Grouped A–Z
Sticky group headers while scrolling.
- A2
- B3
- C1
- D2
- S3
Expandable
A summary that opens to details.
- 2× Chicken momo
- 1× Masala tea
- 1× Thakali set
- 2× Lassi
- 2× Sel roti
- 1× Thakali set
Reorderable
Set the order. Buttons work by touch and keyboard.
- 1Starters
- 2Momo
- 3Mains
- 4Drinks
- 5Desserts
Ranked
Top items, with a bar against the first.
- 1Chicken momo184
- 2Masala tea151
- 3Thakali set97
- 4Veg chowmein62
- 5Lassi40
Checklist
Tick things off.
States
Every list handles loading, empty, failure and length.
Loading
Empty
No suppliers yet
Add who you buy from to track bills.
Couldn't load
Couldn't load the list
Check your connection. What you had is still saved.
Long list: show more
- Row one
- Row two
- Row three