Quickstart

Get up and running with the App UI Kit.

The App UI Kit is a React-based component library for Canva apps. If you're using the starter kit, the App UI Kit is already set up for you. If you're not using the starter kit, this guide will help you get started.

Step 1: Install the App UI Kit

In the project's directory, run the following command:

npm install @canva/app-ui-kit

BASH

Step 2: Set up the `AppUiProvider`

At the root of the application, such as in a project's index.tsx file:

Import the following stylesheet:
```
import "@canva/app-ui-kit/styles.css";
```
TSX
Import the AppUiProvider component:
```
import { AppUiProvider } from "@canva/app-ui-kit";
```
TSX
This component provides theming and user preferences to App UI Kit components.
Wrap the app in the AppUiProvider component:
```
<AppUiProvider>
  <App />
</AppUiProvider>
```
TSX
You should only use the AppUiProvider component once in an app's component tree.

Step 3: Start using the components

Import components from the @canva/app-ui-kit package:

import { Button, Rows, Text, Title } from "@canva/app-ui-kit";

TSX

Use them as you would any other React component:

export function App() {
  return (
    <Rows spacing="2u">
      <Rows spacing="1u">
        <Title>Hello world</Title>
        <Text>This is a paragraph of text.</Text>
      </Rows>
      <Button variant="primary">Click me</Button>
    </Rows>
  );
}

TSX

For your app to be theme-responsive, App UI Kit components and any custom components must be wrapped in AppUiProvider.

Next steps

Once you're up and running, either:

Check out the Storybook⁠(opens in a new tab or window) to explore the available components.
Play around with the components in your app.

Quickstart

Step 1: Install the App UI Kit

Step 2: Set up the AppUiProvider

Step 3: Start using the components

Next steps

Step 2: Set up the `AppUiProvider`