Theming - EnterUI

Getting StartedUpdated May 3, 2026

EnterUI reads component-facing --eui-* variables. Those variables default to FroggDesign --fd-* variables from @froggdesign/theme.

#Theme Entry Points

@froggdesign/theme exports four CSS files:

@froggdesign/theme/styles.css
@froggdesign/theme/tokens.css
@froggdesign/theme/light.css
@froggdesign/theme/dark.css

Use styles.css for normal apps. It includes token variables plus light and dark semantic mappings.

#Light And Dark Mode

Use data-theme on a root element to choose the semantic theme.

export function AppShell({ children }: { children: React.ReactNode }) {
  return <html data-theme="dark">{children}</html>;
}

#Variable Layers

EnterUI uses two layers of CSS variables. Components read the upper layer; the lower layer carries the raw token values.

--fd-* from @froggdesign/theme — token source of truth (e.g. --fd-error: #dc143c). Light and dark mode each set their own values.
--eui-* from @froggdesign/enter-ui — component-facing aliases. By default --eui-error: var(--fd-error).

Two layers exist so you can rebrand EnterUI components without touching the wider FroggDesign tokens used by non-EnterUI surfaces.

#Customizing After Install

Once the packages are installed, every override is plain CSS — no fork or rebuild required.

#1. Scope-level (most common)

Redefine variables inside any selector. Components rendered inside it inherit the change.

.brand-form {
  --eui-error: #f97316;             /* invalid state goes orange */
  --eui-color-brand-green: #6366f1; /* focus ring goes indigo */
}

<form className="brand-form">
  <Input invalid /> {/* uses orange instead of crimson */}
</form>

#2. App-wide

Override on :root and on [data-theme="dark"] for dark-mode parity. Make sure your stylesheet imports after the EnterUI styles so cascade order picks your values.

@import "@froggdesign/theme/styles.css";
@import "@froggdesign/enter-ui/styles.css";

:root {
  --eui-color-brand-green: #6366f1;
  --eui-radius-md: 8px;
  --eui-error: #f97316;
}

[data-theme="dark"] {
  --eui-color-brand-green: #818cf8;
}

#3. Token-level (deepest)

Override the underlying --fd-* tokens when you want every consumer of the theme to change, not just EnterUI.

:root {
  --fd-error: #f97316;
  --fd-background: #fafaf9;
}

[data-theme="dark"] {
  --fd-error: #fb923c;
  --fd-background: #0c0a09;
}

#Custom theme from scratch

Skip @froggdesign/theme/styles.css entirely and define every --fd-* token yourself.

@import "@froggdesign/enter-ui/styles.css";

:root {
  --fd-background: #ffffff;
  --fd-foreground: #18181b;
  --fd-error: #ef4444;
  --fd-color-brand-green: #10b981;
  /* ...the rest of the --fd-* tokens */
}

#Important Tokens

EnterUI components commonly read these variables:

background and foreground
surface, card, muted, and border
primary and secondary actions
ring and focus-ring
success, warning, error, and info
radius, shadow, spacing, and typography

#Component-Level Overrides

Use className for local changes and wrapper components for repeated product patterns.

import { Button } from "@froggdesign/enter-ui";

export function HeroAction() {
  return <Button className="product-action">Get started</Button>;
}

Edit this page