Carregando…

Pricing Card

Display

Single pricing plan card with feature list, CTA button and highlight option.

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for display/pricing-card

Instalação via CLI

$ npx kikitocn add pricing-card

Exemplo de uso

Pricing CardExample.tsx

import { PricingCard } from "@/components/ui/cn/pricing-card/PricingCard";

export function PricingCardExample() {
  return (
    <PricingCard />
  );
}

Props

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`	—	Período (ex: '/mês')
`description`	`string`	—	Descrição do plano
`cta`	`string`	`'Começar'`	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

Voltar para Display

Carregando…