Canva Dev Docs

Appearance

App UI Kit ​

Overview ​

What is the App UI Kit? Why use it?

The App UI Kit is a React-based component library designed for creating apps that emulate Canva's look and feel. If you're using the starter kit, the App UI Kit is already installed. Otherwise, refer to the Quickstart guide.

Features ​

  • Based on the components used by Canva's own engineers.
  • Designed for accessibility, usability, and cross-platform compatibility.
  • Includes a variety of icons and design tokens.

When to use ​

We strongly recommend using the App UI Kit if you're planning to release an app to the public, because this makes it easier to comply with our design guidelines. Without these components, meeting the guidelines can be challenging.

If you're developing an app solely for your team members, using the App UI Kit will provide a more familiar user experience, although it's not mandatory.

Example ​

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

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

Live playground 🎉 ​

To play around with the App UI Kit components, check out the App UI Kit Playroom — a live playground that comes preloaded with all of the UI components and examples of how to use them.

Quickstart ​

Get up and running with the App UI Kit.

The App UI Kit is a React-based component library for Canva apps. If you're using the starter kit, the App UI Kit is already set up for you. If you're not using the starter kit, this guide will help you get started.

Step 1: Install the App UI Kit ​

In the project's directory, run the following command:

bash
npm install @canva/app-ui-kit

Step 2: Set up the AppUiProvider ​

At the root of the application, such as in a project's index.tsx file:

  1. Import the following stylesheet:

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

  2. Import the AppUiProvider component:

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

    This component provides theming and user preferences to App UI Kit components.

  3. Wrap the app in the AppUiProvider component:

    tsx
    <AppUiProvider>
  <App />
</AppUiProvider>

    Note: You should only use the AppUiProvider component once in an app's component tree.

Step 3: Start using the components ​

  1. Import components from the @canva/app-ui-kit package:

    tsx
    import { Button, Rows, Text, Title } from "@canva/app-ui-kit";

  2. Use them as you would any other React component:

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

    Warning: For your app to be theme-responsive, App UI Kit components and any custom components must be wrapped in AppUiProvider.

Next steps ​

Once you're up and running, either:

  • Check out the Storybook to explore the available components.
  • Play around with the components in your app.

Colors ​

An overview of colors in the App UI Kit.

Canva has a distinct and vibrant color palette. The App UI Kit exposes a subset of this palette as design tokens. You can use these colors to create a user interface that matches Canva's aesthetic.

Using colors ​

The colors are exposed in the following formats:

  • CSS variables
  • JavaScript variables
  • React component props (with exceptions)

You can use the CSS and JavaScript variables as you would any other design token.

In the case of React component props, some props only accept specific colors. For example, the Alert component only accepts the following colors for the tone prop:

tsx
<Alert tone="info">This is an alert.</Alert>
<Alert tone="warn">This is an alert.</Alert>
<Alert tone="positive">This is an alert.</Alert>
<Alert tone="critical">This is an alert.</Alert>

These props are documented in Storybook and available as autocomplete options via IntelliSense.

List of color tokens ​

Actions ​

These colors are used to perform actions, in such components as buttons, menu items or pills.

Primary ​

Key actions that represent the main purpose of the interface.

Secondary ​

Supporting actions such as secondary buttons and pills.

Tertiary ​

Subdued actions such as menu items and teritary buttons.

Overlay ​

Actions that appear over busy and vibrant backgrounds.

Selected ​

Actions that indicate a user selection or the origin of an effect.

General ​

Universal color states that apply across multiple components.

Feedback ​

Positive ​

Successes and other positive information.

Info ​

General information.

Warn ​

Cautionary information.

Critical ​

Errors and problems.

Hint ​

Hints and assistive information.

Overlay ​

Info over busy backgrounds.

UI ​

Neutral grays, focus and overlay colors for use within UI components, such as alert or thumbnail backgrounds.

Content ​

General text and icons.

Control ​

Form elements such as text inputs, selects, pickers, sliders and switches.

General ​

Default states for interactive form elements.

Critical ​

Error states and validation problems in form controls.

Selected ​

Active or chosen states in form controls.

Navigational link elements.

Handle ​

Tactile handles and grabbers.

Surface backgrounds ​

Elevation backgrounds of various surface containers.

Design Tokens ​

What are design tokens? Why use them?

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, simplifying the maintenance of interface elements and enabling features, such as theming.

