Documentación

Inicio rápido

El Design System de Yoltra (@yoltra/ds) es el conjunto de tokens, los temas claro/oscuro y los componentes React que hay detrás de este sitio, su documentación y los ejemplos. Es React puro (18 o 19), server-first, y su tematización se controla por completo con un solo atributo data-theme.

#Instalación

bash

npm install @yoltra/ds

#Añade los estilos

DS 0.2.0 distribuye los estilos como archivos. Siempre hacen falta dos hojas —los tokens de diseño y la capa base— y los estilos de cada componente son opcionales, así una app carga solo el CSS de lo que renderiza:

import "@yoltra/ds/styles/tokens.css"; // las propiedades --yl-* (ambos temas)
import "@yoltra/ds/styles/base.css";   // la raíz de 10px, .yl-root, .yl-container
import "@yoltra/ds/styles/button.css"; // una por cada componente que uses
import "@yoltra/ds/styles/callout.css";

¿Un prototipo o un sitio de documentación donde no compensa afinar? Impórtalo todo en una línea:

import "@yoltra/ds/styles/all.css";

El modelo completo —la raíz de 10px, por componente frente al paquete, y cómo insertar las variables en un render de servidor— está en Estilos y tematización.

#Usa un componente

Las primitivas son seguras en el servidor: se renderizan en un React Server Component sin ningún proveedor, porque cada color se resuelve a través de una variable CSS.

tsx

import { Button, Callout, Stack } from "@yoltra/ds";

export function Example() {
  return (
    <Stack gap={4}>
      <Callout kind="info">Estado fino y basado en eventos para React.</Callout>
      <Button onClick={() => console.log("hola")}>Empezar</Button>
    </Stack>
  );
}

Los componentes interactivos —el controlador de tema, Tabs, CodeBlock y toda la capa de overlays— viven tras la entrada @yoltra/ds/client, que incluye una directiva "use client" real:

tsx

import { Dialog } from "@yoltra/ds/client";

#La tematización es un atributo

Pon data-theme en la raíz del documento y cada color lo sigue:

html

<html data-theme="dark"> … </html>

Cada color es una propiedad personalizada redefinida bajo [data-theme="dark"], así cambiar de tema es una sola escritura de atributo —sin re-render de React—. Usa el ThemeProvider / useTheme incluidos, llama a applyTheme("dark") directamente o —como hace este sitio— controla data-theme desde tu propio store.

#Siguientes pasos

Estilos y tematización — los tokens, la raíz de 10px y el render de servidor.
Overlays — diálogos, drawers, menús y tooltips.
Referencia de la API — cada componente, con sus props y tipos.