- What is Eluan?
- Eluan is a design system for React built on Radix UI, StyleX, and a three-layer token system. Everything ships in a single package, @eluan/core: 68 accessible components, the layout patterns (Header, Footer, Navigation), and the EluanProvider.
- How do I install it?
- Install the package and its token peer — npm install @eluan/core @eluan/tokens — then import @eluan/core/styles.css once at the root of your app and wrap the tree in EluanProvider. npm, pnpm, yarn and bun all work.
- How does theming work for more than one brand?
- minimal is the only built-in theme and the default. Your brand is a custom theme you build with createTheme: override only the tokens you care about and the rest are inherited. EluanProvider carries the base in data-theme and the overrides in data-theme-custom.
- Does Eluan have a dark mode?
- Three modes ship — light, dim and dark — and a mode is nothing but the data-mode attribute on the document. Swapping one is a single attribute change, with no JavaScript on the critical path.
- What are the three token layers?
- Primitives (20 color palettes, plus radius, sizing, spacing, viewport and font-size scales), modes (what the background, foreground and palette tokens resolve to), and themes (accent and font pairings). Components only ever read the top semantic layer.
- Do I need a CSS build step or a utility framework?
- No. Component styles are compiled with StyleX and pulled in automatically when you import a component, so there is no utility scanning to configure. Styling is closed: components do not accept className or style — you restyle them through tokens and themes.