@canva/app-ui-kit

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

Table of contents

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

Introduction

The App UI Kit is a React-based component library for designing and developing Canva Apps that mimic the look and feel of Canva.

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.

Features

• 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.

Installation

npm install @canva/app-ui-kit

Usage

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.

Components and Icons

The App UI Kit exports a number of Components (e.g. Button, Text, Rows, etc. ) and Icons (e.g. PlusIcon, SearchIcon, etc.) to use in your apps.

For the complete list and documentation on all components and icons see our Storybook instance:

Design tokens

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.

CSS variables

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

JavaScript variables

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.

List of design tokens

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

Colors

Primary

| CSS | JavaScript | | -------------------------------------- | -------------------------- | | --ui-kit-color-primary | colorPrimary | | --ui-kit-color-primary-hover | colorPrimaryHover | | --ui-kit-color-primary-active | colorPrimaryActive | | --ui-kit-color-primary-disabled | colorPrimaryDisabled | | --ui-kit-color-primary-fore | colorPrimaryFore | | --ui-kit-color-primary-fore-disabled | colorPrimaryForeDisabled |

Secondary

| CSS | JavaScript | | ---------------------------------------- | ---------------------------- | | --ui-kit-color-secondary | colorSecondary | | --ui-kit-color-secondary-hover | colorSecondaryHover | | --ui-kit-color-secondary-active | colorSecondaryActive | | --ui-kit-color-secondary-disabled | colorSecondaryDisabled | | --ui-kit-color-secondary-fore | colorSecondaryFore | | --ui-kit-color-secondary-fore-disabled | colorSecondaryForeDisabled |

Tertiary

| CSS | JavaScript | | --------------------------------------- | --------------------------- | | --ui-kit-color-tertiary | colorTertiary | | --ui-kit-color-tertiary-hover | colorTertiaryHover | | --ui-kit-color-tertiary-active | colorTertiaryActive | | --ui-kit-color-tertiary-disabled | colorTertiaryDisabled | | --ui-kit-color-tertiary-fore | colorTertiaryFore | | --ui-kit-color-tertiary-fore-disabled | colorTertiaryForeDisabled |

Contrast

| CSS | JavaScript | | --------------------------------------- | --------------------------- | | --ui-kit-color-contrast | colorContrast | | --ui-kit-color-contrast-hover | colorContrastHover | | --ui-kit-color-contrast-active | colorContrastActive | | --ui-kit-color-contrast-disabled | colorContrastDisabled | | --ui-kit-color-contrast-fore | colorContrastFore | | --ui-kit-color-contrast-fore-disabled | colorContrastForeDisabled |

Neutral

| CSS | JavaScript | | --------------------------------- | ---------------------- | | --ui-kit-color-neutral | colorNeutral | | --ui-kit-color-neutral-hover | colorNeutralHover | | --ui-kit-color-neutral-active | colorNeutralActive | | --ui-kit-color-neutral-disabled | colorNeutralDisabled | | --ui-kit-color-neutral-low | colorNeutralLow | | --ui-kit-color-neutral-fore | colorNeutralFore |

Positive

| CSS | JavaScript | | --------------------------------------- | --------------------------- | | --ui-kit-color-positive | colorPositive | | --ui-kit-color-positive-hover | colorPositiveHover | | --ui-kit-color-positive-active | colorPositiveActive | | --ui-kit-color-positive-disabled | colorPositiveDisabled | | --ui-kit-color-positive-low | colorPositiveLow | | --ui-kit-color-positive-fore | colorPositiveFore | | --ui-kit-color-positive-fore-disabled | colorPositiveForeDisabled | | --ui-kit-color-positive-fore-low | colorPositiveForeLow |

Info

| CSS | JavaScript | | ----------------------------------- | ----------------------- | | --ui-kit-color-info | colorInfo | | --ui-kit-color-info-hover | colorInfoHover | | --ui-kit-color-info-active | colorInfoActive | | --ui-kit-color-info-disabled | colorInfoDisabled | | --ui-kit-color-info-low | colorInfoLow | | --ui-kit-color-info-fore | colorInfoFore | | --ui-kit-color-info-fore-low | colorInfoForeLow | | --ui-kit-color-info-fore-disabled | colorInfoForeDisabled |

