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

WebBetaTemplates

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

When to use

When not to use

Install

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

Styles

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

Import

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

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

Pages of the documentation

Install, start and develop Orazaka from one command line.

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

bashTerminal

npx orazaka install

Then start it; the console opens on your machine.

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

Prop	Type	Default	Description
`sidebar`required	`ReactNode`	—	The documentation's pages (a nav of links).
`sidebarLabel`required	`string`	—	On a phone, the words that open the pages.
`title`required	`ReactNode`	—	The page's `h1`.
`breadcrumb`	`readonly { href: string; label: string; }[]`	—	Where the page sits: `{ href, label }` from the hub down.
`breadcrumbLabel`	`string`	`Breadcrumb`	The breadcrumb's accessible name (`Breadcrumb`).
`facts`	`readonly Fact[]`	—	Facts under the lead: updated on, reading time, the version it documents.
`lead`	`ReactNode`	—	One or two sentences under it.
`linkAs`	`LinkComponent`	—	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 `h2`s): `{ id, label }`, and its label (`On this page`).

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.

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).

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