Installation

Import BUI's global styles#

Backstage UI works by importing a global CSS file at the root of your application. This file includes all the default styles for the components. First, you'll need to install the package using a package manager. For example, if you're using Yarn:

Run this command in your packages/app directory

yarn add @backstage/ui

Add this line to packages/app/src/index.tsx

import '@backstage/cli/asset-types';
import ReactDOM from 'react-dom/client';
import App from './App';
import '@backstage/ui/css/styles.css'; 

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

Use BUI components#

As a plugin maintainer, you can use BUI components in your plugin. As mentioned above, you should not import the styles again in your plugin as this will be handled at the root of your application. To get started, just add the library to your plugin and import the components you need.

Run this command in your packages/[your-plugin] directory

yarn add @backstage/ui

Let's get started 🚀

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

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