fetaUI
GitHub

Plan Card

One plan: name, price, pitch, features and a full width Button.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/plan-card
Playground

Team

Recommended

$24 per seat a month

For growing teams that need control over access and spend.

  • Unlimited projects
  • Up to 25 seats
  • SSO and audit log
  • Priority support
States

Team

$24 per seat a month

For growing teams that need control over access and spend.

  • Unlimited projects
  • Up to 25 seats
  • SSO and audit log
  • Priority support

Team

Current

$24 per seat a month

For growing teams that need control over access and spend.

  • Unlimited projects
  • Up to 25 seats
  • SSO and audit log
  • Priority support

Team

Recommended

$24 per seat a month

For growing teams that need control over access and spend.

  • Unlimited projects
  • Up to 25 seats
  • SSO and audit log
  • Priority support

Team

$24 per seat a month

For growing teams that need control over access and spend.

  • Unlimited projects
  • Up to 25 seats
  • SSO and audit log
  • Priority support
State
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/plan-card

Accessibility

  • Current disables the Button and says so with a Badge.
  • The card is an article named after the plan.
  • Selected is a ring and a label on the Button, not color alone.

Motion

  • The card fades in and rises 8 px over 400 ms.
  • The selected ring fades in over 150 ms.
  • The Button presses to 0.98.
  • With reduced motion, the card and ring appear at once.

Responsive behavior

  • 300 wide on Web and 358 on Mobile.

Performance

  • Holds no state, and the enter animation is CSS that reduced motion turns off.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import PlanCard from @/components/fetaui/plan-card. It composes Button and Radio with Tag from data-kit.
  • The parent owns state. current disables the Button, recommended adds a badge and Primary, and selected rings the card.
  • The Radio shows on default and selected only, and calls onSelect. Hold the chosen plan in the parent. Passing no onSelect leaves it inert.
  • price, period and pitch are preformatted strings, and action is the Button text.
/docs/components/plan-card/markdown
PreviousCredit Top-up
NextPayment Method

Related

CheckoutComponentExpress pay, billing period, plan options, seats, add-ons, billing and card fields, and a live order summary.Comparison TableComponentPlans as columns with the home column washed, grouped features, yes, no and partial marks, and a switch for only differences.Billing OverviewProBlockBilling settings: current plan, card on file, usage meters and invoices.Payment MethodComponentA saved card: brand tile, label and expiry, status and a menu. Add is a dashed row.