Krizaka
Documentation

Docs article page

A documentation article in the docs frame: the pages, the breadcrumb, the title with its facts, the reading column, the contents, previous and next.

WebBêtaModèles

Web uniquement — React, depuis @krizaka/ui/docs-article-page. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

  • Guides, references, concepts.
  • Any page of a documentation with a list of pages.

Quand ne pas l’utiliser

Installation

Installer

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

Styles

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

Importer

import { DocsArticlePage } from "@krizaka/ui/docs-article-page";

Exemples

Orazaka's CLI

An article with its pages, breadcrumb, facts, contents and pager.

Pages of the documentation

The CLI

Install, start and develop Orazaka from one command line.

  • Updated 11 Oct 2026
  • 4 min read

Install

One command installs the engine, the console and the models you choose.

bashTerminal
npx orazaka install

Start

Then start it; the console opens on your machine.

Props

A documentation article: pages · breadcrumb, title, lead, facts, the reading column · contents; previous and next.

PropTypeDéfautDescription
sidebarrequisReactNode—The documentation's pages (a nav of links).
sidebarLabelrequisstring—On a phone, the words that open the pages.
titlerequisReactNode—The page's h1.
breadcrumbreadonly { href: string; label: string; }[]—Where the page sits: { href, label } from the hub down.
breadcrumbLabelstringBreadcrumbThe breadcrumb's accessible name (Breadcrumb).
factsreadonly Fact[]—Facts under the lead: updated on, reading time, the version it documents.
leadReactNode—One or two sentences under it.
linkAsLinkComponent—The app's link component (Next's Link).
pager{ previous?: { href: string; title: string; }; next?: { href: string; title: string; }; labels: { previous: string; next: string; }; } | undefined—The previous and next pages, and their labels.
toc{ label: string; items: readonly { id: string; label: string; }[]; }—The contents (its h2s): { id, label }, and its label (On this page).

Accessibilité

  • The breadcrumb is a named nav with an ordered list; previous and next a named nav.
  • On a phone the pages fold into a disclosure; the contents become chips.

Bonnes pratiques

  • Keep the reading column under 46rem; headings h2 with ids for the contents.
  • Say when the page was updated and how long it takes to read.
  • Words and content arrive as props; the motion is the platform's ([data-reveal], still under reduced motion).

Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Contact page

Reaching the team: the public channels as cards beside the form, then what happens after sending.

Docs hub page

The entry of a documentation: the search in the middle of the hero, the collections each in its product's brand with their quick links, quick starts beside the most read pages, what is new, the owl's promise.

Sur cette page

Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés