Skip to main content
@ekanos/ui components emit Tailwind class strings bound to Ekanos’s semantic tokens (bg-primary, text-muted-foreground, border-border, shadow-card, …). Something has to define those classes, and @ekanos/ui ships that CSS. Pick one of the two paths below — loading both gives you two copies of every utility. The UI styling page has the full detail.

​
Without Tailwind: the compiled stylesheet

Self-contained: Tailwind’s Preflight, the design tokens for light and dark, and every utility class the @ekanos/ui components emit, pre-compiled. It is not a copy of Tailwind — a class you write in your own markup (p-8, grid-cols-3) has no rule in it and does nothing. Preflight is a global reset, so it also normalizes margins, headings, and form controls across the page.

​
With Tailwind v4: the preset

This registers the token map, the token values for both themes, the base rules, the dark: variant, and an @source pointing at the package’s bundles, so your own class strings get the Ekanos tokens too. The pieces are also published separately as @ekanos/ui/tokens.css (custom properties only) and @ekanos/ui/base.css (base rules).

​
Semantic color tokens

Use semantic classes rather than hex/rgb/oklch values or raw Tailwind palette classes (bg-white, text-gray-500, bg-blue-500), so your UI follows the theme and dark mode:

​
Elevation shadows

On the Tailwind path, theme.css registers Ekanos’s elevation scale, which carries depth in place of borders:
On the compiled-stylesheet path, only the utilities the @ekanos/ui components themselves emit exist.

​
Dark mode

Tokens resolve in this order: The stylesheet does not repaint your page on its own. To adopt Ekanos’s page surface (so dark mode doesn’t leave dark cards on a white page), add the opt-in class:

​
Fonts

Ekanos pairs Figtree (body, --font-sans) with Bricolage Grotesque (headings, --font-heading). @ekanos/ui only names them, followed by a system fallback stack — no webfont is bundled or fetched. For typographic parity, load them yourself:

​
Icons

Icon from @ekanos/ui/icon renders Font Awesome markup, and @ekanos/ui ships no icon font — you must load Font Awesome yourself (Pro if you hold a licence, otherwise Free):
  • No Font Awesome loaded at all — the CSS draws a □ placeholder, so a missing icon font looks different from broken code.
  • Font Awesome loaded but the glyph is missing (for example a Pro-only name on Free) — the icon renders a question-mark fallback, and in development Icon warns once per missing name.
Font Awesome Free has no fa-light family. See Fonts and icons for forcing a family Free has, and how icons are sized.

​
Component library

Use @ekanos/ui components instead of building from scratch:
See UI components for the full list.

​
Next steps