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

• Mobile · n/a. A whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.
• Desktop · n/a. A public site's page, not a window of the Mac app.

Why it is here. The frame of ui.krizaka.com, java., ts. and the motion lab (one issue each, krizaka/krizaka-ui#548).

Installation

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

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

import { SiteCahier, SiteCahierHero, SiteCahierDoc } from "@krizaka/ui/site-cahier";

Examples

Props

Accessibility

• A header with a named nav (the page being read has aria-current="page"), one main and the family footer's footer: render the template once per page and no other main.
• The bird in the bar and in the hero is decoration; the site's name is the link's text.
• Dark is chalk on slate and light is ink on paper, both at AA; the regions keep a phone layout and never scroll sideways.

Best practices

• Adopt the language, not the layout: pick your own hero, your own featured pieces and your own rhythm — two tool sites must not look like one page with another name.
• One bird per site, by the brand reference: the falcon watches (security), the owl reads, the duck builds (code), the flamingo answers or gets paid, the pigeon delivers.
• Proposed mapping: Krizaka UI → duck, Java → owl, TypeScript → pigeon, Motion → flamingo. Each site also sets its own hue.
• Playful pieces stay refined: a doodle or a grade supports the content, which comes first and stays readable; every grade is measured, with its source.
• Pass the shared NavBar as bar when the site needs search or a language switch; the simple bar is for a small site.

Related components

• Page heroThe first screen of a page: the way back, an eyebrow, the h1, a lead, what follows them (facts, actions) and an aside (the page's bird) — on the brand's backdrop, painted at once.
• Taped photoA print taped in the notebook: slightly tilted, a thin white print border, a soft paper shadow and strips of tape. It holds any picture — an image, a video, a live scene.
• Bird plateThe flock as a naturalist's plate: each bird a numbered figure, a hairline from the drawing to its caption, and the caption is its promise as the film says it.
• Site footerThe footer of a Krizaka site, one calm band: its own columns beside the family's — Products · Open source (GitHub with them) · Krizaka (our story, the blog, contact) — on the Krizaka sites (family={false} for an independent product), then one line: “A Krizaka company / product / open-source project”, the version, Montréal and the legal links. No site block, no link twice.
• Changelog pageWhat 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.
• DoodleA doodle in the margin ink of the Cahier: an arrow pointing at a block, a circled word, a star, a wavy underline or a small sketch of the site's bird — inline SVG, the same on the server and on the client. Beside a block on a wide screen, or in the flow around a real word.
• Grade stampA teacher's red-ink grade, « 18/20 », with a short remark — only from a real measurement passed in by the host, its source in a tooltip.
• Versus cardAn arcade « character select » card: two subjects face to face, a bird as each fighter, stat bars from real data, and a « VS » between them.
• Speed linesManga action lines behind a hero element: a burst around it or streaks across it, drawn in SVG, deterministic and still under reduced motion.

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