FAQ
Short answers to the questions people ask before and after installing Camaleo.
// you'll learn
- What it costs: JavaScript, CSS and fonts
- Where it runs: server rendering, Tailwind, mixed skins and browsers
- The licence, the trademarks and how to report a bug
Does it tree-shake? How big is it?
The JavaScript does. @camaleo/react is ESM only, marked "sideEffects": false, and built one file per component, so a bundler keeps only what you import. Each component also has its own entry point (@camaleo/react/button) if you prefer explicit imports.
The CSS is split by skin, not by component. base.css holds the tokens and the structure of every component: about 28 kB gzipped, before minification. Each skin adds one file, between about 3 kB (neumorphism, retro-pixel) and 11 kB (material) gzipped. Skins you don't import cost nothing.
Which skins need web fonts?
None of them bundle fonts, and every font stack ends in a system font, so nothing breaks without them. To look as designed, load each skin's families: the table of fonts per skin, and how to load them with next/font, are in Skins & switching.
Does it work with Server Components and SSR?
Yes. Layout and display pieces are Server Components, the skin is set on <html> by a plain function, and dark mode needs no script. See Server Components and SSR.
Can I mix skins on one page?
Yes, that is what StyleProvider is for. Each provider renders a <div data-style> and is an island: it starts from the defaults instead of inheriting its parent's look, and its popups keep its skin. Import the CSS of every skin you use. The brand color does flow into nested islands unless they set their own.
<StyleProvider styleName="editorial">
<Article />
<StyleProvider styleName="retro">
<Guestbook />
</StyleProvider>
</StyleProvider>
Do I need Tailwind?
No. The skins are plain CSS in cascade layers and work in any React app. If you already use Tailwind CSS v4, see Tailwind CSS for the layer order and the token mapping.
Which browsers are supported?
The CSS uses a few recent features. These are the versions where each one shipped:
| Feature | Used for | Chrome / Edge | Safari | Firefox |
|---|---|---|---|---|
light-dark() | Every color, both modes | 123 | 17.5 | 120 |
@scope | Each skin's structural rules | 118 | 17.4 | 146 |
Relative colors (oklch(from …)) | Glass backdrop tinted by the brand | 119 | 18 | 128 |
@property | Stack and Grid values that don't inherit | 85 | 16.4 | 128 |
corner-shape | Squircle corners in cupertino | 139 | — | — |
backdrop-filter | Glass in glass and cupertino | 76 | 18 | 103 |
light-dark() is the hard floor: without it, colors don't resolve. Without @scope, a skin keeps its tokens but loses its structural rules and looks half applied. corner-shape and backdrop-filter degrade on their own: corners stay round, and glass turns opaque through an @supports fallback.
Can I use it in a commercial project?
Yes. Camaleo is open source under the MIT licence: use it, change it and ship it, keeping the copyright notice.
Is it affiliated with Google or Apple?
No. material is inspired by Material Design and cupertino by Apple's Human Interface Guidelines. Camaleo isn't affiliated with or endorsed by Google or Apple, and uses none of their fonts, icons or trademarks (cupertino uses Inter, not SF Pro).
How do I report a bug?
Open an issue on GitHub. It helps a lot to include:
- the component, the skin, the mode (light or dark) and the brand color;
- your browser and its version, and React and Next.js versions if they matter;
- the smallest code that shows the problem, or the docs example that already does;
- for accessibility bugs, the assistive technology (screen reader, zoom, high contrast) and what you expected to hear or see.