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

Documentation components of Canvas Kit components

import Readme from '../../../README.md';
import Markdown from '../../../utils/storybook/Markdown.tsx';
import { WelcomePage } from './welcomePage';
import { InstallBlock } from './installBlock';
import { version } from '../../../lerna.json';


<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/system/_variables.css';

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