PricingCard
PricingCard forma parte del apartado «Patterns» del kit. Composiciones listas para usar: KPIs, perfiles, precios, eventos, posts y más.
Instalación#
bash
pnpm add @tsukira/uiUso#
tsx
import { PricingCard } from "@tsukira/ui"; export function Ejemplo() { return <PricingCard />;}Ejemplos#
Los ejemplos detallados de PricingCard están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.
Ver demo en PatternsAPI#
PricingCardPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'title'>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
name* | ReactNode | — | Nombre del tier (ej. "Free", "Pro", "Enterprise"). |
price* | ReactNode | — | Precio (puede ser "0", "$29", "Custom"). |
period | ReactNode | — | Período (ej. "/mes"). |
description | ReactNode | — | Descripción corta del tier. |
features | PricingFeature[] | — | Lista de features. |
cta | ReactNode | — | Botón CTA. |
highlighted | boolean | — | Marcado como destacado/recomendado (cambia el estilo). |
badge | ReactNode | — | Badge superior (ej. "POPULAR", "MEJOR VALOR"). |