App UI Kit Version 5

Announcements
1

Hey Canva app developers! We’re thrilled to announce the release of App UI Kit v5! :tada:

Because we’re renaming our design tokens and upgrading to React 19, this is a breaking change update. We’ve tried to smooth the upgrade path as much as possible for you.

For brand new projects, the Canva Apps SDK Starter Kit and app templates in the Canva CLI have been updated to start using App UI Kit v5.

For existing projects, there is an automated migration available through the Canva CLI. For information on running the migration as well as a full guide on what has changed, check out the App UI Kit v5 Upgrade guide.

Here’s the list of changes in version 5:

Breaking Changes

  • Implemented new design token system with more consistent conventions and names.
  • Added React 19 as a peer dependency and dropped React 18 support.
  • Removed the deprecated title prop in the Link component. Use tooltipLabel instead.
  • Remove tone property from InputPill component
  • 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.
  • 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.
  • Pill now uses a round shape to match Canva styling.
  • Removed the default colorSurface background color styling for the global html tag.
  • 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.
  • The default value for the alignY property of Columns is now stretch. To continue using the old implicit behavior, set it to start explicitly.

New Capabilities

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

Feedback is welcome

What should we add next to the App UI Kit? Did you have any issues with the upgrade?

5 Likes
2

Hello,
Wow, I’m really surprised—it’s been quite a while since the UI Kit was last updated, and I thought it was already the final version because it’s really, really good. But it’s great to see that you’re still improving it further :v.

May I also ask about CustomSelect, especially for supporting custom font selection? This component has been quite challenging for me, and I truly hope you can provide support to make it easier for us to implement.

1 Like
3

Hi @ruacon

Thank you!

The CustomizableSelect storybook has been updated with the new design tokens and we have an example implementation of a font selector here

What can we help with to make it easier for you to implement?

Cheers,
Tom

1 Like
4

Hello,
I sincerely apologize that in my previous message I did not clearly describe the issue regarding CustomizableSelect with fonts. Your current example works very well, but when I copied it directly, it passed the review up to the lead stage. However, the reviewer mentioned that it was only a sample version and that updates would be coming. It seems that it hasn’t been updated recently, so I’m not sure how I should proceed from here.

5

Hi @ruacon

Sorry for the confusion, someone from the review team should be reaching out about this.

There might be a specialized font selection component in the future, but until it exists you are completely fine to use the CustomizableSelect component for that use case.

Cheers
Tom

1 Like
6

Hello Tom,
After using the auto-upgrade tool on two of our products, everything worked really well.

npx @canva/cli@latest apps migrate app-ui-kit-v5

But it would be even better if the color codes could also be merged automatically :). It might be that I copied the structure incorrectly, so I’ve included my sample code below.

const colorFill = useCssVariable("–ui-kit-color-typography-primary");

Note: useCssVariable is simply our custom hook for retrieving color codes.

Thank,

Huy

7

Ah, your custom hook has evaded our script @ruacon !

The migration is trying to migrate the colors, but it is looking for things in the format var(--ui-kit-token) as well as the tokens import - i.e.

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

<SomeComponent style={{'border-radius': tokens.borderRadius}} />

That tokens import might be something you can use instead of your hook?

Cheers
Tom

8

Thanks for sharing the migration guide and component updates! I’ve been working with the App UI Kit v5 recently, and a few things stood out to me:

  • The new semantic naming for design tokens is a welcome change — it makes the code much more readable, especially when sharing with teams.

  • I appreciate how the structure of the tokens is cleaner now (action vs. content vs. feedback), which helps me keep CSS organized.

  • One challenge I faced: the breaking changes in component props (for example, Link now using tooltipLabel) caught me off guard during migration. Make sure to check those carefully, especially in large codebases.

Has anyone else noticed performance improvements (render speed / bundle size) after upgrading from v4 → v5? I’d like to hear your thoughts on whether it’s worth fully refactoring older apps.

2 Likes
9

Congrats on the new release @Tom_Saunders

One small thing,

colorControlBorder doesn’t seem to be available under tokens

10

Thanks @tonyadastra , we’ll fix that in a release next week!

1 Like
11

Hi @tonyadastra, just to close the loop I’d like to confirm that colorControlBorder was added in App UI Kit v5.1.0 which was published last week.

The full changelog is here

1 Like
12

Thanks for the update on version 5 of the UI Kit! It’s great to see more components and better alignment with the App UI Kit’s design tokens and standards. Excited to try out the new features in a real-world app and see how they improve consistency and developer speed.

13

The ColorSelector component appears broken in v5. I even tried it in the starter repo to make sure it wasn’t something in my app. It opens the popover, but you can’t interact with it.

The error I’m getting in the console:

53540badba4d899c.sentry_browser.js:1 flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
14

Hi @randombits please see this response.

We’ve identified a work-around which we will ship early next week once we finalise testing.