The App UI Kit exposes design tokens as JavaScript variables, CSS variables, and React component props. Apps can use these tokens to customize components or create components that match the look and feel of Canva.

Your app must be wrapped in AppUiProvider for design tokens to work, even if you're using custom components.

Using design tokens ​

CSS variables ​

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

css
.button {
  background-color: var(--ui-kit-color-content-fg);
}

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

JavaScript variables ​

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

tsx
import { AppUiProvider, tokens } from "@canva/app-ui-kit";
import "@canva/app-ui-kit/styles.css";

function App() {
  return (
    <AppUiProvider>
      Hello world.</div>
    </AppUiProvider>
  );
}

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

Note: The values of the JavaScript variables are CSS variables. For example, the value of the colorContentFg token is var(--ui-kit-color-content-fg), not the underlying CSS value that the variable resolves to.

React component props ​

The props of some components only accept certain tokens. This prevents you from using components in a way that would be unfamiliar to Canva's users. For example, the Button component only has three color variants:

tsx
<Button variant="primary">Click me</Button>
<Button variant="secondary">Click me</Button>
<Button variant="tertiary">Click me</Button>

These props are documented in Storybook and available as autocomplete options via IntelliSense.

List of design tokens ​

You can find the reference documentation for the tokens on the following pages:

  • Colors
  • Shadows
  • Spacing
  • Transitions

Spacing ​

An overview of spacing in the App UI Kit.

The App UI Kit exposes a spacing scale. This scale is made up of a limited range of numeric design tokens that are multiples of the base unit. By using these tokens, the size of and spacing between components remains consistent, which results in a more polished and visually harmonious experience.

Using spacing tokens ​

The tokens that make up the spacing scale are exposed as:

  • CSS variables
  • JavaScript variables
  • React component props (with exceptions)

You can use the CSS and JavaScript variables as you would any other design token.

In the case of React component props, some props only accept values from the spacing scale. For example, the Rows component has a spacing prop that sets the vertical margin between its children:

tsx
<Rows spacing="2u">
  <Box>This is a box.</Box>
  <Box>This is a box.</Box>
  <Box>This is a box.</Box>
</Rows>

This code will render three rows of boxes with 2 units (16 pixels) between each row.

When passing values from the scale as props, the value takes the form of "𝑥u," where "𝑥" is a number on the scale, and "u" is an abbreviation of "unit." An exception to this rule is when the value is "0," because this value doesn't have a suffix.

List of spacing tokens ​

Spacing scale ​

Other spacing tokens ​

Shadows ​

An overview of shadows in the App UI Kit.

The App UI Kit exposes design tokens for shadows. These shadows add subtle elevation to a component, which is mostly noticeable with the light theme, as they blend in with the app's background on a dark theme.

List of shadow tokens ​

Transitions ​

An overview of transitions in the App UI Kit.

The App UI Kit exposes design tokens for transitions. These transitions add subtle animations to interface elements, such as fading between button states, and can be used to introduce consistent transitions in custom components.

List of transition tokens ​

Units ​

An overview of units in the App UI Kit.

Canva's user interface is laid out on a grid, which consists of square cells, each measuring 8 pixels in width and height. This 8-pixel measurement is referred to as the base unit.

By aligning interface elements to this grid, apps can maintain a level of visual consistency that is aesthetically pleasing. It's not enough for apps to only conform to the grid, but it is a fundamental building block.

To help apps conform to the grid, most sizing and spacing values in the App UI Kit (widths, heights, margins, etc.) are multiples of the base unit. This ensures that interface elements align correctly.

What are units? ​

A value that is a multiple of the base unit is referred to as a unit, abbreviated as u. As a result, the following values are synonymous:

  • 8 pixels
  • 1 unit
  • 1u

Using units instead of hard-coded pixel values ensures that, should the size of the base unit change, apps would still conform to the grid. It also simplifies reasoning about relative sizing, as "2u" is twice "1u," thereby reducing the need for mental calculations when arranging components.

Using the base unit ​

Generally, apps don't need to directly use the base unit. This number is used to compute the values of tokens in the spacing scale, and apps should typically employ these tokens for setting sizes and spaces.

However, if you want to adhere to the grid using a value not available in the spacing scale, you can access the base unit as a CSS or JavaScript variable and calculate the value yourself.

CSS ​

css
.container {
  padding: calc(var(--ui-kit-base-unit) * 10);
}

JavaScript ​

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

const style = {
  padding: `calc(${tokens.baseUnit} * 10)`,
};

