@canva/app-ui-kit

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

To learn more about developing apps on Canva, see:
To browse all components in the App UI Kit, see:

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:

List of design tokens

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.