Thèmes et styles

Guide d’intégration et référence API : Thèmes et styles.

Cette référence détaillée de l’API est maintenue en anglais et suit le code SDK lié. Les exemples avec des variables applicatives nécessitent votre signataire, vos clés, votre stockage ou votre interface.

Theming

Option A: CSS variables. The provider sets data-nui-root on its wrapper, so all theming attributes scope cleanly.

css

[data-nui-root] {
  --nui-bg: #fafafa;
  --nui-fg: #18181b;
  --nui-muted: #71717a;
  --nui-border: #e4e4e7;
  --nui-input-bg: #ffffff;

  --nui-primary: #6366f1;
  --nui-primary-fg: #ffffff;
  --nui-primary-hover: #4f46e5;

  /* Radius is split so cards and pill-style buttons can diverge.
     Both fall back to --nui-radius if you only set the legacy var. */
  --nui-radius: 10px;            /* legacy / fallback */
  --nui-card-radius: 10px;       /* modal, inputs, method tiles */
  --nui-btn-radius: 9999px;      /* primary action buttons */

  --nui-shadow: 0 8px 24px rgba(0,0,0,0.12);
  --nui-space: 12px;
  --nui-font: "Inter", system-ui, sans-serif;

  --nui-overlay-bg: rgba(15, 23, 42, 0.6);
  --nui-z-modal: 9999;
}

Force a theme:

tsx

<NostrSessionProvider theme="dark">{...}</NostrSessionProvider>
// or:  theme="light" | "system" | "la-crypta"

Built-in themes

`theme=`	What you get
`"system"` (default)	Light, with dark fallback via `prefers-color-scheme: dark`
`"light"`	Forced light palette regardless of system
`"dark"`	Forced dark palette
`"la-crypta"`	La Crypta palette — near-black background (`#0a0a0a`), lime-green primary (`#b4f953`), 12px card radius + fully pill-shaped buttons (`--nui-btn-radius: 9999px`), Inter font stack

Each theme is a [data-nui-root][data-nui-theme="..."] block in styles.css that overrides the variables above. To add your own, target the same selector in your stylesheet and re-define whichever variables you want.

Per-element overrides via the classes slot prop on every component:

tsx

<LoginWidget
  classes={{
    root: "my-card",
    title: "text-xl font-bold",
    method: "rounded-2xl shadow-md",
    input: "border-2 border-blue-500",
  }}
  styles={{
    root: { padding: 24 },
  }}
/>

Available slots:

type LoginWidgetSlot =
  | "root" | "title" | "subtitle"
  | "methods" | "method" | "methodIcon" | "methodText" | "methodLabel" | "methodHint"
  | "divider" | "input" | "inputRow"
  | "primaryButton" | "back" | "error" | "warning" | "keyDisplay";

type ModalSlot = "overlay" | "modal" | "close";
type LoginButtonSlot = "button" | "spinner";

<LoginModal> accepts both classes (forwarded to the widget) and modalClasses (the modal chrome itself).

Skip the default stylesheet

Don't import @nostr-wot/ui/styles.css. Components still render — they just have no default styles. Provide your own CSS targeting the .nui-* classes, or use the classes slots to swap in your design-system classes (Tailwind, shadcn, etc.).

Référence API

Référence API Migration des anciens paquets