Files
backstage/docs-ui
Charles de Dreuille 0e8edce069 feat(ui): add HeaderMetadataUsers component and polish Header metadata/tags
- Add HeaderMetadataUsers component: single user shows avatar + name,
  multiple users show avatar stack with tooltip on hover
- Use Pressable from react-aria for tooltip trigger compatibility
- Switch tags and metadata text to body-medium variant
- Fix metadata item styling: secondary color label, no bold, no colon,
  flex row with gap-2 between label and value
- Update Header gap to space-3
- Update docs with HeaderMetadataUsers example, correct prop types,
  and synced default snippet

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
2026-04-19 10:48:09 +02:00
..
2026-01-29 13:45:37 +00:00

Backstage UI Docs

Backstage UI is our internal UI library built for Backstage. We built this website to document the library and its components. You can view this website here.

How to run locally

This website is built with Next.js and it is hosted on Github pages. To run it locally, you can run the following command:

yarn start

Deployment

Deployments are done automatically when a PR is merged into the master branch. We host the website using Github pages.

Maintaining Component Changelogs

After a @backstage/ui release, sync the component changelogs to keep documentation up-to-date:

yarn sync:changelog

This script:

  • Parses packages/ui/CHANGELOG.md for new versions
  • Extracts entries tagged with "Affected components: ..."
  • Updates src/utils/changelog.ts with new entries
  • Handles both component-specific and general package changes

After running, review the changes in src/utils/changelog.ts and commit them.

Preview changes before writing:

yarn sync:changelog:dry-run

Running this gives you a summary of what would be written, without actually adding or changing any files.