Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Seat Allocation Onboarding Block for Vue

A setup panel that divides ten seats among three teams with steppers that stop at what is not placed, a pool bar of ten whole-seat cells, Split evenly and Reset, and the monthly cost of the seats placed.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Hand out the first seats in an account, with this seats step for Vue with Ark UI. It is a setup panel of Bencholm, a design-team tool: a compact header over one framed panel in four bands. Engineering, Design and Marketing each have a stepper (a Button to remove a seat and one to add) that stops at what is not yet placed and says so. A pool bar of ten whole-seat cells shows who holds each one, with the unplaced cells hatched, and Split evenly and Reset beside it. A cost band works out the month from the seats placed at $12 each as a Sliding Number. The one Shine Button is Confirm seats, which waits until every seat has a home.

FAQ

What stops a stepper?

A team can't go below zero, and nobody can take more than the pool holds: when every seat is placed, Add a seat answers "Every seat is placed." and nothing moves. The buttons stay pressable and say why, rather than going grey, so a keyboard user never loses their place.

How is the pool bar read?

It is ten cells, one per seat, filled in order: the first team's cells, then the next team's, then hatched cells for the seats nobody holds yet. Weight carries who holds a cell (full, medium, light), never colour, and the bar is drawn left to right even on a right-to-left page. A screen reader gets one sentence ("Engineering 4, Design 3, Marketing 2, not placed 1") instead of ten cells.

Why is the cost only for placed seats?

This product bills a seat once someone holds it, so the figure is placed seats times $12 and the rest wait in the pool for free. Change PRICE and the sentence under "What it costs" if your product bills the whole pool.

What stays local in the demo, and how do I wire it?

Everything: Confirm seats only says "Saved in this demo." and nothing leaves the page. In your app send alloc from confirm once nothing is unplaced, and load the saved split into START. The three teams and the pool size are typed in DEPTS and POOL.

Can I use it from the keyboard?

Yes. Tab goes to each team's two buttons, which are named "Remove a seat from Design" and "Add a seat to Design", then to Split evenly, Reset and Confirm seats. The status line says what changed after each press.

How does it look on a phone?

The rows keep their steppers at the end, the pool bar and its legend wrap under the buttons, and the foot with Confirm seats and the status line pins to the bottom of the screen.

All 100 onboarding blocks