Saltar al contenido
Alea0.1
Pro
  1. Alea
  2. Desarrollo
  3. Primeros pasos
  4. Instalación

Empezar

Instalación

Instala el paquete, o copia los componentes que necesites. De cualquier forma, agrega la hoja de estilos y el proveedor de tema.

1. Instala

npm install @alea/ui

2. Agrega los estilos y las fuentes

La hoja de estilos tiene los tokens y todos los componentes. Las fuentes son Crimson Pro, Inter y JetBrains Mono.

// main.tsx
import '@alea/ui/styles.css';
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet" />

3. Envuelve la app

ThemeProvider define oscuro, claro o sistema en la página y recuerda la elección. ToastProvider solo hace falta para los toasts.

import { ThemeProvider, ToastProvider, Button } from '@alea/ui';


export function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <ToastProvider>
        <Button>Hello</Button>
      </ToastProvider>
    </ThemeProvider>
  );
}