Bento

Bento Plans

Pronew

A plan picker whose selection travels to the chosen plan and lights it up.

Starter1 seat, 1,000 invoices a monthGrowth10 seats, unlimited invoicesScaleSSO, audit log, priority support

Upgrade in one step

Switch plans from the billing page. The difference is prorated to the day.

Installation

npx shadcn@latest add @blank-pro/bento-plans

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import { BentoPlans } from "@/components/ui/bento-plans"

<BentoPlans
  plans={[
    { label: "Starter", description: "1 seat", icon: <UserIcon /> },
    { label: "Growth", description: "10 seats", icon: <RocketIcon /> },
  ]}
  selected="Growth"
/>

The rows are a real RadioGroup. Once the card is in view the selection moves from the first plan to selected, so the light visibly travels; after that a visitor can pick any row. The buttons are drawn, not wired: the card is a picture of the flow, not the flow.