React-based component library for creating Canva Apps that mimic the look and feel of Canva.
- Introduction
- Features
- Installation
- Usage
- Components
- Icons
- 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:
-
Import the stylesheet:
import '@canva/app-ui-kit/styles.css';
-
Import the
AppUiProvider
component:import { AppUiProvider } from '@canva/app-ui-kit';
-
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:
List of icons
AlertTriangleIcon
AlignBottomIcon
AlignCenterIcon
AlignLeftIcon
AlignMiddleIcon
AlignRightIcon
AlignTopIcon
ArrowDownIcon
ArrowLeftIcon
ArrowRightIcon
ArrowUpIcon
BackgroundIcon
BoldIcon
CheckIcon
ChevronDownIcon
ChevronLeftIcon
ChevronRightIcon
ChevronUpIcon
ClearIcon
CodeIcon
CogIcon
CopyIcon
CropIcon
EyedropperIcon
ExportIcon
EyeIcon
FileTextIcon
FlagIcon
FlipHorizontalIcon
FlipVerticalIcon
FolderIcon
FontIcon
GridIcon
GridViewIcon
HelpCircleIcon
ImportIcon
InfoIcon
ItalicIcon
LightBulbIcon
LinkIcon
ListBulletLtrIcon
LockClosedIcon
LockOpenIcon
MinusIcon
MusicIcon
OpenInNewIcon
PaintRollerIcon
PauseIcon
PencilIcon
PlayFilledIcon
PlusIcon
RedoIcon
ReloadIcon
RotateIcon
SearchIcon
SlidersIcon
SortAscendingIcon
SortDescendingIcon
SortIcon
SpaceHorizontalIcon
SpaceVerticalIcon
TextAlignCenterIcon
TextAlignJustifyIcon
TextAlignLeftIcon
TextAlignRightIcon
TextColorIcon
TextSizeIcon
TransparencyIcon
TrashIcon
UndoIcon
UnderlineIcon
XIcon
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:
List of design tokens
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
CSS | JavaScript |
---|---|
--ui-kit-color-canvas |
colorCanvas |
--ui-kit-color-tabdock |
colorTabdock |
--ui-kit-color-page |
colorPage |
--ui-kit-color-surface |
colorSurface |
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 |
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 |
CSS | JavaScript |
---|---|
--ui-kit-color-overlay |
colorOverlay |
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 |
CSS | JavaScript |
---|---|
--ui-kit-box-shadow-faint |
boxShadowFaint |
--ui-kit-box-shadow-medium |
boxShadowMedium |
--ui-kit-box-shadow-heavy |
boxShadowHeavy |
CSS | JavaScript |
---|---|
--ui-kit-hover-transition |
hoverTransition |
--ui-kit-fade-transition |
fadeTransition |
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.