Introduction

Calaca UI is a skeleton for interfaces. Every product dresses it in its own skin.

One skeleton, many skins

A calaca is a skeleton. In Calaca UI, the skeleton is the core: the structure, behavior and accessibility of every component. A skin dresses that core so it fits your product: shape, density, type, color and motion.

The core never changes between products. A button is focusable, keeps a visible focus ring, has a touch target of at least 44 pixels and handles its disabled state the same way everywhere. Only its clothes change.

Plain classes, any stack

Calaca UI is a set of CSS classes built with Tailwind CSS. You use them in plain HTML, Astro, Next.js or any other stack:

<button class="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>

Class names follow one pattern:

• ca-button names a component.
• ca-card__title names a part of a component.
• ca-button--primary names a modifier: a variant, a size or a layout.

Tailwind utilities still work next to them for one-off changes, and they win: ca-button ca-button--md mt-4 adds a margin without touching the component.

Native first

Where the browser already knows how to behave, Calaca uses it. A dialog is a real <dialog>, opened with standard commandfor attributes. One small script, ca-commands.js, adds those attributes to older browsers; you can drop it once every browser you support has them.

Tested for accessibility

Every component is tested with axe for WCAG 2.2 AA in light and dark, with the keyboard, in right-to-left layouts and with forced colors.