The chapters of a story on the Cahier's ruled lines (ADR-004): ChapterIndex (one ruled line per chapter, the number in the margin, the serif title the link, the latest marked « New »), ChapterHead and ChapterFoot for the top and bottom of a chapter's page. No boxes. variant="album" draws each chapter's cover as a taped print beside its title, the rows alternating left and right.

Web · ✓Mobile · n/aDesktop · ✓BetaBlocks

import { ChapterIndex, ChapterHead, ChapterFoot } from "@krizaka/ui/chapter";

01Pourquoi je construis Krizaka à Montréal 16 oct.
02Un moteur d'IA sur un portable 16 – 17 oct.
03Ce que coûtent une image et une vidéo : mes factures 15 – 21 oct.
04D'un clip à un film : ce que nous avons raté d'abord 17 – 21 oct.
05Une seule interface, du web au Mac 17 – 21 oct.
06Les premiers produits : Yomizaka et Akinaza 17 – 23 oct.
07Un résultat vide n'est pas un succès 16 – 23 oct.
08Construire presque seul, avec des agents Nouveau 12 – 23 oct.

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

Mobile · n/a. A long read's index and page frame on a public site; an app lists its items with List. → List

Why it is here. The Cahier (ADR-004, krizaka-ui#617): the chapters of the story on blog.krizaka.com's home (ChapterIndex), the head and foot of each chapter's page.

When to use

The chapters of a story or a series, read in order: a timeline you follow, never a feed of cards.
The home of a blog or a story, where each chapter has a cover: variant="album", light, a taped print and one line each.
The head of a chapter's page (its number, title, period and reading time, the standfirst once) and its foot (previous, next, back to the story).

When not to use

Entries the reader browses or picks among, with a picture or an argument each.Use instead: Link card
The sections of the page being read.Use instead: Table of contents
A documentation's index with page numbers.Use instead: Page index

Installation

Install

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

Styles

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

Import

import { ChapterIndex, ChapterHead, ChapterFoot } from "@krizaka/ui/chapter";

Examples

The chapters of a story

Eight chapters in reading order, one ruled line each, the latest marked « Nouveau ».

01Pourquoi je construis Krizaka à Montréal 16 oct.
02Un moteur d'IA sur un portable 16 – 17 oct.
03Ce que coûtent une image et une vidéo : mes factures 15 – 21 oct.
04D'un clip à un film : ce que nous avons raté d'abord 17 – 21 oct.
05Une seule interface, du web au Mac 17 – 21 oct.
06Les premiers produits : Yomizaka et Akinaza 17 – 23 oct.
07Un résultat vide n'est pas un succès 16 – 23 oct.
08Construire presque seul, avec des agents Nouveau 12 – 23 oct.

With a second line

The optional detail: what was faced → what was built, on the next ruled line.

06The first products: Yomizaka and Akinaza Oct 17 – 23A pay stub nobody can read → a rule that cites its article
07An empty result is not a success Oct 16 – 23A green screen with an empty ranking → a run never delivers nothing as a success
08Building almost alone, with agents New Oct 12 – 23Thirty agents, one night → rules written after every mistake

The chapters as an album

variant="album": each cover a taped print, alternating left and right, the title, one line and the period beside it.

§ 1Pourquoi je construis Krizaka à Montréal 16 oct.Une ville, un portable, et l'envie de garder ses données chez soi.
§ 2Un moteur d'IA sur un portable 16 – 17 oct.Des modèles locaux derrière une seule adresse lue en base.
§ 3Ce que coûtent une image et une vidéo 15 – 21 oct.Les factures, ligne par ligne, et ce que nous avons coupé.
§ 4D'un clip à un film Nouveau 17 – 21 oct.Ce que nous avons raté d'abord, puis le relais.

Inside a ruled page

In a Page with margin, one red rule only: the page's.

01Pourquoi je construis Krizaka à Montréal 16 oct.
02Un moteur d'IA sur un portable 16 – 17 oct.
03Un résultat vide n'est pas un succès 16 – 23 oct.

A chapter's head

The number in the margin, the title, the period and the reading time, the standfirst once.

Un résultat vide n'est pas un succès

16 – 23 octobre 20269 min de lecture

Ce que j'ai affronté, Un écran vert avec un classement vide; Ce qu'on a construit, un run ne livre jamais un résultat vide comme un succès

A chapter's foot

The previous and the next chapters on the lines, then one line back to the story.

The latest chapter, top and bottom

Head and foot around the reading column; no next chapter yet.

Construire presque seul, avec des agents

12 – 23 octobre 202611 min de lecture

Ce que j'ai affronté, Une trentaine d'agents, une seule nuit; Ce qu'on a construit, des règles écrites après chaque erreur

Le texte du chapitre, dans sa colonne de lecture.

Props

ChapterFoot

The foot of a chapter: the previous and the next on the ruled lines, then one line back to the story.

Prop	Type	Default	Description
`back`	`{ href: string; label: ReactNode; }`	—	The line back to the story: `{ href: "/", label: "Back to the story" }`.
`label`	`string`	`Chapters`	The accessible name of the navigation.
`labels`	`{ previous: ReactNode; next: ReactNode; }`	`{ previous: "Previous", next: "Next" }`	The quiet words beside each link.
`linkAs`	`LinkComponent`	—	The app's router link (Next's `Link`).
`next`	`ChapterLink`	—	The chapter after this one (none on the latest).
`paper`	`ChapterPaper`	`lines`	The ruling under the links.
`previous`	`ChapterLink`	—	The chapter before this one (none on the first).