Exceptions ​

There are instances where conforming to the grid is impractical, such as when displaying a raster image with a fixed width and height. In these cases, disregard the grid. It is intended as a tool, not a constraint.

Changelog ​

The latest changes to the App UI Kit.

5.7.0 - 2026-03-05 ​

Changed ​

  • The Box component's foreground color has been updated when the background is set to canvas, tabdock, page, surface, or neutralLow. There may be minor visual changes.
  • The Text component's line height for size large has been adjusted from 26px to 24px to align proportionally with other sizes. Minor visual changes should affect whitespace only.
  • TestAppUiProvider now supports an option to disable animations for testing purposes.
  • The SurfaceHeader component now uses a larger size for the back icon, resulting in minor visual changes.

5.6.0 - 2026-02-19 ​

Changed ​

  • Internal updates to css color token values, very minor visual regressions may appear.
  • Updated the colorUiOverlayBg color token value to be slightly darker in dark mode.
  • Flyout trigger has internal markup changes, removed an outer div wrapper from the Flyout component, no layout impact or regressions are expected.
  • Flyout component internal behavior change, header content (title, description) now defaults to center alignment for mobile sheet view to align to the rest of Canva.
  • Changes the line height of the Title component in size "large", from 32px to 30px on viewports &lt;600px, and 42px to 40px on larger viewports. Visual changes are minor and affect whitespace only.
  • Updated internal Title font weights for most Title sizes, large/medium/small titles from 700 to 600. No change required for consumers of the Title component, minimal visual shifts are expected affecting horizontal whitespace only.
  • Added better viewport safe-area detection to pinned elements, like the Flyout or FlyoutMenu.

Added ​

  • Added a HtmlPreview component that can be used to display HTML in the previewUi of content publisher intent apps.

Fixed ​

  • Fixed an issue where the Text component font weight would behave differently than expected when when using a 'b' or 'strong' tag. They will now be 600 weight like the usual bold variant of that component.
  • Fixed an issue with the Carousel and Tabs components would render incorrectly not follow the global ltr / rtl directions.
  • Fixed an issue where the PillsInput remove button isn't being triggered when maxRows is set and content is scrollable.

5.5.0 - 2026-01-14 ​

Changed ​

  • Reverted Checkbox component to use box-shadow spread animation for checked/indeterminate states. The previous background-color workaround was for an iOS 26.1 Beta WebKit bug that has since been fixed in the stable release. No code changes required - this is a visual implementation detail.
  • Made the Flyout component popover and sheet appearances have the same DOM structure on first paint.
  • Updated CSS tokens used in various components. Expect very slight visual updates.

Fixed ​

  • Fixed the Slider component briefly flashing with the fill bar at 100% when first loading.
  • Fixed the Card component fixed focus outline not visible on Safari.
  • Fixed carousel items not properly applying item width when they have fluid content.

5.4.0 - 2025-12-19 ​

Changed ​

  • Updated react and react-dom peer dependency requirement to ^19.2.3 from ^19.2.1.
  • Updated mobx peer dependency requirement to ^6.13.5 from ^6.13.3.
  • Updated CSS tokens used in AudioCard, expect very slight visual updates.

Fixed ​

  • Fixed Carousel snapping not working with virtualized items.
  • Fixed a bug where the Carousel component would crash upon unmount.
  • Fixed onScroll being called incorrectly in edge cases for the Scrollable component. It's now only called on scroll events.

5.3.0 - 2025-12-10 ​

Changed ​

  • Updated react and react-dom peer dependencies to ^19.2.1.
  • Carousel component improvements:
    • Items that are not fully visible are now marked as inert by default. This means their elements and descendants won't be tabbable or interactive until they are fully visible. A new prop outOfViewItemBehavior has been added to opt out of this behavior.
    • Accessibility skip links have been disabled by default if the "inert" outOfViewItemBehavior is selected (or defaulted), otherwise become enabled if "none" behavior is selected.
    • Updated the scroll buttons to have smoother animations, and updated the buttons to have circle buttons.
    • Updated item visibility thresholds to improve stability and usability.
  • Updated internal shadow colors, small variations in shadows can be expected.

Added ​

  • Introduced the SurfaceHeader component.
  • Added a trigger prop to the FlyoutMenu component, enabling any React.ReactNode to be a FlyoutMenu trigger.
  • Added a variant prop to the LinkButton component, supporting either regular (default) or critical.

