App UI Kit

The App UI Kit is a React-based component library for designing and developing apps that mimic the look and feel of Canva. If you're using the starter kit, the App UI Kit is already installed. Otherwise, see the quick start guide.

Features

• Based on the components used by Canva's own engineers.
• Built for accessibility, usability, and cross-platform compatibility.
• Comes bundled with dozens of icons and design tokens.

When to use

If you're planning on releasing an app to the public, we strongly recommend using the App UI Kit, as we expect apps to meet certain design guidelines and it's difficult to do so without the components.

If you're only planning on releasing an app to members of your team, using the App UI Kit will ensure the most familiar user experience, but it's not a strict requirement.

Example

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