Pricing Card
A card component to show pricing information.
Most Popular
PREMIUM
$29/mo
Best for professionals
Usage
import { PricingCard, PricingCardDescription, PricingCardFeature, PricingCardFeatures, PricingCardFooter, PricingCardHeader, PricingCardHighlight, PricingCardPrice, PricingCardPriceAmount, PricingCardPricePeriod, PricingCardTitle,} from "@/app/_components/ui/pricing-card";<PricingCard isHighlighted={true}> <PricingCardHighlight>Most Popular</PricingCardHighlight> <PricingCardHeader> <PricingCardTitle>PREMIUM</PricingCardTitle> <PricingCardPrice> <span className="text-3xl">$</span> <PricingCardPriceAmount>29</PricingCardPriceAmount> <PricingCardPricePeriod>/mo</PricingCardPricePeriod> </PricingCardPrice> <PricingCardDescription>Best for professionals</PricingCardDescription> </PricingCardHeader> <PricingCardFeatures> <PricingCardFeature>All Basic features</PricingCardFeature> <PricingCardFeature>Priority support</PricingCardFeature> <PricingCardFeature>10GB storage space</PricingCardFeature> <PricingCardFeature>5 user accounts</PricingCardFeature> <PricingCardFeature>Advanced analytics</PricingCardFeature> </PricingCardFeatures> <PricingCardFooter> <Button className="w-full">Get Premium</Button> </PricingCardFooter></PricingCard>Props
PricingCard
| Name | Type | Default | Description |
|---|---|---|---|
isHighlighted | boolean | false | Whether the card is highlighted or not. |
PricingCardDescription
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Adds a custom class to the component. |
PricingCardFeature
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Adds a custom class to the component. |
PricingCardFeatures
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Adds a custom class to the component. |
PricingCardFooter
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Adds a custom class to the component. |
PricingCardHeader
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Adds a custom class to the component. |
PricingCardHighlight
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Adds a custom class to the component. |
PricingCardPrice
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Adds a custom class to the component. |
PricingCardPriceAmount
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Adds a custom class to the component. |
PricingCardPricePeriod
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Adds a custom class to the component. |
PricingCardTitle
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Adds a custom class to the component. |