Fixed ​

  • Fixed a focus abandonment issue occurring when a focused carousel item becomes inert as the container is scrolled with arrow keys.
  • Fixed an issue in cards where card content was sometimes leaking outside the selection border.
  • Fixed a bug that produced focus jumps when navigating carousels with items wider than the container.

5.2.1 - 2025-11-11 ​

Fixed ​

  • Fixed ColorSelector component which stopped working in development mode, due to a regression in React 19.2.

5.2.0 - 2025-10-22 ​

Changed ​

  • Updated the README to reference canva.dev docs for design tokens.

Fixed ​

  • Carousel's scroll button control now takes item gaps into account
  • Fixed a couple of iOS 26.1 beta bugs impacting FlyoutMenu, Flyout,Select, CustomizableSelect and ColorSelector components.
    • The top edge of the Sheet component would change position when the virtual keyboard is open.
    • Regression affecting transition of full height Sheets when virtual keyboard opens.

5.1.0 - 2025-10-14 ​

Changed ​

  • Changed react and react-dom peer dependency versions to 19.2.0.

Added ​

  • Added onPlay, onPause, and onEnded callbacks to the AudioCard component.

Fixed ​

  • Fixed an IOS 26.1 beta bug, which broke the way the box-shadow was applied to Checkbox to cover the entire area. Replaced it with background color.
  • Fixed a bug where one AudioCard component unmounting would stop all currently playing AudioCards.
  • Restored missing colorControlBorder token.
  • Updated the colorControlBorderHovered semantic token to be correct in dark mode.

5.0.2 - 2025-10-08 ​

Added ​

  • Added elevationSurfaceFloatingBg token for use as a background (surface) color. It is the preferred migration for the colorSurface token that was removed in v5.

Fixed ​

  • Fixed a bug where the wrong ref could be returned for the SearchInputMenu component.

5.0.1 - 2025-09-30 ​

Removed ​

  • Breaking: Added React 19 as a peer dependency and dropped React 18 support.
  • Breaking: Remove tone property from InputPill component
  • Breaking: Removed the default colorSurface background color styling for the global html tag.
  • Breaking: Removed the deprecated title prop in the Link component. Use tooltipLabel instead.

Changed ​

  • Breaking: Implemented new design token system. See App UI Kit v4 to v5 Migration Guide for more information on upgrading.
  • Breaking: The source parameter of the onChange callback for the ColorSelector component is now optional. The migration is to check for undefined values in the callback handler.
  • Breaking: The default value for the alignY property of Column is now stretch. To continue using the old implicit behavior, set it to start explicitly.
  • Breaking: Replaced Pill and InputPill truncateText prop with new maxWidth prop. The new prop better describes its functionality, and represents its size in a more explicit manner.
  • Breaking: Changed the size property for the Pill component to be consistent with Button size variants. To retain the old "small" Pill size, use the new "xsmall" variant.
  • Breaking: Pill now uses a round shape to match Canva styling.

Added ​

  • Added load callbacks to the media cards - onImageLoad to ImageCard, onImageLoad and onVideoLoad to VideoCard and onImageLoad and onAudioLoad to AudioCard
  • Added onTimeUpdate callback to receive ontimeupdate events for the Audio Card
  • Added new LinkButton component for in-app actions that do not need to open URLs.
  • Added type=multi property to enable multiple selections for the Select component.

Fixed ​

  • Resolved an issue with color-scheme CSS that broke dark mode.
  • Fixed a bug where ProgressBar always had 0 width when rendered in a flex container.

4.10.0 - 2025-06-25 ​

Deprecated ​

  • Deprecated title prop in the Link component. Use the newly added tooltipLabel prop instead.

Added ​

  • Added the following components:
    • TimeInput
    • CustomizableSelect
  • Added the following icons:
    • TeamIcon
  • Added a time mode to the DateTime component.
  • Added a ref property to the AudioCard component to enable programmatic control.

4.9.0 - 2025-04-29 ​

Added ​

  • Add onScroll prop for Scrollable component
  • Add video/x-msvideo as an accepted video mime-type for the VideoCard component
  • Add description and content props to the AudioCard component

Fixed ​

  • Fixed a bug where the VideoCard and EmbedCard components were not correctly applying the borderRadius prop

4.8.0 - 2025-02-20 ​

Changed ​

  • Changed the behavior of the Image, Video and Embed Cards to display the loading screen within the border rather than obscuring it.

