Skip to content
Camaleo
EN · PTGitHub

Change one word. Wear a new skin.

Thirteen complete design languages behind a single prop. Your markup never changes — the skin does, and it stays legible in every one.

Get startedBrowse the 13 skins

WCAG 2.2 AA in every skin · Server Components ready · No Tailwind required

import "@camaleo/styles/glass.css";

<StyleProvider styleName="glass">
  <Dashboard />
</StyleProvider>
+7 more

now wearing glass · ·

// 13 skins

Every skin is a whole design language.

Not a color swap. Radius, depth, type, borders, motion and the shape of every state change together. Wear one — the dashboard above changes too.

Typographic · Platform · Soft depth · Bold — four families, thirteen skins.

// brand="any color"

Bring your color. We keep it legible.

Most libraries paint your hex behind white text and hope. Camaleo keeps your hue, grows an 11-step scale at fixed lightness and puts buttons on the step that passes, with black or white text, whichever reads better. Yellow, cyan and grey pass too, as a deeper shade of themselves.

Pick a brand color
// usual: your hex, white text
1.53:1AA fail
1 colorno hover, tint or text step

White on #facc15 is hard to read. Most libraries ship it anyway and leave the fix to you.

// camaleo: step 600 of your scale
5.04:1AA pass
50600 · buttons950

Your hue at the lightness of step 600, so a light color turns deeper; the text is black or white, whichever has more contrast. Hover, tints and on-color text come from the same scale.

  • Neubrutalism
    Live
  • Glass
    Live
  • Retro
    Live

// accessibility is the contract

Flip a preference. It still holds.

Every component runs in every skin, light and dark, against five deliberately hard brand colors — 130 combinations in the test suite. One failure and it does not ship.

Notifications

Syncing inbox
x

As designed — the skin exactly as it was approved.

$ pnpm test
  13 skins × 2 modes × 5 brands = 130
✓ glass        dark   muted       8.62
✓ neumorphism  light  on-accent   4.85
✓ y2k          dark   focus       9.33
✓ retro-pixel  light  accent-text 6.63
✓ clay         dark   border      4.78
✓ editorial    light  muted       6.41
  … 254 more measured pairs

one square per skin × mode × color pair, worst of 5 brands · brighter = more headroom

2,447 tests passed0 failedaxe + real pixels
Read the accessibility report →

// inventory

78 components, ready to skin.

Built on Base UI and React Aria. Every one renders on the server, exposes stable data-slot hooks and reads its look from tokens.

Skip the component list

Actions3

Forms9

Advanced forms7

Dates6

Feedback6

Display8

Data display10

Overlays8

Navigation9

Layout and app12

// for developers

Three steps. No build plugin.

Plain scoped CSS and React components. Works with the Next.js App Router, Vite and anything that renders React 19.

  1. Install

    Two packages: the components and the styles.

    $ npm i @camaleo/react @camaleo/styles

  2. Import a skin

    The base once, then only the skins you ship. minimal needs no file.

    import "@camaleo/styles/base.css";
import "@camaleo/styles/glass.css";

  3. Wrap and ship

    Pick the skin, mode and brand at the root — or per island.

    <StyleProvider
  styleName="glass"
  brand="#3fa34d">
  • Server ComponentsSkin the whole page from a Server Component; system dark mode needs no script.
  • No Tailwind requiredPlain CSS in cascade layers. Already on Tailwind v4? A few lines make them work together.
  • Tree-shakeableOne entry per component, so you only ship what you import.
  • Your own skinOverride tokens, scope a few rules, or write a fourteenth skin from scratch.

// examples

Whole screens, any skin.

Copy a complete screen and it arrives in the skin you chose above — currently glass.

All 9 examples →

// styleName="yours"

Pick a skin. Ship today.

Read the docs