Skip to main content

Build your website in seconds

A production-ready CSS class system, easy to adapt and perfect for building your own design or design system. Customize, extend, and maintain your style effortlessly.
Get StartedExamples
Button
Switch
Ready!
Your data has been synchronized
Alert
EVERYTHING YOU NEED, WITHOUT COMPLICATIONS

Designed to scale, made to customize

pucoui combines ready-to-use utilities, elements, and components. Customize with CSS variables or apply production-ready classes without losing control or speed.

Designed to adapt to you

Change the design without touching the classes, customize colors, sizes, typography, and spacing using CSS variables.
  • Space, variable to define spacings, used for margins, padding, etc
  • Color, Variable to define the color palette, uses primary, info, warning, etc
  • Font, Variable to define font characteristics, used for size, weight, etc
Get Started
: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;
}

Easy to use,

Access a wide collection of classes for typography, layouts, forms, buttons, interactive states, and more. Everything is designed to scale and adapt effortlessly to any project.
  • Helpers, Ready-to-use utilities that solve common layout, spacing, typography, and more.
  • Elements, Basic visual elements, ready to combine and customize with CSS classes.
  • Components, Set of more complex and consistent visual blocks, designed to speed up your development and maintain design consistency.
Get Started
Puco UI
Card Title

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