CompositionAvailable

Theme Provider

Persistent light, dark and system themes for React, with an early initializer and cross-tab updates.

Loading theme…

The catalog supplies one ThemeProvider at its root.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/theme-provider.json

Usage

Import the component into your project and keep the source code under your control.

tsx

"use client";
import { useTheme } from "@/components/ui/theme-provider";
import { ThemeToggle } from "@/components/ui/theme-toggle";
export default function Demo() {
  const { ready, theme, resolvedTheme } = useTheme();
  return <div className="grid gap-4 rounded-lg border border-ink bg-card p-6 text-card-foreground">
    <p>{ready ? `${theme} → ${resolvedTheme}` : "Loading theme…"}</p>
    <ThemeToggle />
    <p className="text-sm text-muted-foreground">The catalog supplies one ThemeProvider at its root.</p>
  </div>;
}

States & interaction

Appearance, behavior and keyboard checks.

The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
storageKey	string	brutallab:theme	Storage namespace; match the head initializer.
defaultTheme	light \| dark \| system	system	Used without a valid saved preference.
useTheme()	theme, resolvedTheme, ready, setTheme	—	Access theme state under a single document-level provider.
getThemeInitScript(key, defaultTheme)	string	—	Import from lib/theme and insert in the document head before styles; allow it with your CSP nonce/hash.

Accessibility

Rules that should remain intact when adapting the component to a product.

Visible focus, accessible labels, selected-state announcement and system preference support. No theme animation.