Theme package.

Usage no npm install needed!

<script type="module">
  import sfxUiTheme from 'https://cdn.skypack.dev/@sfx-ui/theme';



Theme package.


npm i @sfx-ui/core # styled-components react react-dom
yarn add @sfx-ui/core # styled-components react react-dom

Make sure to have react, react-dom and styled-components installed in your package as they are included in our peer dependencies.


Along with <ThemeProvider /> component, which has to be wrapper around you application, we export hook – useTheme.

  <App />

Then, use all the features of our theme inside any part of your React application:


const Button = styled.button(
  ({ theme }) => css`
    color: ${theme.palette['accent-strong']};


Out of the box we provide no default fonts.

To connect the fonts defined as default in our design system you have an option to create your own @font-face rules.

To override predefined font-family you can pass them into the theme prop of the ThemeProvider component:

    typography: {
      fontFamily: 'Roboto, sans-serif'