CCS·UI Kit
Cómo empezar

Integra el kit en tu proyecto

Dos formas de usar el CCS UI Kit: descargá los archivos para hostearlos junto a tu app, o pegalos desde un CDN para arrancar en segundos.

Opción A

Vía CDN — pegar y listo

Ideal para prototipos, landings o pruebas rápidas. Sin compilación.

Copiá este snippet en el <head> de tu HTML:

<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">

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://TU-CDN/ccs-ui-kit/assets/js/ccs-tailwind-config.js"></script>
<link rel="stylesheet" href="https://TU-CDN/ccs-ui-kit/assets/css/ccs-ui-kit.css">
Reemplazá TU-CDN por la URL definitiva de publicación del kit (GitHub Pages, jsDelivr o intranet CCS).
Opción B

Descargar y hostear localmente

Recomendado para producción: aloja los archivos junto a tu app y mantén control de versión.

Stylesheet

ccs-ui-kit.css

CSS base del kit: tokens, animaciones y utilidades institucionales.

Descargar
Config

ccs-tailwind-config.js

Extensión de Tailwind con la paleta CCS, fuentes, sombras y gradientes.

Descargar
Manifiesto

components.json

Listado de componentes con metadatos para integraciones o build tools.

Descargar
Uso local — ejemplo

  

    
Pasos para integrar un componente

    
    
      
  1. 
        1
        
    
          
    Cargá Tailwind, las fuentes y el CSS del kit
    
          
    Usa el snippet de CDN o los archivos locales descargados.
    
        
    
      
    2. 
      
  2. 
        2
        
    
          
    Abrí el componente en el catálogo
    
          
    Buscá el componente y entrá a su vista de detalle.
    
        
    
      
    3. 
      
  3. 
        3
        
    
          
    Copiá el HTML con un click
    
          
    Usá el botón Copiar código y pegalo donde lo necesitás.
    
        
    
      
    4. 
      
  4. 
        
          
        
        
    
          
    Listo
    
          
    El componente se renderiza con los tokens CCS sin pasos adicionales.
    
        
    
      
    5. 
    

  


  
  

    

    

      

        
¿Listo para construir?

        
Explorá los 25 componentes del catálogo.

      

      
        Ir al catálogo