Billing Team Seats
A seat management block that lists team members with their role and invitation status, plus a seat stepper that adjusts the seats on the plan and recalculates the monthly total live. Built for workspace settings and per-seat billing portals where the seat count doesn't always match the number of active members.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, badge, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-team-seats.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing140.tsx instead.
Usage
The file also exports billing140Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing140, billing140Demo } from "@/components/blocks/billing/billing140"; export default function Page() { return <Billing140 {...billing140Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Team seats" | Heading shown above the member list. |
| description | string | none | Optional supporting text under the heading. |
| members | TeamMember[] | none | Members rendered in the order given, each with a name, email, role, and optional pending status. |
| pricePerSeat | number | none | Price charged per seat per interval, used to compute the total. |
| currencySymbol | string | "$" | Symbol shown next to the per-seat price line. |
| intervalLabel | string | "/mo" | Suffix shown after the total, e.g. /mo or /yr. |
| minSeats | number | members.length | Lowest seat count the stepper allows. Defaults to the number of members passed in. |
| maxSeats | number | 100 | Highest seat count the stepper allows. |
| defaultSeatCount | number | members.length | Seat count shown on first render, clamped to at least minSeats. |
| className | string | none | Extra classes for the outer container. |
Types
interface TeamMember { id: string; name: string; email: string; role: "Admin" | "Member"; avatarSrc?: string; status?: "active" | "pending"; }
Behavior notes
- Seat count is local state, starting at defaultSeatCount (or the member count if omitted), and clamped between minSeats and maxSeats by the stepper buttons.
- The total recalculates as seatCount times pricePerSeat on every stepper click; there's no server round trip built in.
- The member list itself is static, changing the seat count doesn't add or remove rows. Wire your own invite/remove flow separately and pass an updated members array.
- If the seat count is set below the number of listed members (via minSeats), a warning line explains how many members won't fit.
- The minus button disables at minSeats and the plus button disables at maxSeats so the count can't be pushed out of range.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.