Krizaka
Documentation

Table of contents

The sections of a reading page: sticky beside the content on a wide screen, a row of chips that scrolls sideways on a phone, the section being read marked — with TocLayout to place it.

WebBetaBlocks

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

When to use

  • A long page read in sections: a building block's page, a guide, a policy.
  • When readers jump to one part (install, decisions, status) more than they read from the top.

When not to use

  • For the navigation between pages.Use instead: Nav bar
  • For a short page of two or three screens: the headings are enough.Use instead: Page

Installation

Install

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

Styles

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

Import

import { Toc, TocLayout } from "@krizaka/ui/toc";

Examples

A reading page

Three sections, the contents in a sticky column beside them.

Install

The install of the building block.

Decisions

The decisions of the building block.

Status

The status of the building block.

Props

Toc

The sections of the page, the one being read marked.

PropTypeDefaultDescription
itemsrequiredreadonly { id: string; label: ReactNode; }[]—The sections, in order: the id of each section's title and its words.
labelrequiredstring—The navigation's name and visible label: On this page.

TocLayout

A reading page: the table of contents in a sticky column on the left, the sections beside it (one column on a phone).

PropTypeDefaultDescription
tocrequiredReactNode—The table of contents (a Toc).

Accessibility

  • A nav named by its label, with an ordered list of links.
  • The section being read carries aria-current="location", found by one IntersectionObserver.

Keyboard

KeysAction
TabMoves through the sections' links; Enter jumps to the section.

Best practices

  • Three to eight entries, the words of the section titles.
  • Every entry points at a heading's id (a Section's): its anchor.
  • Set --kz-anchor-offset once to clear a fixed navigation bar.

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

Pointer light

The light that follows the pointer over a group of cards: one passive listener writes the pointer's position into the card it is over, the card's CSS draws the light.

Card

The composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components