@redis-ui/components

The Redis UI component library — a themed, accessible React component library built on styled-components and Radix UI.

Installation

Install the components package and its required peer dependencies:

npm install @redis-ui/components @redis-ui/styles @redis-ui/icons styled-components

Setup

1. Import global styles

Import the normalized styles and fonts from @redis-ui/styles in your app entry point:

import '@redis-ui/styles/normalized-styles.css';
import '@redis-ui/styles/fonts.css';

2. Provide the theme and render global styles

Components read all design tokens (colors, spacing, typography, etc.) from a styled-components ThemeProvider. You must wrap your application in one — without it, components will not render correctly.

You also need to render the CommonStyles global style component inside the theme provider. It applies theme-aware base styles to the body, scrollbars, and reduced-motion preferences.

import { ThemeProvider } from 'styled-components';
import { themesRebrand, CommonStyles } from '@redis-ui/styles';

function App() {
  return (
    <ThemeProvider theme={themesRebrand.light}>
      <CommonStyles />
      {/* your app */}
    </ThemeProvider>
  );
}

Dark mode support

For automatic light/dark mode switching with persistence, use the SwitchableModeThemeProvider:

import { SwitchableModeThemeProvider, themesRebrand, CommonStyles } from '@redis-ui/styles';

function App() {
  return (
    <SwitchableModeThemeProvider
      lightTheme={themesRebrand.light}
      darkTheme={themesRebrand.dark}
      storageKey="redis-ui-theme-mode"
    >
      <CommonStyles />
      {/* your app */}
    </SwitchableModeThemeProvider>
  );
}

3. Use components

import { Button } from '@redis-ui/components';

function MyPage() {
  return (
    <div>
      <Button variant="primary" size="medium">
        Click me
      </Button>
    </div>
  );
}