Quickstart

Provide the theme#

Put <ThemeProvider> around your application. Every component in the library reads its styling from this provider, so it needs to sit above anything you render from @getsoren/design-system.

import { Button, ThemeProvider } from "@getsoren/design-system";
 
const App = () => (
  <ThemeProvider>
    <Button>Text</Button>
  </ThemeProvider>
);
 
export default App;

That's the whole setup: import ThemeProvider and your component from the same package, wrap once, and render.

Using your own theme#

ThemeProvider accepts a theme prop, so you can hand it your own custom theme instead of the default:

<ThemeProvider theme={YOUR_CUSTOM_THEME}>
  <Button>Text</Button>
</ThemeProvider>

For what a custom theme can override, see theming.

What's next#

• Theming — go deeper on the theme prop.
• Colors package — pull in Material Design color tokens directly.

← Back: Installation · Next: Theming →