CryptoCardPRO

CryptoCard 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/ui

tsx

import { CryptoCard } from "@tsukira/ui"; export function Ejemplo() {  return <CryptoCard />;}

Los ejemplos detallados de CryptoCard están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.

CryptoCardPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`symbol`*	`ReactNode`	—	Símbolo o icono (ej. "BTC", emoji, SVG).
`name`*	`ReactNode`	—	Nombre largo.
`ticker`	`ReactNode`	—	Ticker corto.
`rangeLabel`	`ReactNode`	—	Chip informativo en la cabecera ("24H").
`price`*	`ReactNode`	—	Precio formateado.
`change`	`string`	—	Cambio porcentual ("+1.24%" / "-2.1%").
`series`	`number[]`	—	Serie de precios para sparkline.
`ranges`	`string[]`	—	Selector de rango temporal bajo el gráfico ("1D", "1S", "1M"…).
`activeRange`	`string`	—	Rango activo (controlado).
`onRangeChange`	`((range: string) => void)`	—	—
`stats`	`CryptoStat[]`	—	Mini-stats de pie (cap. de mercado, volumen, máx/mín…).
`compact`	`boolean`	—	Compact: oculta sparkline si quieres versión chica.
`chartVariant`	`'inline' \| 'bleed'`	—	Cómo se muestra el gráfico.