@workday/canvas-kit-docs/dist/mdx/welcome.mdx

Documentation components of Canvas Kit components

import {version} from '../../../lerna.json';
import {InstallBlock} from './installBlock';
import {WelcomePage} from './welcomePage';


<WelcomePage />

### Canvas Provider

If you use Emotion for styling your components, the `<CanvasProvider>` ensures your styles will
merge as expected. Note: Custom use of `<CacheProvider>` provided by Emotion is not supported.
`@workday/canvas-kit-styling` owns the creating of the cache reference. This ensures both static
styling and Emotion’s dynamic styling solutions work together. In most cases you'll want to wrap
your application at the root level in `<CanvasProvider>`.

```tsx
import * as React from 'react';

import {CanvasProvider} from '@workday/canvas-kit-react/common';
// Ensure CSS variables are defined. You Can also do this at the root index.css
import '@workday/canvas-tokens-web/css/base/_variables.css';
import '@workday/canvas-tokens-web/css/brand/_variables.css';
import '@workday/canvas-tokens-web/css/component/_variables.css';
import '@workday/canvas-tokens-web/css/system/_variables.css';

export const App = () => {
  return (
    <CanvasProvider>
      <main>
        <p>Get Started With Canvas Kit</p>
      </main>
    </CanvasProvider>
  );
};
```