Grade stamp

A teacher's red-ink grade, « 18/20 », with a short remark — only from a real measurement passed in by the host, its source in a tooltip.

Web · ✓Mobile · ✗ to buildDesktop · ✓BetaBlocks

import { GradeStamp } from "@krizaka/ui/grade-stamp";

18.8/20Très bien, continue

Web only — React, from @krizaka/ui/grade-stamp. Beta: its API may still change in a minor version.

Mobile · ✗ to build. It comes with the native paper roles of the Cahier. issue #421

Why it is here. The tool sites' homes (krizaka/krizaka-ui#548): a teacher's grade from real measures — coverage, Lighthouse — with its source.

When to use

To say how a project does on a measured quality: test coverage, a Lighthouse score, a bundle against its budget.
On a tool site's home or in a release note, where a teacher's grade is the Krizaka way to show the state.

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { GradeStamp } from "@krizaka/ui/grade-stamp";

A coverage measure turned into a grade out of 20, with its source.

18.8/20Très bien, continue

Four Lighthouse scores, each stamped with its own source.

19.6/20Excellent20/20Parfait18.4/20Bien joué

A teacher's red-ink grade, 18/20 with a remark, only from real data: its source is in a tooltip.

Prop	Type	Default	Description
`source`required	`string`	—	Where the number comes from (`Vitest coverage, 2026-10-23`): shown in the tooltip and read by assistive technology.
`value`required	`number`	—	The measured grade, from `0` to `outOf`. Never invented: it comes from the host's data.
`locale`	`string`	`en`	The locale of the number (`17,5` in French).
`outOf`	`number`	`20`	The scale.
`remark`	`ReactNode`	—	The remark in the margin, written like a teacher (`Très bien, continue`).
`sourceLabel`	`string`	`Source`	The word before the source for assistive technology.
`tilt`	`number`	`-4`	The tilt in degrees.

The score and the remark are real text; the source is also in visually hidden text, so a screen reader reads it without the tooltip.
The tilt is a transform: nothing moves under prefers-reduced-motion because nothing animates.
The ink is the margin's red, chosen for 4.5:1 on the paper in dark and light.

Keys	Action
`Tab`	Focuses the stamp, which opens the tooltip with its source.

Never write a grade by hand: compute it from the measure (coverage / 100 * 20) and pass the source (Vitest coverage, 2026-10-23).
Write the remark like a teacher, short and warm: « Très bien, continue ».
A value outside 0 to outOf, or no source, renders nothing: a missing grade is better than a made-up one.
One stamp per measure, a few per page: a wall of red reads as noise.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub