Pricing Card

Elegant pricing plan showcase card

$ npx @hritik-sharmaa/repeat-ui add card-pricing-card
Category
Card
Added
Aug 14, 2025
Version
2.0.0
Packages
None
Flavors
TS · JS · Tailwind · CSS
Live preview

Basic

$90

Per user/month, billed monthly

  • ✓Advanced data analysis
  • ✓Priority support
  • ✓Unlimited storage

Premium

Popular

$120

Per user/month, billed monthly

  • ✓Advanced data analysis
  • ✓Priority support
  • ✓Unlimited storage

Enterprise

$200

Per user/month, billed annually

  • ✓Advanced data analysis
  • ✓Priority support
  • ✓Unlimited storage
Customize
120
import CardPricingCard from "@/components/repeat-ui/card-pricing-card/preview";

<CardPricingCard
  plan="Premium"
  currency="$"
  billing="Per user/month, billed monthly"
  buttonText="Get started"
/>

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add card-pricing-card --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/card-pricing-card/.

    import CardPricingCard from "@/components/repeat-ui/card-pricing-card/preview";

export default function Page() {
  return <CardPricingCard />;
}

Props

PropTypeDefaultDescription
planstring"Premium"Plan name.
pricenumber | string120Price, without the currency.
currencystring"$"Shown before the price.
billingstring"Per user/month, billed monthly"The line under the price.
featuresstring[]3 sample featuresListed with check marks.
buttonTextstring"Get started"Button label.
isPopularbooleantrueOutline the card and fill its button in the accent colour.
accentColorstring"#3b82f6"Icon, check marks, badge and button colour.
onSelect() => void-Called when the button is pressed.
classNamestring""Extra classes for the root element.

More card

See all
3d CardInteractive 3D card with hover tilt effects
Profile CardBeautiful user profile display card
Ink RevealBrush the pointer over an image to paint its colours in