The frame of every page: one width (--kz-page-max), one pair of gutters, one vertical rhythm — Page, Section (full-bleed, its heading, a hairline or the brand's backdrop as transition) and SectionHeading, with Facts and Ticks.

WebBetaBlocks

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

When to use

Around every block of a site's page, so the navigation, the hero and each section share the same edges at any width.
To chain the sections of a page on one rhythm: divider for a transition on the same surface, backdrop for the brand's colour transition.
Facts for a few honest facts under a title (registry and version, a status in progress); Ticks for a translated sentence with code in it.

When not to use

Inside an app's screen, under its own shell: the app's layout already frames its content.Use instead: Page header
To frame one item on a page.Use instead: Card

Installation

Install

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

Styles

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

Import

import { Page, Section, SectionHeading, Facts, Ticks } from "@krizaka/ui/page";

Examples

Sections

Two sections on one rhythm, a hairline between them (divider).

Why

Nothing leaves your servers

Inference runs on your hardware; nothing calls home.

Local models by default, one governed pipeline, zero telemetry.

How

One pipeline, every request

Every request crosses the same interceptors, in the same order.

Section on the brand's backdrop

backdrop: the colour transition behind a closing call, the actions on the right of the heading.

Get started

Install it in four lines

Tokens, the Tailwind preset and the primitives — one version for the three.

The frame alone

Page in its three widths: narrow, default, wide.

size="narrow"

size="default"

size="wide"

Facts and ticks

Honest facts under a title, and a sentence where backticks read as code.

Maven Central 0.1.0
Apache-2.0
Gradle plugin — in progress

Every request carries a requestId; a failed message lands in .dlq, never lost.

Props

Facts

Compact facts on one line — a dot that says the state, a few mono words. Links open in a new tab.

Prop	Type	Default	Description
`items`required	`readonly Fact[]`	—	The facts, in reading order.

Page

The page frame: centred, at most --kz-page-max wide, with the gutters of --kz-page-gutter (16 → 32 px).

Prop	Type	Default	Description
`as`	`"article" \| "main" \| "div" \| "footer" \| "header" \| "section"`	`div`	The element: `div` (default), `main`, `header`, `footer`, `section` or `article`.
`size`	`PageSize`	`default`	The width of the content: `default` (72rem, `--kz-page-max`), `narrow` (48rem, a reading column), `wide` (88rem, documentation with a sidebar), `full` (the gutters only).

Section

A section of a page: full-bleed (its backdrop reaches the edges), its content in the page frame, its heading on top. Sections follow each other on one rhythm; a divider or a backdrop marks the transition.

Prop	Type	Default	Description
`actions`	`ReactNode`	—	The heading's actions.
`backdrop`	`boolean \| Omit<SectionBackdropProps, "children" \| "as">`	—	The brand's colour transition behind the section (SectionBackdrop): `true`, or its props (`direction`, `grid`…).
`divider`	`boolean`	—	A hairline above the section, inside the gutters: the transition between two sections of the same surface.
`eyebrow`	`ReactNode`	—	The heading's eyebrow.
`headingAlign`	`"center" \| "start"`	`start`	The heading's alignment.
`headingSize`	`"sm" \| "md"`	`md`	The heading's size: `md` for a page that argues, `sm` for a reading page.
`lead`	`ReactNode`	—	The heading's lead.
`reveal`	`boolean`	—	The heading rises into place once (never on the first screen).
`size`	`PageSize`	`default`	The width of the content.
`spacing`	`"sm" \| "md" \| "lg"`	`md`	The vertical space above and below: `sm` (a reading page), `md`, `lg` (a page's main moments).
`title`	`ReactNode`	—	The section's title: an `h2` (a `SectionHeading`), which names the section for assistive technology.

SectionHeading

The head of a section: eyebrow (mono, the accent), title, lead — and its actions on the right.

Prop	Type	Default	Description
`title`required	`ReactNode`	—	The title.
`actions`	`ReactNode`	—	Actions on the right of the heading (a link to everything, a filter).
`align`	`"center" \| "start"`	`start`	`center` for a heading that stands alone above a grid.
`eyebrow`	`ReactNode`	—	A short mono line above the title (the section's subject).
`lead`	`ReactNode`	—	One or two sentences under the title.
`level`	`2 \| 3`	`2`	The level of the title.
`reveal`	`boolean`	—	Rises into place once, as it enters the viewport (`[data-reveal]`, MotionObserver). Never on the first screen.
`size`	`"sm" \| "md"`	`md`	`md` for a section that argues, `sm` for a section of a reading page.

Ticks

A sentence of a message catalogue where words between backticks read as code — no markup in the translations.

Prop	Type	Default	Description
`children`required	`string`	—	A sentence where words between backticks are code: "Every request carries a `requestId`."

Accessibility

A Section with a title is a section named by its heading (aria-labelledby); without one it is a plain region of the page.
SectionHeading renders a real h2 (or h3): keep the outline in order — one h1 per page, in the hero.
Facts is a list; a fact with href opens in a new tab. Ticks renders code elements, read as text.

Best practices

Import the blocks' stylesheet once, by package path, in the app's root layout: import "@krizaka/ui/blocks.css".
One frame per site: set --kz-page-max once (72rem by default) and give the navigation the same width.
size="narrow" for a column of text, wide for documentation with a sidebar — never a width of your own.
Give every titled section an id: it is its anchor and, through aria-labelledby, its name.
reveal on headings below the first screen only: what the visitor sees on arrival is painted at once.

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