Added ​

  • Added inline-flex as a display option for the Box component.
  • Added bottomEnd and bottomEndVisibility props to HorizontalCard.

4.7.1 - 2025-01-29 ​

Fixed ​

  • Fixed an issue where the TruncatedText component was not exported, making it unavailable for use.

4.7.0 - 2025-01-21 ​

Added ​

  • Introduced the TruncatedText component

Fixed ​

  • AudioCard now stops the audio from playing when the component unmounts

4.6.0 - 2025-01-08 ​

Changed ​

  • Updated the Button component to use rem for width and height instead of pixel values, ensuring the container scales appropriately when text scales due to browser or OS settings.
  • Adjusted all form input components to use rem sizes, enabling them to adapt to text scaling via browser or OS settings.

Added ​

  • Introduced a wrapInset prop for the Badge component, with a -1u value to improve the appearance and spacing of badges wrapped around icons.

    tsx
    <Box padding="3u">
  <Badge shape="circle" text="4" tone="assist" wrapInset="-1u">
    <CogIcon />
  </Badge>
</Box>

Fixed ​

  • Resolved an issue with the AudioCard component where the pause button would incorrectly stop the track instead of pausing it.
  • Fixed a bug where content with scrollbars in the TabPanel component would not scale to the correct height.
  • Prevented the PillsInput remove button's onRemoveClick event from bubbling up and inadvertently triggering the pill's onClick event.

4.5.0 - 2024-12-18 ​

Added ​

  • Added a triggerMode prop to the ColorSelector component. Enabling the rendering of a AddColorButton as a trigger.
  • Added a onDeleteColor prop to the ColorSelector component, when a callback is provided it adds a delete button in the picker flyout.
  • Added a onOpen and onClose prop to the ColorSelector component.
  • Added a labelMarker prop to the FormField component. When provided, it renders a marker next to the label (e.g. "optional").
  • Added thumbnailPadding and thumbnailBackground props to ImageCard to allow for custom svg support on the ImageCard component.

Fixed ​

  • Fixed an issue where the text in the Pill and InputPill components would overflow incorrectly when truncate was set to false. No considerable visual changes are expected, but a minor width change may be present for truncated pills.
  • Fixed an issue where arrow navigation in the FlyoutMenu component would not focus in some scenarios of nested FlyoutMenus.
  • Other minor fixes and improvements.

4.4.0 - 2024-11-26 ​

Changed ​

  • Reduced the size of the HorizontalCard thumbnail to match other card components

Added ​

  • Updated labels on CheckboxGroup, Checkbox, FormField, RadioGroup and Switch to allow for React.ReactNode

Fixed ​

  • Set the default delimiters for PillsInput to be [',', ';', '\t']
  • Updated AppUiProvider component to support multiple mounts.
  • Fixed broken paste behavior when string without delimiters are pasted into PillsInput
  • Fixed Tab contents display when overflowing as it would squash its contents.

4.3.0 - 2024-11-13 ​

Added ​

  • Added screen reader announcements for PillsInput.
  • Added the following icons:
    • LayoutIcon
    • ChartLineIcon
    • GlobeIcon
  • Added the ability to group options in the Select component.
  • Added a description prop to the Checkbox, CheckboxGroup and RadioGroup components.

4.2.0 - 2024-10-30 ​

Added ​

  • Added the following components:
    • HorizontalCard
  • Added the following icons:
    • ImageIcon
  • Added a topEnd prop (with visibility control) to the AudioCard component, to add an icon button decorator to the top end corner of the card.
  • Added a "small" size for the Pill component.
  • Added improved onDrag behaviour to the Audio, Video, Embed, and Image Cards. They now hide their preview automatically when dragging (if dragging is enabled) and the preview is used as the drag image under the mouse cursor.
  • Added a peer dependency on Mobx v6.13.3 or later, due to an incompatibility with prior patches that would make components fail to update correctly.

Changed ​

  • Updated the TabPanel and TabPanels flex grow behavior to always fill to outer Tabs height regardless if is "fill", "fixed" or "auto". Resolves an issue where the TabPanel content was not filling the height of the Tabs component.

Fixed ​

  • Fixed an issue where the text was being truncated for the FlyoutMenu component's trigger button.
  • Fixed an issue where the FlyoutMenu component was flickering on open due to React v18 changes.
  • Other minor fixes and improvements.

4.1.0 - 2024-10-14 ​

