BentoCardPRO
BentoCard 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 { BentoCard } from "@tsukira/ui"; export function Ejemplo() { return <BentoCard />;}Ejemplos#
Los ejemplos detallados de BentoCard están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.
Ver demo en PatternsAPI#
BentoCardPropsextends HTMLAttributes<HTMLDivElement>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
primaryLabel* | ReactNode | — | — |
primaryValue* | ReactNode | — | — |
primaryDelta | string | — | — |
secondaryStats | BentoStat[] | — | Hasta 3 stats secundarios. |
series | number[] | — | Serie para sparkline (opcional). |
seriesLabel | ReactNode | — | Etiqueta de la serie ("Últimos 12 meses"). |
footer | ReactNode | — | Pie de tarjeta separado por divisor ("Últimos 6 meses"). |
primaryTone | SparklineTone | 'neutral' | — | Tono. |
chartVariant | 'inline' | 'bleed' | — | Cómo se muestra el gráfico. |