Saltar al contenido

Buscar documentación

Filtra por título, descripción o sección.

Índice de docs

Documentación · 80 páginas + 4 conceptosdocs/overview

Aprende klin con ejemplos reales y vivos.

Cada página trae demo renderizada en el servidor, guía de uso, tabla de props y notas de accesibilidad. Busca con ⌘K desde cualquier página.

Arranque rápido

1 · Instala — Terminal
pnpm add @carlos-burelo/klin
2 · Renderiza — page.tsx
<BarChart ariaLabel="Ventas"
  data={data} xKey="t" series={series} />

Detalle completo enla doc de Barras

Lee los conceptos una vez

Todo lo que las 80 páginas asumen: SSR, tema, tooltip y accesibilidad.

/docs/ssr-first
SSR-first

Por qué cada gráfica es función pura de props a SVG y qué ganas al no medir el DOM.

Leer
/docs/tema
Tema por tokens

Cómo klin usa var(--chart-1…5) para claro/oscuro automático sin hex sueltos.

Leer
/docs/tooltip
Tooltip portal

El único cliente del paquete: delegación + portal, con <title> nativo como base.

Leer
/docs/accesibilidad
Accesibilidad

role=img, aria-label obligatoria, <title> por forma y vacíos homogéneos.

Leer

Tres para empezar

Los componentes que cubren el 80% de los dashboards. Vivos, como todo lo demás.

Gráfico de barras de ventas por trimestre en línea y tienda0200400600800T1T1T2T2T3T3T4T4T1 · En línea: 420 (53% del grupo)T1 · Tienda: 380 (48% del grupo)T2 · En línea: 510 (56% del grupo)T2 · Tienda: 400 (44% del grupo)T3 · En línea: 480 (52% del grupo)T3 · Tienda: 450 (48% del grupo)T4 · En línea: 620 (54% del grupo)T4 · Tienda: 530 (46% del grupo)
En líneaTienda
/docs/bar-chart

Bar Chart

Una o varias series agrupadas, con negativos.

Ver doc completa
Gráfico de dona de matrícula por estadoJalisco: 320 (31% del total)Nuevo León: 280 (27% del total)Puebla: 190 (18% del total)Oaxaca: 140 (13% del total)Yucatán: 110 (11% del total)1,040Alumnos
Jalisco · 320Nuevo León · 280Puebla · 190Oaxaca · 140Yucatán · 110
/docs/donut-chart

Donut Chart

Partes con total al centro y % del total.

Ver doc
Flujo de aspirantes desde el registro hasta la inscripciónRegistro → Examen: 8,400 (43% del total)Examen → Aceptados: 3,200 (16% del total)Examen → No aceptados: 5,200 (27% del total)Aceptados → Inscritos: 2,600 (13% del total)Registro: 8,400 (43%)RegistroExamen: 8,400 (43%)ExamenAceptados: 3,200 (16%)AceptadosInscritos: 2,600 (13%)InscritosNo aceptados: 5,200 (27%)No aceptados
RegistroExamenAceptadosInscritosNo aceptados
/docs/sankey-diagram

Sankey Diagram

Flujos ponderados entre etapas.

Ver doc

Elige un chart y copia el ejemplo mínimo

Todas las páginas traen ejemplo mínimo, variantes de tamaño, props y accesibilidad.

¿Te sirvió esta página?

Vota y abre un issue con lo que faltó.Reportar hueco