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.

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

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