New project
DraftGive it a name now. You can invite your team later.
Everyone you invite sees this name.
One skeleton, many skins.
Accessible Tailwind CSS components that wear your brand
Stop rebuilding the same dialog for every product. The core handles keyboard, focus and touch; a skin gives each product its own look. Plain classes for HTML, Astro, Next.js and React.
<button class="ca-button ca-button--primary ca-button--md">
Components
48
Each with a live page
Blocks
6
Page sections with layouts
Skins
4
Plus the bare skeleton
Size
15 KB
Every component in one skin, gzipped
Dependencies
1
Tailwind CSS, nothing else
01 Why Calaca
A button should not need rebuilding to wear another brand
Calaca started because our own products kept rebuilding the same components, each a little different, each checked again for accessibility. So we split them: one skeleton that stays the same, and a skin for every product.
Without one skeleton
- Three products, three dialogs: one closes on Escape, one keeps focus inside, one does neither.
- Each copy drifts a little further from the last one.
- Accessibility gets checked again for every brand, or not at all.
With Calaca UI
- One skeleton under all your products, each in its own skin.
- Keyboard, focus and touch live in the core, so a new look cannot break them.
- New screens come from tested parts, in the stack each product already uses.
02 The idea
Same markup. Four looks.
Every card below is the same HTML. The core gives it structure, behavior and accessibility; each skin dresses it. Your product gets its own skin, and the markup never changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
New project
DraftGive it a name now. You can invite your team later.
Everyone you invite sees this name.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
New project
DraftGive it a name now. You can invite your team later.
Everyone you invite sees this name.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
New project
DraftGive it a name now. You can invite your team later.
Everyone you invite sees this name.
The markup, for all four
<article class="ca-card w-full max-w-sm">
<div class="flex items-start justify-between gap-3">
<h3 class="ca-card__title">New project</h3>
<span class="ca-badge ca-badge--primary">Draft</span>
</div>
<p class="ca-card__description">Give it a name now. You can invite your team later.</p>
<div class="ca-field">
<label class="ca-field__label" for="project-name">Project name</label>
<input class="ca-input ca-input--md" id="project-name" name="project" type="text" autocomplete="off" aria-describedby="project-name-hint" />
<p class="ca-field__hint" id="project-name-hint">Everyone you invite sees this name.</p>
</div>
<div class="ca-card__footer">
<button class="ca-button ca-button--primary ca-button--md" type="button">Create project</button>
<button class="ca-button ca-button--ghost ca-button--md" type="button">Cancel</button>
</div>
</article>03 How it compares
Classes you keep, a look you choose
| Calaca UI | daisyUI | shadcn/ui | Tailwind Plus | |
|---|---|---|---|---|
| What you get | CSS classes and a few small scripts | CSS classes (a Tailwind plugin) | React components you copy into your project | Paid snippets you copy (HTML, React, Vue) |
| Works in | Any HTML: plain pages, Astro, Next.js, React | Any HTML | React | HTML, React, Vue |
| Change the look | A skin: color, shape, size, type and motion | Themes: colors and a few shape settings | Edit the copied components | Edit the copied snippets |
| Updates | Update the package; your markup stays | Update the package | Copied code is yours to maintain | Copied code is yours to maintain |
04 What you get
Everything a product interface needs, nothing it does not
Tailwind CSS is the only dependency. You keep your markup, your framework and your brand.
Components for every screen
48 components for forms, overlays, navigation, feedback and data, each with a page, live examples and guidance.
Browse the componentsBlocks for whole pages
6 page sections, such as a hero, an FAQ and a footer, each with layouts you switch with one class.
Browse the blocksPlain classes, any stack
Class names in plain HTML, Astro, Next.js or React. No components to import, no runtime.
Install Calaca UINative first
A dialog is a real <dialog> and a menu a real popover. Where a script is needed, it stays under 1.5 KB gzipped.
Read about browser supportAccessibility in the core
Focus rings, touch targets and disabled states are part of the core, so no skin can take them away.
Read the accessibility guideYour brand, your skin
Change a few color tokens, or write a skin in TypeScript and build it to CSS. The markup stays the same.
Write your own skin
05 Get started
Dress the core for your product
Add Calaca to a page or a Tailwind build.
Pick a skin, or keep the neutral base.
Write your own skin when your product needs its own shape.
Is Calaca UI a React component library?
No. Calaca UI is a set of CSS classes built with Tailwind CSS. You write the HTML in plain HTML, Astro, Next.js or React and add the classes. A few components load a small script for their behavior.
Do I need a build step?
No. In plain HTML you link one prebuilt stylesheet. In a project that already builds Tailwind CSS 4, you import the core and a skin, and only the classes you use end up in your CSS.
How accessible is it?
Focus rings, touch targets and disabled states live in the core. Every page of this site is checked with axe against WCAG 2.2 AA, in light and dark, in Chromium, Firefox and WebKit.
Can it match our brand?
Yes. Change the color tokens for a quick match, or write a skin: a TypeScript file that maps each class to Tailwind utilities, built to CSS with the calaca command.
Which browsers does it support?
The current and previous versions of Chrome, Edge, Firefox and Safari. Newer browser features come with a small polyfill or a fallback.
Can I install it from npm?
Not yet. It will be published as @calaca/ui. Until then, the installation guide shows the steps the test projects use.
Write the markup once. Give every product its own look.
Link one stylesheet of 15 KB, less than half the font on this page, add the classes, and switch skins without touching the markup.