Added ​

  • Added a showTooltip prop to the Pill component.
  • Added a thumbnailAspectRatio prop to the ImageCard, which can be used with thumbnailHeight and the Carousel component to make carousels of fixed-height thumbnails with variable widths.

Fixed ​

  • Fixed an issue where the Button tooltipDescription was not being used by screen readers.
  • Fixed an issue where a disabled AudioCard could be dragged.
  • Fixed a Safari display problem for Tab labels.
  • Fixed a layout issue to the FileInput in button mode that caused multiple scrollbars in apps.

4.0.0 - 2024-09-23 ​

Removed ​

  • Breaking: Removed the "xlarge" size option from the Title and Text components, please use the "large" size instead.
  • Breaking: Removed the "neutral" tone option from the Badge component, it is recommend to use the "contrast" tone instead.
  • Breaking: Removed the "large" size from the LoadingIndicator component.
  • Breaking: Removed the "center" align option from the TabList component.
  • Breaking: Removed the state prop from the InputPill component, the default state now becomes only "default".
  • Breaking: Removed the tone prop from the ProgressBar component.
  • Breaking: Removed the size prop from the Swatch component.
  • Breaking: Removed the MoreVerticalIcon icon, as outlined in a previous release, the MoreHorizontalIcon is recommended instead.

Changed ​

  • Breaking: Changed the alt prop to be required for the ImageCard component.
  • Updated the styling of the Slider component, the shadow on the slider knob is now removed when in a "disabled" state.
  • Updated the behavior of the NumberInput component, a decimal (".") is now permitted as the first character.

Added ​

  • Added Localization support across all App UI Kit components.
    • With the introduction of Canva Apps Localization, all messaging within apps can now go through the Canva Translation process.
    • Additionally all auxiliary messaging that cannot be directly managing in components are also now automatically translated when respective languages are preferred.
    • Additionally added LTR (left-to-right) and RTL (right-to-left) content direction support to pair with the addition of Apps Localization.
  • Added a pressed prop to the Button component, for only "secondary" and "tertiary" variants.
  • Added a "contrast" option to the variant prop for the Button component.
  • Added the following icons:
    • ArrowMultiDirectionalIcon
    • CopyPlusIcon
    • DatabaseIcon
    • LineWeightsIcon
    • MoveLayerDownIcon
    • MoveLayerUpIcon
    • SpacingIcon
    • TextSpacingIcon

Fixed ​

  • Fixed an issue with the Tabs components where the Tab tooltip would snap to the start when the TabList component had the align prop set to "stretch".
  • Fixed an issue where the PillsInput component would not display a grayed background when the disabled prop was set to true.
  • Other minor fixes and improvements.

Note: Canva's app submission process requires a single app bundle. Implementing localization might increase the size of the app and cause webpack to split the bundle into multiple chunks. If this happens, you can force webpack to emmit a single bundle using the LimitChunkCountPlugin:

In your webpack.config.js:

  1. Add the optimize module to the webpack import:
diff
- const { DefinePlugin } = require("webpack");
+ const { DefinePlugin, optimize } = require("webpack");
  1. In the plugins add the chunk limit before buildDevConfig is called. Modify the plugins definition:
diff
plugins: [
  new DefinePlugin({
    BACKEND_HOST: JSON.stringify(backendHost),
  }),
+ new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
],

3.8.0 - 2024-08-05 ​

Added ​

  • Added the following components:
    • DateInput
    • FlyoutMenu
    • FlyoutMenuDivider
    • FlyoutMenuItem
    • InputPill
    • PillsInput
    • Scrollable

Fixed ​

  • Fixed the heading size of the Accordion component.

3.7.0 - 2024-07-23 ​

Added ​

  • Added the following components:
    • Accordion
    • AccordionItem
    • Flyout
    • Menu
    • MenuDivider
    • MenuItem
    • SearchInputMenu
  • Added the following icons:
    • DatabaseIcon
    • StarFilledIcon
    • StarIcon
    • TableMergedHeaderCellsIcon
  • Added a TestAppUiProvider component for use when testing @canva/app-ui-kit components in test environments such as Jest.
  • Added a size prop to the Button component for tertiary icon buttons.
  • Added a selectable, selected, and disabled prop to the AudioCard component.
  • Added a loading prop to the AudioCard, EmbedCard, ImageCard, TypographyCard, and VideoCard components.

Changed ​

  • Updated the onClick and ariaLabel props to now be optional for the ImageCard, AudioCard, VideoCard and EmbedCard components.

