Catalogue page
A catalogue or an index: the search in the hero, the filters in a sticky column beside the results (folded above them on a phone), the count, the results.
Web only — React, from @krizaka/ui/catalogue-page. Beta: its API may still change in a minor version.
When to use
- Components, packs, use cases, repositories.
- Any index the reader narrows down.
When not to use
- For media to look at.Use instead: Gallery page
- For rows to sort and select.Use instead: Data table
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { CataloguePage } from "@krizaka/ui/catalogue-page";Examples
Components
Krizaka UI's components: search, platform filters, compact link cards.
Krizaka UI
Components
Every component, web and mobile, documented from its code.
Props
A catalogue: hero, sticky filters beside the results (folded on a phone), the count, the results.
| Prop | Type | Default | Description |
|---|---|---|---|
filtersrequired | ReactNode | — | The filters (groups of ChipLinks, a FilterBar): sticky on a desktop. |
filtersLabelrequired | string | — | On a phone, the words that open the filters (Filters). |
titlerequired | ReactNode | — | The page's h1. |
back | { href: string; label: string; } | — | The way back. |
count | ReactNode | — | What matches, in words (24 components). |
eyebrow | ReactNode | — | A mono line above the title. |
lead | ReactNode | — | One sentence under it. |
linkAs | LinkComponent | — | The app's link component (Next's Link). |
search | ReactNode | — | In the hero: a search field. |
toolbar | ReactNode | — | On the right of the count: the sort, a view switch. |
Accessibility
- The count is a polite live region; the filters a native disclosure on a phone.
- Results are a list of links.
Best practices
- Filters as links: the address keeps them, back works.
- Say the count in words, politely announced.
- 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
Split view
A list and its open item: two panes on a desktop; on a phone one at a time, the open item with the way back — chosen by showDetail, from the address.
Changelog page
What changed and why: each entry with its date and version sticking beside it, its changes by kind in words and colour, its reasons under it.