Welcome to the Canon, the new design library for Backstage plugins. This project is still under active development but we will make sure to document the API as we go. We are aiming to improve the general UI of Backstage and plugins across Backstage. This new library will take time to build but we are building it incrementally with not conflict with the existing theming system.

Installation

1. Install canon

Install Canon using a package manager.

yarn add @backstage/canon

2. Import the css files

Import the global CSS file at the root of your application.

import '@backstage/canon/css/styles.css';

3. Start building ✨

Now you can start building your plugin using the new design system.

import { Flex, Button, Text } from '@backstage/canon';

<Flex>
  <Text>Hello World</Text>
  <Button>Click me</Button>
</Flex>;

Roadmap

You can check our roadmap on GitHub. We'll do our best to keep you updated on the progress.

Next steps

Now that you have the basics down, you can start building your plugin using the new design system. Please familiarise yourself first with our theming principles. This will help you understand the core concepts of the design system. If you have any questions, please reach out to us on Discord.