Changelog page
What changed and why: each entry with its date and version sticking beside it, its changes by kind in words and colour, its reasons under it.
Web only — React, from @krizaka/ui/changelog-page. Beta: its API may still change in a minor version.
When to use
- Release notes, a product's changelog, a decisions log.
- Any history read newest first.
When not to use
- For the decisions of one product, compared.Use instead: Decision list
- For where things stand now.Use instead: Status page
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { ChangelogPage } from "@krizaka/ui/changelog-page";Examples
Krizaka UI releases
Two releases with their changes by kind.
Krizaka UI
What changed
Every release, newest first — and why, when it was a decision.
- 2.6.0
Page blocks
- AddedPage, PageHero, CardGrid, LinkCard, ArgumentCard and seven more blocks.
- ChangedThe blocks' stylesheet is imported once by the app.
- 2.4.0
Data and media
- AddedDataTable, Combobox, DatePicker, VideoPlayer.
- FixedA live line chart no longer hides its line.
Props
A changelog: entries with a sticky date and version, changes by kind, the reasons under them.
| Prop | Type | Default | Description |
|---|---|---|---|
entriesrequired | readonly ChangelogEntry[] | — | The entries, newest first. |
kindLabelsrequired | Record<ChangeKind, string> | — | The words of the kinds: { added: "Added", … }. |
logLabelrequired | string | — | The log's accessible name (Changes). |
titlerequired | ReactNode | — | The page's h1. |
actions | ReactNode | — | In the hero: a subscribe action, the feed. |
back | { href: string; label: string; } | — | The way back. |
eyebrow | ReactNode | — | A mono line above the title. |
lead | ReactNode | — | One sentence under it. |
linkAs | LinkComponent | — | The app's link component (Next's Link). |
Accessibility
- The log is a named ordered list; each date a
timewith its ISO value. - Kinds are words, not only colours.
Best practices
- Newest first; one entry per release.
- Say the kind of each change (added, changed, fixed, removed) — the colour only repeats it.
- Words and content arrive as props; the motion is the platform's (
[data-reveal], still under reduced motion).
Related components
Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Catalogue page
A catalogue or an index: the search in the hero, the filters in a sticky column beside the results (folded above them on a phone), the count, the results.
Component page
A component's page: its name, summary, status and platforms, the live preview, the import line, its sections, the related components aside.