React-based component library for creating Canva Apps that mimic the look and feel of Canva.

• Introduction
• Features
• Installation
• Usage
• Components
• Icons
  • List of icons
• Design tokens
  • CSS variables
  • JavaScript variables
  • List of design tokens
• Changelog
• Contributing
• License

The App UI Kit is a React-based component library for designing and developing Canva Apps that mimic the look and feel of Canva. To learn more about developing apps on Canva, see the official documentation.

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.

• Based on the components used by Canva's own engineers.
• Built for accessibility, usability, and cross-platform compatibility.
• Includes design tokens for creating custom components.

npm install @canva/app-ui-kit

Note: If you're using the starter kit, these steps have already been done for you.

At the root of the application, such as in the index.tsx file:

1. Import the stylesheet:

   import '@canva/app-ui-kit/styles.css';

2. Import the AppUiProvider component:

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

3. Wrap the app in the AppUiProvider component:

   <AppUiProvider>
     <App />
   </AppUiProvider>

   This component should only be used once in an app's component tree.

After completing these steps, import and use components from the @canva/app-ui-kit package:

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

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>
  );
}

The components must exist as descendants of the AppUiProvider component.

The App UI Kit exports the following components:

• Alert
• AppUiProvider
• AudioCard
• AudioContextProvider
• Avatar
• AvatarGroup
• AvatarPlaceholder
• Badge
• Box
• Button
• Carousel
• CharacterCountDecorator
• Checkbox
• CheckboxGroup
• ClearDecorator
• ColorSelector
• Column
• Columns
• EmbedCard
• FileInput
• FileInputItem
• FormField
• Grid
• ImageCard
• Link
• LoadingIndicator
• Masonry
• MultilineInput
• NumberInput
• Placeholder
• Pill
• ProgressBar
• RadioGroup
• Rows
• SegmentedControl
• Select
• Slider
• Swatch
• Switch
• Text
• TextInput
• TextPlaceholder
• Title
• TitlePlaceholder
• TypographyCard
• VideoCard
• WordCountDecorator

To learn how to use these components, see the Storybook instance.

The App UI Kit exports a number of icons as React components.

The following code sample demonstrates how to use an icon:

import { EyedropperIcon } from '@canva/app-ui-kit';

export function App() {
  return (
    <div>
      <EyeDropperIcon />
    </div>
  );
}

To view the complete list of icons, expand the following section:

A design token is a variable used to store design-related values such as colors. They act as a single source of truth for design properties, making it easier to keep UIs consistent and maintainable.

The App UI Kit exposes design tokens as JavaScript and CSS variables. Apps can use these tokens to create or customize components that match the look and feel of Canva. If Canva changes the token's values, those changes are automatically reflected in the app.

You can use the CSS variables in global stylesheets, CSS modules, or the app's source code:

.button {
  background-color: var(--ui-kit-color-primary);
}

The variables are written in kebab case and are prefixed with --ui-kit-.

You can use the JavaScript variables in the app's source code:

import { tokens } from '@canva/app-ui-kit';

function App() {
  return <div style={{ backgroundColor: tokens.colorPrimary }}>Hello world.</div>;
}

The variables are written in camel case, without a prefix.

To view the complete list of available design tokens, expand the following section:

See the CHANGELOG.md file or view it on our documentation site.

We'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.

See the LICENSE.md file.