Something done, and what it replaced: a milestone reached, a dare completed, a problem out of the way — on one grid of hairlines in a list, their badges arriving one by one; with three line emblems.

WebBetaData display

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

When to use

Milestones of a creator or a member: what is done, what is next (locked).
What a product removed for its users (“Paying 30 % to a platform” → “90 % to you”).
Problems sealed one by one on a told page, in time with a GoalGauge (the arcade flavour).

When not to use

A notification that something just happened.Use instead: Toast
A status of an object (published, pending).Use instead: Badge
An argument with its reasons and a link.Use instead: Argument card

Installation

Install

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

Styles

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

Import

import { Achievement, AchievementList, Emblem } from "@krizaka/ui/achievement";

Examples

Milestones

Two milestones done, with what they replaced; the next one locked.

Milestone 01Done
~~Paying 30 % to a platform~~
90 % of every tip to you
Milestone 02Done
~~Fans who vanish after a like~~
Challenges they back with credits
Milestone 03Locked
Your first auction

Arcade flavour

Heads sealed one by one, each stamp slamming in, with the three emblems.

Head 01Sealed
~~Data sent abroad~~
Everything runs on your machine
Head 02Sealed
~~A bill per token~~
One price, no meter
Head 03Sealed
~~A closed box~~
Open source, end to end

Props

Achievement

Something done: an eyebrow, a badge, what it replaced (struck through) and the outcome.

Prop	Type	Default	Description
`title`required	`ReactNode`	—	What was achieved: the outcome, in a few words.
`badge`	`ReactNode`	—	The badge in the corner (“Done”, “Unlocked”, arcade “Sealed”).
`brand`	`string`	—	A brand scope (`orochia` → `.brand-orochia`).
`eyebrow`	`ReactNode`	—	A small line above: its number, its kind (“Milestone 03”).
`icon`	`ReactNode`	—	A glyph before the eyebrow (an `Emblem`, an icon). Decorative.
`locked`	`boolean`	—	Not reached yet: muted, its badge neutral. Say it in the badge too (“Locked”).
`replaced`	`ReactNode`	—	What it replaced or overcame, struck through above the title (“Paying 30 % to a platform”).
`variant`	`StoryVariant`	`default`	`default`: a calm badge. `arcade`: a mono stamp that slams onto the card.

AchievementList

An ordered list of Achievements on one grid of hairlines.

Prop	Type	Default	Description
`brand`	`string`	—	A brand scope (`orochia` → `.brand-orochia`).
`minWidth`	`string`	`220px`	The narrowest a card gets before the grid drops a column.
`variant`	`StoryVariant`	—	The look of every card: `default` or `arcade`.

Emblem

Three line emblems for achievements and choices (currentColor, decorative).

Prop	Type	Default	Description
`kind`required	`"sword" \| "mirror" \| "jewel"`	—	The emblem: `sword` (courage, the first step), `mirror` (clarity, honesty), `jewel` (care, what is kept).
`size`	`number`	`20`	Width and height in pixels.

Accessibility

AchievementList is an ordered list; replaced is a del element, read as removed text.
Emblems and icons are decorative. The badges arrive once in a stage and never under prefers-reduced-motion.

Best practices

The title is the outcome in a few words; replaced what it removed — struck through, so the change reads at a glance.
Say a locked step in its badge (“Locked”), not only by the muted colour.
Use Emblem (sword, mirror, jewel) as the glyphs of a set, or your own icons from @krizaka/icons.

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