Three plans on a dark section lit by an overhead GlowRig under a GrainVeil, with a monthly or yearly toggle that shows the monthly equivalent and the yearly total charged. 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-05npx shadcn add @01orbital/three-plan-pricing-05yarn shadcn add @01orbital/three-plan-pricing-05bunx --bun shadcn add @01orbital/three-plan-pricing-05Part 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-05/index.tsx, as source you own and edit.
import ThreePlanPricing05 from "@/components/blocks/pricing/three-plan-pricing-05"
export default function Example() {
return <ThreePlanPricing05 />
}npm: @phosphor-icons/react, cn. The CLI installs them for you.
Registry pieces it installs with it:
buttongrain-veilHow to choose
Start with how many plans you sell, then pick how much the section should carry: plain cards, a billing toggle, art on each plan, or a full comparison.
Dark Grain Three-Plan Pricing
Three plans in joined pricing cells on a section pinned dark with a paper grain surface, with a Recommended badge and solid button on the featured middle plan and outline buttons on the others.