remold/ui

Table booking

A restaurant booking that fell through offers two other times; the one you pick grows into the updated booking, and its party size opens a compact picker. Built on Base UI's Button, Toggle Group and Tooltip.

Base UIMotion

BosphorusFri 14 Nov · 4 guests
Your 7:30 table is no longer freeThe kitchen closes early for a private event. Pick one of these instead.

Things to try

  • Pick a new time. The card springs into the updated booking, and the time you chose travels from its option into the booking's header while the notice and the other option step out of the way.
  • Change the party. Press the guest count to open the party-size picker. Pick a number and you're back on the same booking with the new count already in place.
  • Go back with the arrow. The booking settles back into the options it came from. Hover the confirmation code to see what it's for.

Install

npx shadcn@latest add https://your-docs-site/r/table-booking.json

Dependencies

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 motion

How it works

  • One card, three faces. The notice, the booking and the party-size picker are faces of one card. It springs its real height between them and clips what's inside, so nothing is scaled.
  • The time carries over. The time you pick is the same chip in the option and in the booking, so Motion's layoutId moves it without resizing it. Everything else scales in from just below its size, unblurring, a beat after the part before.
  • Built on Base UI. Button for the options and every press, ToggleGroup and Toggle for the party size, whose highlight slides to your pick, and Tooltip on the confirmation code.
The restaurant and the booking are made up.

One-time code

A sign-in card where code cells fold into verifying, error and verified states.

Music player

A mini now-playing bar that opens into the full player: the artwork grows from a thumbnail into the cover, the title, artist and play button settle into place, and sound waves move while it plays.

On this page

Things to tryInstallDependenciesHow it works