Tabbed individuals/teams pricing with coloured card backdrops, Avatar orbs, and grain texture overlays.
Requires shadcn button, the Spider UI Avatar component (installed as a registry dependency), and Hugeicons.
Pill tab switcher toggles individualPlans vs teamsPlans. Each card uses coloured blobs, SVG grain, and an Avatar orb matched to the palette. Set featuredLabel for a frosted pill and ctaDark for a filled CTA.
| Prop | Type | Default |
|---|---|---|
individualPlansPlans shown in the Individuals tab. | Plan5[] | INDIVIDUALS_PLANS_5 |
teamsPlansPlans shown in the Teams tab. | Plan5[] | TEAMS_PLANS_5 |
individualsLabelLabel for the individuals tab. | string | "Individuals" |
teamsLabelLabel for the teams tab. | string | "Teams & Enterprise" |
defaultTabActive tab on first render. | "individuals" | "teams" | "individuals" |
titleSection heading. | string | "Simple, transparent pricing" |
subtitleSection subheading. | string | "No hidden fees. Choose the plan that works for you." |
classNameClasses on the root container. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
No hidden fees. Choose the plan that works for you.
Optional renewal at $99/yr
Get another year of updates or keep using without renewing. No pressure.
Get access to React Native library components and features
One-time payment
Optional renewal at $99/yr
Get another year of updates or keep using without renewing. No pressure.
The full system. React and React Native, together
One-time payment
Optional renewal at $129/yr
Get another year of updates or keep using without renewing. No pressure.
import { Pricing005 } from "@/components/ui/pricing-005"export default function Page() {
return <Pricing005 />
}