Warn

| CSS | JavaScript | | ----------------------------------- | ----------------------- | | --ui-kit-color-warn | colorWarn | | --ui-kit-color-warn-hover | colorWarnHover | | --ui-kit-color-warn-active | colorWarnActive | | --ui-kit-color-warn-disabled | colorWarnDisabled | | --ui-kit-color-warn-low | colorWarnLow | | --ui-kit-color-warn-fore | colorWarnFore | | --ui-kit-color-warn-fore-low | colorWarnForeLow | | --ui-kit-color-warn-fore-disabled | colorWarnForeDisabled |

Critical

| CSS | JavaScript | | --------------------------------------- | --------------------------- | | --ui-kit-color-critical | colorCritical | | --ui-kit-color-critical-hover | colorCriticalHover | | --ui-kit-color-critical-active | colorCriticalActive | | --ui-kit-color-critical-disabled | colorCriticalDisabled | | --ui-kit-color-critical-low | colorCriticalLow | | --ui-kit-color-critical-fore | colorCriticalFore | | --ui-kit-color-critical-fore-low | colorCriticalForeLow | | --ui-kit-color-critical-fore-disabled | colorCriticalForeDisabled |

Background

| CSS | JavaScript | | ------------------------ | -------------- | | --ui-kit-color-canvas | colorCanvas | | --ui-kit-color-tabdock | colorTabdock | | --ui-kit-color-page | colorPage | | --ui-kit-color-surface | colorSurface |

Border

| CSS | JavaScript | | -------------------------------- | --------------------- | | --ui-kit-color-border | colorBorder | | --ui-kit-color-border-hover | colorBorderHover | | --ui-kit-color-border-active | colorBorderActive | | --ui-kit-color-border-disabled | colorBorderDisabled | | --ui-kit-color-border-critical | colorBorderCritical | | --ui-kit-color-border-low | colorBorderLow | | --ui-kit-color-border-strong | colorBorderStrong |

Typography

| CSS | JavaScript | | ------------------------------------------- | ------------------------------- | | --ui-kit-color-typography-primary | colorTypographyPrimary | | --ui-kit-color-typography-secondary | colorTypographySecondary | | --ui-kit-color-typography-tertiary | colorTypographyTertiary | | --ui-kit-color-typography-placeholder | colorTypographyPlaceholder | | --ui-kit-color-typography-positive | colorTypographyPositive | | --ui-kit-color-typography-info | colorTypographyInfo | | --ui-kit-color-typography-warn | colorTypographyWarn | | --ui-kit-color-typography-critical | colorTypographyCritical | | --ui-kit-color-typography-critical-hover | colorTypographyCriticalHover | | --ui-kit-color-typography-critical-active | colorTypographyCriticalActive | | --ui-kit-color-typography-link | colorTypographyLink | | --ui-kit-color-typography-link-hover | colorTypographyLinkHover | | --ui-kit-color-typography-link-active | colorTypographyLinkActive |

Overlay

| CSS | JavaScript | | ------------------------ | -------------- | | --ui-kit-color-overlay | colorOverlay |

Spacing

| CSS | JavaScript | | ----------------------------- | ------------------ | | --ui-kit-space-0 | space0 | | --ui-kit-space-050 | space050 | | --ui-kit-space-1 | space1 | | --ui-kit-space-150 | space150 | | --ui-kit-space-2 | space2 | | --ui-kit-space-3 | space3 | | --ui-kit-space-4 | space4 | | --ui-kit-space-6 | space6 | | --ui-kit-space-8 | space8 | | --ui-kit-space-12 | space12 | | --ui-kit-base-unit | baseUnit | | --ui-kit-border-radius | borderRadius | | --ui-kit-min-touchable-area | minTouchableArea |

Shadows

| CSS | JavaScript | | ------------------------------ | ------------------- | | --ui-kit-shadow-surface | shadowSurface | | --ui-kit-shadow-surface-high | shadowSurfaceHigh |

Transition animations

| CSS | JavaScript | | --------------------------- | ----------------- | | --ui-kit-hover-transition | hoverTransition | | --ui-kit-fade-transition | fadeTransition |

Changelog

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

Contributing

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.

License

See the LICENSE.md file.