Skip to content

Commit d4fd402

Browse files
authored
docs: #548 - Add details about adding styles in the react project root (#549)
1 parent 2c221f0 commit d4fd402

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

docs/get-started.storybook.mdx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,25 @@ To bring the design system into your project, install it as a package:
2626
npm i @freenow/wave
2727
```
2828

29+
## Getting started
30+
31+
After installing Wave as dependency, there are some extra steps to get the styles in place:
32+
33+
- Make sure to install the peerDependencies (including styled-components)
34+
- Check that you don't have any pre-existing global styles that might override/clash with the styles shipped with the components (ex.: `a { color: #ffeeaa }`)
35+
- Make sure to add the desired Color Scheme component to your React tree, to get the CSS variables loaded ([more details](https://wave.free-now.com/iframe.html?viewMode=docs&id=migration-to-v2--docs#1%EF%B8%8F%E2%83%A3-connect-classic-colors))
36+
37+
```typescript jsx
38+
import { ModernColors } from '@freenow/wave'; // blue primary color
39+
40+
ReactDOM.createRoot(document.getElementById('root')!).render(
41+
<React.StrictMode>
42+
<ModernColors />
43+
<App />
44+
</React.StrictMode>
45+
);
46+
```
47+
2948
## Usage
3049

3150
All of our components are exported by name from `@freenow/wave`, so you can import them with:

0 commit comments

Comments
 (0)