Saltar al contenido principal

Construye tu web en segundos

Un sistema de clases CSS listo para producción, fácil de adaptar y perfecto para construir tu propio diseño o design system. Personaliza, extiende y mantén tu estilo sin esfuerzo.
EmpezarEjemplos
Button
Switch
¡Listo!
Tus datos han sido sincronizados
Alert
TODO LO QUE NECESITAS, SIN COMPLICACIONES

Diseñado para escalar, hecho para personalizar

pucoui combina utilidades, elementos y componentes listos para usar. Personaliza con variables CSS o aplica clases listas para producción sin perder control ni velocidad.

Diseñado para adaptarse a ti

Cambia el diseño sin tocar las clases, personaliza colores, tamaños, tipografía y espaciados usando variables CSS.
  • Space, variable para definir los espaciados, usados para los margin, padding, etc
  • Color, Variable para definir la paleta de colores, usa los colores primary, info, warning, etc
  • Font, Variable para definir las caracteristicas de la fuente, usados para el tamaño, weight, etc
Empezar
:root {
  --pui-space-0: 0rem;
  --pui-space-1: 0.25rem;
  --pui-space-2: 0.5rem;
  --pui-space-3: 0.75rem;
  --pui-space-4: 1rem;
  --pui-space-5: 1.5rem;
  --pui-space-6: 3rem;
  --pui-space-7: 4rem;
  --pui-space-8: 4.5rem;
  --pui-space-9: 5rem;
  --pui-space-10: 5.5rem;
  --pui-color-primary: #8760db;
  --pui-color-info: #66d1ff;
  --pui-color-success: #48c78e;
  --pui-color-warning: #ffb70f;
  --pui-color-error: #ff6685;
  --pui-color-white: #ffffff;
  --pui-ui-color-muted: #c8d7d2;
  --pui-ui-color-text-muted: #4a5565;
  --pui-ui-color-text-muted-2: #babdbf;
  --pui-ui-color-disabled: #f7f7f9;
  --pui-font-size-1: 3rem;
  --pui-font-size-2: 2.5rem;
  --pui-font-size-3: 2rem;
  --pui-font-size-4: 1.5rem;
  --pui-font-size-5: 1.25rem;
  --pui-font-size-6: 1rem;
  --pui-font-size-7: 0.75rem;
  --pui-font-weight-thin: 100;
  --pui-font-weight-extra-light: 200;
  --pui-font-weight-light: 300;
  --pui-font-weight-normal: 400;
  --pui-font-weight-medium: 500;
  --pui-font-weight-semi-bold: 600;
  --pui-font-weight-bold: 700;
  --pui-font-weight-extra-bold: 800;
  --pui-font-weight-black: 900;
}

Facil de usar

Accede a una amplia colección de clases para tipografía, layouts, formularios, botones, estados interactivos y más. Todo diseñado para escalar y adaptarse sin esfuerzo a cualquier proyecto.
  • Helpers, Utilidades listas para usar que resuelven problemas comunes de maquetado, espaciado, tipografía y más.
  • Elements, Elementos visuales básicos, listos para combinar y personalizar con clases CSS.
  • Components, Conjunto de bloques visuales más complejos y consistentes, diseñados para acelerar tu desarrollo y mantener la coherencia de diseño.
Empezar
Puco UI
Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis nostrum omnis laborum dolore accusamus.