Three plans with a monthly or yearly toggle, each cell opening on a CelestographCover image, with per-member prices, a computed yearly total note and a Most popular badge. Client component.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/three-plan-pricing-04npx shadcn add @01orbital/three-plan-pricing-04yarn shadcn add @01orbital/three-plan-pricing-04bunx --bun shadcn add @01orbital/three-plan-pricing-04Part of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/blocks/pricing/three-plan-pricing-04/index.tsx, as source you own and edit.
import ThreePlanPricing04 from "@/components/blocks/pricing/three-plan-pricing-04"
export default function Example() {
return <ThreePlanPricing04 />
}| Change | Where |
|---|---|
| Plans and prices | Edit the PLANS array at the top of the file. Each plan sets its per-member price for monthly and yearly billing, its description and its features. |
| Words | The heading, badge and billing labels live in COPY and BILLING, above the markup. |
| Cover art | Each plan's art sets the Celestograph source (from) and palette. Change either, or replace the cover with your own image. |
| Featured plan | Set featured: true on one plan to give it the Most popular badge and the filled button. |
npm: @phosphor-icons/react, cn. The CLI installs them for you.
Registry pieces it installs with it:
Minimal Three-Plan Pricing
Plain pricing: a centered heading above three plan cards with price, description, a checked feature list and a button; the featured plan carries a Most popular badge and the primary button. Theme tokens only, light and dark.
Pricing Comparison Table
Plan comparison table grouped into Inbox, Reporting and Security rows, with checks, minus marks or values per plan and a sticky first column when the table scrolls sideways. Pairs with pricing-07.