Cómo empezar

Integra Solar en tu proyecto

Dos formas, según lo que vas a hacer: el CDN para prototipos y maquetas, o un build de Tailwind para algo que se va a usar de verdad.

Opción A

Prototipos y maquetas, vía CDN

Pegar y listo, sin compilar.

Copia este snippet en el <head> de tu HTML:
<!-- Solar · v0.4.0 · solo prototipos -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://utiliza.me/solar/assets/css/ccs-ui-kit.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://utiliza.me/solar/assets/js/ccs-tailwind-config.js"></script>
Solo para prototipos. El CDN de Tailwind no está pensado para producción. Si lo que armaste se va a usar de verdad, pásalo a la opción B antes de publicarlo. Este sitio usa el CDN porque es documentación; un proyecto real no debería.
Opción B

Producción, con build de Tailwind

Compila solo las clases que usas, sin depender del CDN.

Descarga los archivos de Solar
Stylesheet

ccs-ui-kit.css

CSS base de Solar: animaciones y utilidades que Tailwind no cubre.

Descargar
Config

ccs-tailwind-config.js

Tokens de Solar: colores, fuentes, sombras, radios y gradientes.

Descargar
Manifiesto

components.json

Listado de componentes con metadatos para integraciones o build tools.

Descargar
Instala Tailwind y usa Solar como preset
npm install -D tailwindcss@3
// tailwind.config.js
module.exports = {
  presets: [require('./ccs-tailwind-config.js')],
  content: ['./**/*.html'],
};

Ajusta content a las carpetas de tu proyecto.

Compila el CSS
/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
npx tailwindcss -i input.css -o solar.css --minify

Mientras desarrollas, agrega --watch para que se compile solo cada vez que guardas.

Carga el CSS en tu HTML
<!-- Solar · v0.4.0 · producción -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

<link rel="stylesheet" href="/ccs-ui-kit.css">
<link rel="stylesheet" href="/solar.css">

Pasos para integrar un componente

  1. 1
    Carga Solar en tu proyecto

    Con la opción A para prototipos, o la B para producción.

  2. 2
    Abre el componente en el catálogo

    Busca el componente y entra a su vista de detalle.

  3. 3
    Copia el HTML con un click

    Usa el botón Copiar código y pégalo donde lo necesitas.

  4. Listo

    El componente se renderiza con los tokens CCS sin pasos adicionales.

¿Listo para construir?

Explora los 26 componentes del catálogo.

Ir al catálogo