\n \n | To learn more about developing apps on Canva, see: | \n \n \n ![\"Canva](\"https://img.shields.io/badge/Canva%20Dev-00C4CC?style=for-the-badge&logo=Canva&logoColor=fff\") \n \n | \n
\n \n | To browse all components in the App UI Kit, see: | \n \n \n ![\"Canva](\"https://img.shields.io/badge/Storybook-FE4785?style=for-the-badge&logo=storybook&logoColor=fff\") \n \n | \n
\n
\n\n**Note:** If you're planning on releasing a Canva App to the public, **we strongly recommend using the App UI Kit**, as we expect apps to meet certain design standards and it's difficult to do so without the components.\n\n## Features\n\n- Based on the components used by Canva's own engineers.\n- Built for accessibility, usability, and cross-platform compatibility.\n- Includes design tokens for creating custom components.\n\n## Installation\n\n```bash\nnpm install @canva/app-ui-kit\n```\n\n## Usage\n\n**Note:** If you're using [the starter kit](https://github.com/canva-sdks/canva-apps-sdk-starter-kit), these steps have already been done for you.\n\nAt the root of the application, such as in the `index.tsx` file:\n\n1. Import the stylesheet:\n\n ```tsx\n import '@canva/app-ui-kit/styles.css';\n ```\n\n2. Import the `AppUiProvider` component:\n\n ```tsx\n import { AppUiProvider } from '@canva/app-ui-kit';\n ```\n\n3. Wrap the app in the `AppUiProvider` component:\n\n ```tsx\n Hello world.
;\n}\n```\n\nThe variables are written in camel case, without a prefix.\n\n### List of design tokens\n\nYou can find the reference documentation for design tokens on the Canva Developers documentation site:\n\n- [Colors](https://www.canva.dev/docs/apps/app-ui-kit/colors/)\n- [Shadows](https://www.canva.dev/docs/apps/app-ui-kit/shadows/)\n- [Spacing](https://www.canva.dev/docs/apps/app-ui-kit/spacing/)\n- [Transitions](https://www.canva.dev/docs/apps/app-ui-kit/transitions/)\n- [Units](https://www.canva.dev/docs/apps/app-ui-kit/units/)\n\n## Changelog\n\nSee the `CHANGELOG.md` file or view it on our [documentation site](https://www.canva.dev/docs/apps/app-ui-kit/changelog/).\n\n## Contributing\n\nWe're actively developing this package but are not currently accepting third-party contributions. If you'd like to request any changes or additions to the package, submit a feature request via the [Canva Developers Community](https://community.canva.dev/).\n\n## License\n\nSee the `LICENSE.md` file.\n","readmeFilename":"README.md"}