Quick start

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.

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

npm install @canva/app-ui-kit
bash

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

  1. Import the following stylesheet:

    import "@canva/app-ui-kit/styles.css";
    tsx
  2. Import the AppUiProvider component:

    import { AppUiProvider } from "@canva/app-ui-kit";
    tsx

    This component provides theming and user preferences to App UI Kit components.

  3. Wrap the app in the AppUiProvider component:

    <AppUiProvider>
    <App />
    </AppUiProvider>
    tsx
  1. Import components from the @canva/app-ui-kit package:

    import { Button, Rows, Text, Title } from "@canva/app-ui-kit";
    tsx
  2. 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

Once you're up and running, either:

  • Check out the Storybook to explore the available components.
  • Play around with the components in your app.