App UI Kit

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.

• Based on the components used by Canva's own engineers.
• Designed for accessibility, usability, and cross-platform compatibility.
• Includes a variety of icons⁠(opens in a new tab or window) and design tokens.

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.

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

To play around with the App UI Kit components, check out the App UI Kit Playroom⁠(opens in a new tab or window) — a live playground that comes preloaded with all of the UI components and examples of how to use them.