Fixed ​

  • Fixed an issue in the Slider component where the handle overlay was getting cut off by the number input.
  • Fixed an issue where screen readers were double announcing labels to RadioGroups.
  • Other minor fixes and improvements.

Deprecated ​

  • MoreVerticalIcon is now deprecated, it is no longer recommended for use and will be removed in a future release. Use MoreHorizontalIcon instead.

3.6.0 - 2024-07-01 ​

Added ​

  • Added the following components:
    • Tab
    • TabList
    • Tabs
    • TabPanel
    • TabPanels
  • Added the following icons:
    • CalendarIcon
    • MaximizeIcon
    • MinimizeIcon
    • MoreHorizontalIcon
    • MoreVerticalIcon
    • StrikethroughIcon
  • Added a disabled prop to the ColorSelector component.
  • Added a tooltipLabel prop to the Badge component.
  • Added a selected prop to the Button component.
  • Added a searchable prop to the Form Select component to allow searching for options.
  • Added a thumbnailHeight, selectable, selected, and disabled prop to the VideoCard and EmbedCard components.
  • Added a bottomEnd and bottomEndVisibility prop for adding card decorators to the AudioCard, EmbedCard, ImageCard, and VideoCard components.

Changed ​

  • Updated React version to v18.3.1 in Peer Dependencies.

Fixed ​

  • Fixed an issue where the MultilineInput component scroll positioning was resetting on input value change.
  • Fixed an issue where closing the Select component on touch devices resulted in the options menu reopening.
  • Fixed an issue with our build process to remove esm syntax from our cjs output.
  • Other minor fixes and improvements.

3.5.1 - 2024-05-08 ​

Added ​

  • The following components:
    • Avatar
    • AvatarGroup
    • AvatarPlaceholder
  • The following icons:
    • LinkIcon
    • FileTextIcon
  • Added a new contrast tone variant for the Badge component, along with TSDoc comments explaining the meaning of each tone.
  • Added a new neutral tone variant for the Alert component.
  • Added a new disabled prop to the ImageCard component.

Changed ​

  • Fixed WordCountDecorator displaying incorrect ARIA label.
  • Update the colorTabdock token value ever so slightly.
  • Render a truncated file name in FileInputItem when file name is too long, and show the full file name in a tooltip instead.
  • Visual changes to Pill component selected and disabled states.
  • Visual updates to the Slider component.

Fixed ​

  • Links with the OpenInNewTab icon no longer leave the icon 'hanging' on a new line.
  • Fixed the Link component with target="_blank" letting punctuation drop onto a new line.
  • Fixed a stacking context issue in Carousel component causing its buttons to be rendered above flyouts.

3.4.0 - 2024-03-18 ​

Added ​

  • The following icons:
    • FlagIcon
    • LightBulbIcon

Changed ​

  • The Badge component now has a wrapInset prop.
  • The Box component now has display and flexbox related props.
  • The ImageCard component now has selectable and selected props.

Fixed ​

  • Fixed the text in the SegmentedControl component where active items were not rendering in the right tone.
  • Fixes a stacking context issue in SegmentedControl causing its buttons to be rendered above flyouts.
  • Fixed disabled Select displaying option lists using arrow keys.

3.3.0 - 2024-02-27 ​

Added ​

  • The Button component now has an alignment prop.

3.2.0 - 2024-02-13 ​

Improvements ​

  • Reduced bundle size by over 7% by optimizing dependencies and implementing tree-shaking, resulting in faster loading times and improved performance.

Added ​

  • The following components:
    • Badge
    • Carousel
    • ClearDecorator
    • Masonry
    • Pill
  • The following icons:
    • ExportIcon
    • EyeIcon
    • FlipHorizontalIcon
    • FlipVerticalIcon
    • FolderIcon
    • GridIcon
    • InfoIcon
    • ListBulletLtrIcon
    • RedoIcon
    • SlidersIcon
    • TransparencyIcon
    • UndoIcon

Changed ​

  • The Box component now has a className prop.
  • The Button component now has iconPosition and tooltipLabel props.
  • The EmbedCard component title prop is now optional.
  • The Select component options now has description, disabled and Icon props.
  • The Swatch component now has an onDelete prop.
  • The TextInput component now has start and end props.
  • The TypographyCard component now has an onHover effect.
  • The VideoCard component now has a borderRadius prop.
  • Add onBlur and onFocus props to the following components: Checkbox, CheckboxGroup, MultilineInput, NumberInput, TextInput, RadioGroup, SegmentedControl, Select, Switch.
  • Add onKeyDown prop to the following components: MultilineInput, NumberInput, TextInput.
  • Updated primitive color scale, lighter colors are now more vibrant with less murky tones. Darker colors are lighter and more muted.

