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';

<Meta
  title="Welcome"
  parameters={{
    viewMode: 'docs',
    previewTabs: {
      canvas: {hidden: true},
    },
  }}
/>

<WelcomePage />

After installing Canvas Kit, you need to set up the CanvasProvider at the root of your application.
This can be either in your `index.jsx`,`index.tsx` or `App.jsx` depending on the framework you use.
This ensures proper styling, theming, and focus behavior on our components.

```tsx
import * as React from 'react';
// 1. import `CanvasProvider` component
import {CanvasProvider} from '@workday/canvas-kit-react';
function App() {
  // 2. Wrap CanvasProvider at the root of your app
  return (
    <CanvasProvider>
      <YourApp />
    </CanvasProvider>
  );
}
```