@allurereport/web-components

Allure Web Components

• Learn more about Allure Report at https://allurereport.org
• Documentation – discover official documentation for Allure Report
• Questions and Support – get help from the team and community
• Official announcements – be in touch with the latest updates
• General Discussion – engage in casual conversations, share insights and ideas with the community

Overview

The package includes Design System Components which are used in web-implementations of Allure reports and Storybook.

Install

Use your favorite package manager to install the package:

npm add @allurereport/web-components
yarn add @allurereport/web-components
pnpm add @allurereport/web-components

Usage

Styles

Import styles right in your JavaScript or TypeScript file:

import "@allurereport/web-components/index.css";

Theme token guidance lives in docs/theme.md. Component styles should use semantic tokens such as --color-status-failed-bg and --color-intent-danger-text, not raw palette or legacy support tokens.

Icon pack

Use allureIcons object to get available SVG icons (see entire list of the icons here):

import { SvgIcon, allureIcons } from "@allurereport/web-components";

// somewhere in .tsx file
<SvgIcon id={allureIcons.reportLogo} />

Fonts

Allure Report use PTRootUI and JetBrainsMono fonts which can be imported from package:

import "@allurereport/web-components/fonts/pt-root-ui_vf.woff";
import "@allurereport/web-components/fonts/JetBrainsMono_vf.woff";

Or if you use SASS:

@import "~@allurereport/web-components/mixins.scss";
@include allure-fonts;