Billing Seat Usage Bar

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its card, button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing10.tsx instead.

Usage

The file also exports billing10Demo, 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 { Billing10, billing10Demo } from "@/components/blocks/billing/billing10";

export default function Page() {
  return <Billing10 {...billing10Demo} />;
}

Props

Behavior notes

• The bar has two stacked segments: active seats first, then pending seats in a muted color, so admins can tell reserved-but-unfilled capacity apart from occupied seats.
• The active segment turns amber once activeSeats + pendingSeats reaches 90% or more of totalSeats, and a warning line appears once the team is fully at its limit.
• The progress bar carries role="progressbar" with matching aria-value attributes, and the seat counts are also rendered as plain text so the state doesn't depend on the bar alone.
• The Add seats button and its footer are only rendered when addSeatsHref is provided, so the block also works as a read-only summary with no action.
• "Seats available" is computed as totalSeats minus active and pending seats combined, clamped at 0 so it never goes negative once the team is over capacity.

Frequently asked questions