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.
Web only — React, from @krizaka/ui/docs-hub-page. Beta: its API may still change in a minor version.
When to use
- The home of a documentation with several collections.
- A help centre's entry.
When not to use
- For one article of the documentation.Use instead: Docs article page
- For a plain list of entry points.Use instead: Link card
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { DocsHubPage } from "@krizaka/ui/docs-hub-page";Examples
krizaka.com/docs
The five collections, a quick start, the most read pages, what is new.
Documentation
Build with Krizaka
Every building block the products are made of, documented from its source.
Collections
Start in one line
npx orazaka installEvery page here is generated from the code it documents — when the code changes, the page does.
Props
A documentation hub: search first, the collections in their brand, quick starts, popular and new pages.
| Prop | Type | Default | Description |
|---|---|---|---|
collectionsrequired | readonly DocsCollection[] | — | The collections, each in its brand. |
collectionsTitlerequired | ReactNode | — | The collections' heading. |
titlerequired | ReactNode | — | The page's h1. |
eyebrow | ReactNode | — | A mono line above the title. |
lead | ReactNode | — | One sentence under it. |
linkAs | LinkComponent | — | The app's link component (Next's Link) for internal addresses. |
popular | { title: ReactNode; items: readonly DocsHubLink[]; } | — | The most read pages. |
promise | { label: ReactNode; text: ReactNode; } | — | The owl's promise at the foot: what this documentation guarantees. |
quickstarts | { title: ReactNode; children: ReactNode; } | — | The quick starts: a title and their samples (CodeBlocks, CodeTabs). |
search | ReactNode | — | The search, front and centre (a SearchField, a button that opens the command palette). |
searchHints | ReactNode | — | Under the search: what people look for (a few links or keys). |
whatsNew | { title: ReactNode; items: readonly DocsHubLink[]; } | — | What is new (releases from the registries, published pages). |
Accessibility
- One
h1; each collection a list item with its main link and a named list of quick links. - The lists of pages are lists of links with their meta in words.
Best practices
- The search first: most readers come to find one page.
- Each collection in its product's brand, with three or four quick links.
- What is new comes from the registries, never typed by hand.
- 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
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.
Error page
When a page is not there: the code drawn huge, the bird that lost its way, one sentence, a search and the ways back — never a dead end.