A demo or a gallery: the filters as links, then the pieces in staggered columns, each framed with how it was made.

WebBetaTemplates

Web only — React, from @krizaka/ui/gallery-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 { GalleryPage } from "@krizaka/ui/gallery-page";

Images Orazaka generated locally, with their prompt and seed.

Made on this Mac

Every image here was made locally, with its prompt and its seed — nothing came from a cloud.

A demo or a gallery: hero, filters, media in staggered columns, closing call.

Prop	Type	Default	Description
`galleryLabel`required	`string`	—	The gallery's accessible name.
`items`required	`readonly GalleryItem[]`	—	The pieces, featured first.
`title`required	`ReactNode`	—	The page's `h1`.
`actions`	`ReactNode`	—	The hero's actions.
`back`	`{ href: string; label: string; }`	—	The way back.
`brand`	`string`	—	The brand the page wears (`.brand-<id>`).
`closing`	`{ title: ReactNode; body?: ReactNode; actions: ReactNode; }`	—	The closing call.
`eyebrow`	`ReactNode`	—	A mono line above the title.
`filters`	`ReactNode`	—	Above the pieces: the filters (ChipLink, a Chip group) — the address says which one is on.
`lead`	`ReactNode`	—	One or two sentences under it.
`linkAs`	`LinkComponent`	—	The app's link component (Next's `Link`).

Filters as links: the address keeps the choice.
A caption says how each piece was made (a prompt, a seed, a time).
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