sitecore-design-system-theme v1.0.0-alpha.16

Sitecore Design System Theme

The latest Sitecore Design System uses vanilla Chakra-UI components with an extensive custom theme. We prefer to take a "guidance over governance" approach for the design system and will provide you a theming methodology that will standardize your project within our guidelines but won't slow down your development. We also maintain a library of custom Sitecore components that you can leverage (see SDS Component Library for the other pillar of the design system)

before you begin:

This theme was built using the Automatic Installation template provided by Chakra-UI. You may benefit from starting your new project from this step:

npx create-react-app my-app --template [template-name] npm i sitecore-design-system-theme

1. In order to generate the theme typings, manually install the @chakra-ui/cli:

npm i @chakra-ui/cli

2. Import the sitecoreTheme and use it in your <ChakraProvider>:

import sitecoreTheme from 'sitecore-design-system-theme';

<ChakraProvider theme={sitecoreTheme}>
    {...}
</ChakraProvider>

3. Manually add the theme-typings scripts to your package.json:

"gen:theme-typings": "chakra-cli tokens sitecore-design-system",
"postinstall": "npm run gen:theme-typings",

Looking for Sitecore-specific components?

Visit the component library for custom components ready for use in your app.

npm install sitecore-design-system-component-library

^^^ this is red because this package does not yet exist