Theme Provider

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download theme-provider -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { ThemeProvider, useTheme } from "@/components/ui/theme-provider";
import { Button } from "@/components/ui/button";
import * as React from "react";
function ThemeStatus() {
  const { theme } = useTheme();
  return (
    <div className="space-y-4 rounded-lg border p-6">
      <p role="status">Provider theme: {theme}</p>
      <Button>Theme example</Button>
    </div>
  );
}
function ThemePlayground({
  defaultTheme = "system",
}: {
  defaultTheme?: "light" | "dark" | "system";
}) {
  const [storageKey] = React.useState(
    () => `theme-example-${crypto.randomUUID()}`,
  );
  return (
    <ThemeProvider
      key={defaultTheme}
      defaultTheme={defaultTheme}
      storageKey={storageKey}
    >
      <ThemeStatus />
    </ThemeProvider>
  );
}
<ThemePlayground defaultTheme="system" />;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.