Palette Switcher

A segmented control that allows users to choose between different color palettes (neutral, slate, gray, zinc, stone).

Features

• Shows all five palette options at once
• Highlights the currently selected palette
• Persists the palette preference to localStorage under zen.palette
• Changes apply instantly via CSS custom properties

Available palettes

Programmatic usage

Use the useTheme hook to control the palette programmatically.

import { useTheme } from '@umami/react-zen';
 
function MyComponent() {
  const { palette, setPalette } = useTheme();
 
  return (
    <Button onPress={() => setPalette('slate')}>
      Current palette: {palette}
    </Button>
  );
}

With ZenProvider

Set the default palette for your application.

import { ZenProvider } from '@umami/react-zen';
 
function App() {
  return (
    <ZenProvider palette="slate">
      <YourApp />
    </ZenProvider>
  );
}

Component props