Theming

Defaults use a monochrome palette inspired by the Next.js starter. Override CSS variables in your theme file, imported after the package styles. No JavaScript context is involved.

Available tokens

Prefix each token with --fui-: background, foreground, surface, muted, subtle, border, primary, primary-foreground, ring, radius, font, heading-1 through heading-6, danger, and success.

Add your own variants

Button and Toast accept custom variant names while keeping built-in TypeScript suggestions. CloseButton inherits Button’s variants. No registration or client provider is required: add a selector to your theme file, then use the name.

/* app/theme.css */
@layer components {
  .fui-button[data-variant="danger"] {
    background: var(--fui-danger);
    color: #fff;
  }
  .fui-toast[data-variant="brand"] {
    --fui-toast-background: #312e81;
    --fui-toast-foreground: #fff;
    --fui-toast-border: #6366f1;
  }
}

<Button variant="danger">Delete</Button>
<Toast variant="brand" open={open} onOpenChange={setOpen} title="Welcome" />

Custom variants inherit base styles until you supply their CSS. Define suitable foreground/background pairs for each color scheme. Custom toast variants use polite status announcements; the built-in error variant uses an alert.

Dark mode and scoped themes

The defaults follow the system color scheme. Set data-theme="light" on the html element to force light defaults. Define your own dark palette using a class or data attribute. Custom token overrides also apply in system dark mode; set foreground and background pairs together.

You can scope tokens to any wrapper, as in the preview above. Use --fui-font to connect your application’s font.

Tailwind or your own CSS

The Tailwind v4 bridge exposes utilities including bg-primary, text-muted, and rounded-ui. Components use the components cascade layer so utilities can override defaults. Plain CSS and CSS Modules work through the native className and style props.