Redpanda Provider

A single root provider that wires up theming, motion config, and the Sonner toaster for any consumer app.

Installation

When to use

Mount RedpandaProvider once near the root of your application. It bundles the three things every Redpanda UI consumer otherwise has to wire up by hand:

ThemeProvider — manages light/dark/system theme and persists the choice to localStorage.
MotionConfig with reducedMotion="user" — components animated with motion/react automatically respect the operating system's prefers-reduced-motion setting. Without this, animations play even for users who have requested reduced motion.
Toaster — the global Sonner surface so any component can call toast() from anywhere in the tree.

If you already have your own theme provider or toast system, see the composition section for how to opt out of individual layers.

Usage

Mount the provider once at the root of your app, above the RouterProvider:

src/App.tsx

import { RouterProvider } from "@tanstack/react-router";

import { RedpandaProvider } from "@/components/redpanda-ui/components/redpanda-provider";

import { router } from "./router";

export const App = () => (
  <RedpandaProvider>
    <RouterProvider router={router} />
  </RedpandaProvider>
);

API

Prop	Type	Default	Description
`defaultTheme`	`'light' \| 'dark' \| 'system'`	`'system'`	Theme to use when no preference is stored in `localStorage`.
`themeStorageKey`	`string`	`'redpanda-ui-theme'`	`localStorage` key under which the active theme is persisted.
`reducedMotion`	`'user' \| 'always' \| 'never'`	`'user'`	How motion components respond to `prefers-reduced-motion`. `'user'` honors the OS preference (recommended). `'always'` forces animations off — useful for visual regression tests. `'never'` disables the check entirely.
`toaster`	`false \| ToasterProps`	`{}`	Props forwarded to the Sonner `Toaster`. Pass `false` to opt out of rendering it (e.g. if your app already mounts its own toaster).

Composition

RedpandaProvider is a thin wrapper around three primitives. If you need finer control — for example, to swap the theme provider for next-themes or to mount the toaster in a custom location — compose them directly instead:

import { MotionConfig } from "motion/react";

import { Toaster } from "@/components/redpanda-ui/components/sonner";
import { ThemeProvider } from "@/components/redpanda-ui/components/theme-provider";

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider defaultTheme="system">
      <MotionConfig reducedMotion="user">
        {children}
        <Toaster />
      </MotionConfig>
    </ThemeProvider>
  );
}

Reduced motion

motion/react does not honor prefers-reduced-motion by default — its built-in default is 'never'. The reducedMotion="user" setting in this provider opts your app in to that accessibility preference, so animated registry components (Tabs, Auto Form, animated panels, etc.) collapse transform-based animations to instant transitions when the user has Reduce Motion enabled at the OS level. Opacity transitions are kept, which is WCAG-compliant.

Installation

When to use

Usage

API

Composition

Reduced motion

On this page