rokuTheme

A custom Material-UI (MUI) theme for roku, including palette, elevations and component overrides. Easily integrate this design system into your MUI-based React projects.

Features

• Custom color palette
• Elevation presets
• Component variants and overrides for MUI Button, IconButton, Chip, etc.
• RTL support

Installation

npm install roku-theme

Or add to your package.json:

"dependencies": {
  "roku-theme": "^1.0.0"
}

Usage

1. Import and use the theme in your MUI ThemeProvider

import { ThemeProvider } from '@mui/material/styles';
import { theme } from 'roku-theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* your app components */}
    </ThemeProvider>
  );
}

2. Access palette and elevations directly

import { palette, elevations } from 'roku-theme';

3. Use custom variants in MUI components

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<IconButton variant="primary">...</IconButton>
<Chip variant="pillFilled" label="Filled" />
<Chip variant="pillOutline" label="Outline" />