ProUnlock everything for $49.99 a year, or $79.99 once. See plans ›

Nexus UI

Live Summary, animated React component

A booking form that writes its own receipt. Every choice sends a line across to the summary, flying from the control you touched; change a number and only the digits that change roll. Press Reserve and the receipt folds itself into the confirmation.

  • Pro
  • Inputs & Controls
  • Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Book a stay

Lakeside House, 12 to 15 November

Nights2
Guests2
Breakfast$24 a guest each morning
Late checkoutUntil 2pm, $40

Your stay

Choose a room and your stay will build itself here.

Taxes and fees
Total

Props

PropTypeDefaultWhat it does
autoplaybooleanfalseMakes choices by itself so the lines can be seen flying to the receipt, until the visitor touches the form. Never runs under reduced motion and pauses while the card is off screen.
onReserve(booking: { room: string; nights: number; guests: number; breakfast: boolean; late: boolean; total: number }) => void—Called when Reserve is pressed, with the room, nights, guests, extras and the total.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Live Summary is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

More inputs & controls