Installation

@eluan/core

The one package you need. It includes every component, the layout patterns (Header, Footer, Navigation), the EluanProviderfor theming, and full TypeScript types. It re-exports the token helpers from @eluan/tokens, which you install alongside it as the token peer.

Import styles & fonts

Import the compiled stylesheet once at the root of your app, then load the theme's fonts. @eluan/core/styles.css already bundles every token layer, so a separate @eluan/tokens/css import is only needed if you use the tokens without the components. Component styles are compiled with StyleX, so there is no Tailwind configuration or utility scanning to set up.

Wrap with EluanProvider

Wrap your app once near the root. The provider sets the data-theme, data-mode, data-spacing, and data-curvesattributes on the document, lazy-loads the theme's fonts, and persists the user's selections to localStorage.

Read or update the active theme axes from anywhere in the tree using useEluanTheme():

@eluan/tokens

The design token package. Ships the three-layer CSS variable system, font CSS files, and TypeScript types. You install it alongside @eluan/core, but you rarely import from it directly — @eluan/core already re-exports the type helpers (themes, modes, type Theme, etc). Reach for it directly only for advanced customization or non-CSS contexts (server logic, tooling).

TypeScript

Eluan ships with full TypeScript definitions. No additional @types/* packages are needed.