Eluan

Getting Started

Eluan is a design system for React built on Radix UI, StyleX, and a three-layer token system. It provides 60+ accessible components, built-in themes, and first-class custom theme support.

Introduction

Everything ships in a single package — @eluan/core. It includes the UI primitives, layout patterns (Header, Footer, Navigation), the EluanProvider, and re-exports the token type helpers from @eluan/tokens. Component styles are compiled with StyleX and pulled in automatically when you import a component.

All components follow the same conventions: they use React.forwardRef, expose a compound component API where appropriate, and read every color and spacing value from the CSS-variable token system. Styling is closed — components don't accept className or style; you restyle them through tokens and themes instead.

Quick Start

Install the package and its token peer:

Import the stylesheets once, then wrap your app with EluanProvider. The provider writes the theme attributes onto <html>, lazy-loads the theme's fonts, and persists the user's selections to localStorage.

app/layout.tsx

Basic Usage

Import components directly from the package:

Theming

Use useEluanTheme() from inside the provider to read or change the active theme axes. Spacing scales (compact / standard / wide) and curve scales (sharp / slight / sweeping) are independent of the theme and mode, so users can adjust density and roundness without losing the current theme.

minimal is the only built-in theme; setTheme also accepts the name of any custom theme registered on the provider.

Build your own theme on top of the built-in one with createTheme — override only the tokens you care about and the rest are inherited. (@eluan/theme-generator can produce the whole token set from a couple of brand colors.)

Next Steps