Backstage UI (BUI) Patterns

When to use this skill

• Authoring or editing any frontend component in a Backstage plugin
• Picking the right component for layout, typography, form input, dialog, menu, tab, table, etc.
• Styling components (BUI uses CSS modules + design tokens, not makeStyles)
• Adding icons (use @remixicon/react)

Setup

A new plugin scaffolded with yarn new includes @backstage/ui automatically. If installing manually:

yarn add @backstage/ui @remixicon/react

Then add the stylesheet to your app entry (packages/app/src/index.tsx or similar):