Seat Crowd, animated React component

The seat picker for a pricing page, as a crowd of little people. Drag or fling the yellow ruler and your team appears on stage: each new person hops in from the side on an arc, lands with a squash and the row shuffles to make room, while the camera zooms out as the crowd grows. Take seats away and the newest wave goodbye and hop off. Cross into a bigger plan and the badge flips over with a pop of confetti in the plan's colour; past forty people, the last one holds up a “+12 more” sign. The price rolls like an odometer, monthly or yearly. Keyboard: focus the ruler; arrow keys add or remove one seat, Page Up and Page Down five, Home and End jump to the ends. Arrow keys also switch between monthly and yearly billing.

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.

How big is your team?

Starter

seats

per month$36 per month

$12 per seat

Seat Crowd

Demo it by itself

The code you copy has the settings you chose. Pro also gives you the one-line install and a build prompt to rebuild it with your AI tool.

Props

Prop	Type	Default	What it does
min	number	1	The min shown in the component.
max	number	100	The max shown in the component.
value	number	—	The value shown in the component.
defaultValue	number	8	Starting value of value when you leave it uncontrolled.
pricePerSeat	number	12	monthly price per seat (ignored when you pass price)
price	(seats: number) => number	—	monthly total for a seat count, for tiered pricing
currency	string	"$"	The currency shown in the component.
plans	SeatPlan[]	PLANS	The plans shown in the component.
defaultBilling	"monthly" \| "yearly"	"monthly"	Starting value of billing when you leave it uncontrolled.
onBillingChange	(billing: "monthly" \| "yearly") => void	—	Called when the visitor uses billing change.
onChange	(seats: number) => void	—	Called with the new value whenever the visitor changes it.
autoplay	boolean	false	Plays a demo by itself until the first touch. Held still under reduced motion.
className	string	""	Extra classes for the outer element.

Add it to your project

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
Connect the registry with your API key
Seat Crowd 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}"
    }
  }
}
```

Seat Crowd, animated React component

Play with it

How big is your team?

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Seat Crowd, animated React component

Play with it

How big is your team?

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More inputs & controls