Creating a user interface

How to create the user interface for an app.

To help apps look and feel as good as humanly possible, we've put together the App UI Kit — a React-based component library that contains the fundamental building blocks of delightful apps.

Getting started

The App UI Kit is available in the starter kit. To use the components, import them from the @canva/app-ui-kit package and use them like any other React component:

import React from "react";
import { Button } from "@canva/app-ui-kit";

export function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

For the styles to load properly, the app must:

Import @canva/app-ui-kit/styles.css.
Be wrapped in an AppUiProvider component.

The starter kit already handles these details for you via the src/index.tsx file.

Exploring the components

In the starter kit, we've included a Storybook project for exploring the available components. This is the best way to see and play with what's available.

To start the Storybook server:

Navigate into the starter kit's storybook directory:
```
cd canva-apps-sdk-starter-kit/storybook
```
Install the dependencies:
```
npm install
```
Run the following command:
```
npm run storybook
```

You'll be able to access Storybook via http://localhost:6060.

Using design tokens

A design token is a named entity that stores visual design attributes, such as colors and spacing.

The App UI Kit exposes a number of design tokens that apps can use to create custom components while still keeping the app consistent with Canva's design system.

The design tokens are exposed as JavaScript variables, which can be imported into the app:

import { tokens } from "@canva/app-ui-kit";
console.log(tokens.boxShadowHeavy);

...and as CSS variables, which can be used throughout the app:

.myCustomClass {
  box-shadow: var(--ui-kit-box-shadow-heavy);
}

All of the CSS variables are prefixed with --ui-kit-.

For the complete list of colors, see Colors.