Kitchen ticket
A counter ticket whose ring fills as the order cooks, from received to picked up, and whose check and cross reshape into each other.
Brisket sandwich, extra pickles and a cold lime soda
Table 4
- Ama · Ticket in
Things to try
- Open the ticket. It springs open from the status button, and a highlight glides to whatever you point at.
- Cook the order. The ring fills: empty when the ticket comes in, half on the grill, most of the way when it's at the pass.
- Hand it over. Picked up fills the circle and draws a check. Canceled draws a cross. Switch between the two and they reshape into each other.
- Read the line. Ticket in, on the grill, at the pass. For here and to-go use the same menu.
Install
npx shadcn@latest add https://your-docs-site/r/kitchen-ticket.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- One picker, used twice. The ticket and for-here or to-go share a
Pickerbuilt on Base UI's Select, with Motion on top for the opening spring and the gliding highlight. - Check and cross. The two marks are reshaped into each other with
Remold.Icon; the ring's fill is a plain stroke animation.
The order and the people are made up.
Invite teammates
A team's members panel, where one person takes four forms: an email, a chip, a pending invite and a member. Motion keeps each person continuous as they travel into the next.
Label picker
Labelling an issue: picking a label drops it onto the issue as a chip while the others make room, and typing a name that doesn't exist yet offers to create it.