ChapterHead

The head of a chapter: the number in the margin, the title, the period and the reading time, the standfirst once.

Prop	Type	Default	Description
`number`required	`ReactNode`	—	The chapter's number, hung in the margin: `01`, `Chapitre 1`.
`title`required	`ReactNode`	—	The title: the page's `h1`.
`built`	`ReactNode`	—	What was built: its second half, after the arrow.
`faced`	`ReactNode`	—	What was faced: the first half of the standfirst.
`level`	`1 \| 2`	`1`	The level of the title.
`period`	`ReactNode`	—	When it happened: `janv. – mars 2026`.
`readingTime`	`ReactNode`	—	How long it reads: `8 min`.
`versusLabels`	`readonly [string, string]`	—	The words a screen reader says before each half (the arrow is drawn, not read): `["What I faced", "What we built"]`.

ChapterIndex

The chapters of a story as a sober timeline: one ruled line each (or a taped print each), the number in the margin, the title the link.

Prop	Type	Default	Description
`chapters`required	`readonly ChapterEntry[]`	—	The chapters, in reading order.
`label`	`string`	—	The accessible name of the list, when no heading names it (`aria-labelledby`).
`linkAs`	`LinkComponent`	—	The app's router link (Next's `Link`), so internal chapters prefetch.
`newLabel`	`ReactNode`	`New`	The word of the latest chapter's mark.
`paper`	`ChapterPaper`	`lines`	The ruling under the rows. `false` when the page is ruled already and the list starts on its module.
`variant`	`"lines" \| "album"`	`lines`	`lines` — one ruled line per chapter (the compact index); `album` — each chapter's `cover` as a taped print beside its title, its `detail` (one short line) and its period, the rows alternating left and right.

Accessibility

ChapterIndex is an ordered list (role="list", kept by VoiceOver without bullets) of links named by their title; the « New » mark is read inside the link, the number and the period around it.
The whole row is the link's hit area (a stretched pseudo-element); only the title and the mark are its name.
ChapterHead renders a real h1 (or h2 with level={2}); the meta line's separator and the standfirst's arrow are hidden from assistive technology.
ChapterFoot is a nav named by label (« Chapters »); its links carry rel="prev" and rel="next", their arrows are decorative.
In the album the cover is decorative (alt="", the print aria-hidden): the title is the link's name, the whole row its hit area.
Nothing moves: hover and focus underline the title in the hue, also under reduced motion.

Keyboard

Keys	Action
`Tab`	Moves from one chapter's title to the next; the focus ring outlines the whole row.

Best practices

Short numbers in the margin (01, § 1): the margin is 3 rem wide; the word « Chapter » belongs to the page's heading.
One line per chapter: the title and its period. Say what was faced and what was built once, on the chapter's page (ChapterHead's standfirst); detail is for an index that truly needs a second line.
In the album, give every chapter a cover with its real width and height (the print keeps its aspect-ratio, nothing shifts) and one short detail: what was built, in a sentence. The covers after the first two load lazily.
Inside a Page that already draws the margin, the chapters keep their number column and draw no second red line.
Mark only the latest chapter isNew, and only while it is new.
ChapterIndex rules its own lines so every row lands on one: put it in a section without paper, or pass paper={false} when the list starts on the page's module.
Give ChapterHead the two versusLabels: the arrow of the standfirst is drawn, a screen reader hears the labels.
Pass the router link as linkAs so internal chapters prefetch.

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

Chapter