Fixed ​

  • Fixed Slider tab order to be label, slider, input. This fixes a bug where the Slider was being rendered on top of other components.
  • Other minor fixes and improvements.

3.1.0 - 2023-12-12 ​

Added ​

  • The following components:
    • AudioCard
    • AudioContextProvider
    • EmbedCard
    • ImageCard
    • Link
    • TypographyCard
    • VideoCard
  • The following icons:
    • LockOpenIcon
    • LockClosedIcon

Note: With the addition of the various Card components, the equivalent Draggable components, such as DraggableImage, have been removed from the starter kit.

Changed ​

  • The Button component now has an ariaLabel and icon prop.
  • The Grid component now has an alignX prop.
  • The Swatch component now has a tooltipLabel prop.
  • Renamed the colorTypographyQuaternary token to colorTypographyPlaceholder.

Fixed ​

  • The spacing of the FormField component, ensuring consistency with the rest of the components.

3.0.0 - 2023-11-02 ​

Added ​

  • The following components:
    • Alert
    • CharacterCountDecorator
    • ColorSelector
    • Slider
    • Swatch
    • Switch
    • WordCountDecorator
  • A number of new icons.

Changed ​

  • Breaking: Made the second argument to the onChange callback of the MultilineInput component optional.

Example update in consumer code:

diff
<MultilineInput
  onChange={(value, event) => {
+   if (event == null) {
+     return;
+   }
    const cursorPosition = event.target.selectionStart;
    handleChangeAtCursorPosition(value, cursorPosition);
  }}
/>
  • The Button component now accepts a type prop. This prop can be set to "submit", "button", or "reset". The default value is "button".
  • The TextInput component now accepts a type prop. This prop can be set to "search", "tel", "text", or "url". The default value is "text".
  • The MultilineInput component now accepts a footer prop. You can use this prop to decorate the input with the CharacterCountDecorator or WordCountDecorator components.

2.0.0 - 2023-09-14 ​

Removed ​

  • Breaking: Removed default reset styles, including * { margin: 0 }. Apps may need to update to add these styles back in to maintain current styling:
* {
    margin: 0;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
  • Breaking: Removed disableBubbles prop from ProgressBar component. The bubble effect is now always enabled. Any usages of the disableBubbles prop will need to be removed.

Changed ​

  • Breaking: Renamed background color tokens. All usages must be updated to use the new name.

The Box component's background prop has changed and should be renamed accordingly:

beforeafter
&lt;Box background={1} /&gt;&lt;Box background="canvas" /&gt;
&lt;Box background={2} /&gt;&lt;Box background="tabdock" /&gt;
&lt;Box background={3} /&gt;&lt;Box background="page" /&gt;
&lt;Box background={4} /&gt;&lt;Box background="surface" /&gt;

Any references to the following color tokens should be renamed accordingly:

beforeafter
tokens.colorBackground1tokens.colorCanvas
tokens.colorBackground2tokens.colorTabdock
tokens.colorBackground3tokens.colorPage
tokens.colorBackground4tokens.colorSurface

Any references to the following CSS variables should be renamed accordingly:

beforeafter
--ui-kit-color-background-1--ui-kit-color-canvas
--ui-kit-color-background-2--ui-kit-color-tabdock
--ui-kit-color-background-3--ui-kit-color-page
--ui-kit-color-background-4--ui-kit-color-surface

Added ​

  • Added new Grid layout component for displaying content in a grid.
  • Added and edited prop documentation across multiple files, to clarify language and provide more context.

Fixed ​

  • Fixed disabled CSS bug in Select component.
  • Fixed alignment of Checkbox with its label.
  • Fixed MultilineInput textarea not auto-growing when wordbreaks occur from resizing.
  • Validates input when using FileInput selector. When using the OS provided selector to choose files, users could override filetype restrictions.
  • Other small bug fixes and improvements.

Other ​

  • onChange prop in RadioGroup component is now optional to align with the other form components.

1.0.0 ​

Added ​

  • Initial package release

Canva Developer Documentation SOP Site

Built for internal use