89 Pro components and page blocks

Get Pro
uibrik

Plan Morph

Pro

Preview

Customize

Three
Yearly

Installation

Pro

Plan Morph is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/plan-morph

Usage

import { PlanMorph } from "@/components/uibrik/plan-morph/plan-morph";​const plans = [  {    name: "Starter",    blurb: "For trying things out.",    monthly: 0,    yearly: 0,    features: ["Core components", "Personal projects", "Community support"],    cta: "Start free",  },  {    name: "Pro",    blurb: "For designers who ship every week.",    monthly: 24,    yearly: 19,    features: ["Pro components and blocks", "Figma source files", "Commercial license"],    cta: "Get Pro",    featured: true,  },  // …1 more];​<PlanMorph  tiers="3"  defaultBilling="yearly"  currency="USD"  locale="en-US"  plans={plans}  defaultOpen={null}  onOpenChange={(name) => {}}  onSelect={(plan, billing) => {}}  // open="…"/>

Props

PlanMorph
tiers
Type "2" | "3"
"3"
How many plans to show.
defaultBilling
Type "monthly" | "yearly"
"yearly"
Billing period on mount.
currency
Type string
"USD"
ISO currency code for the prices.
locale
Type string
"en-US"
Locale for currency symbols, grouping and decimals.
plans
Type Plan[]
–
Plans in tier order. Each lists only the features it adds to the one before.
open
Type string | null
–
Name of the plan shown in full, controlled. null shows the cards.
defaultOpen
Type string | null
null
Plan shown in full on mount.
onOpenChange
Type (name: string | null) => void
–
Called when a plan opens or the cards come back.
onSelect
Type (plan: Plan, billing: Billing) => void
–
Called when a plan's button is pressed.
className
Type string
–
Classes for the section.