Carregando…Carregando…Carregando…Carregando…Single pricing plan card with feature list, CTA button and highlight option.
$ npx kikitocn add pricing-cardimport { PricingCard } from "@/components/ui/cn/pricing-card/PricingCard";
export function PricingCardExample() {
return (
<PricingCard name="exemplo" price="Exemplo" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
name* | string | — | Nome do plano |
price* | string | — | Preço formatado |
features* | PricingFeature[] | — | Lista de features { label, included? } |
period | string | '/month' | Período (ex: '/mês') |
description | string | — | Descrição do plano |
cta | string | 'Get started' | Texto do botão de ação |
onSelect | () => void | — | Callback ao clicar no CTA |
highlighted | boolean | false | Destacar como plano recomendado |
badge | string | — | Badge no topo (ex: 'Mais Popular') |
className | string | — | Classes CSS extras |
style | CSSProperties | — | Estilos inline pro card |
Regular · Highlighted