Krizaka UI
Krizaka UI
Components

Media grid

A feed of videos in mixed orientations that never staggers: MediaGrid routes the 9:16 clips to a ShortsShelf (equal-height cards, snap scroll, arrows, “See all”) and lays the others in a uniform 16:9 grid; VideoCard is aspect-aware and gives every card the same body height so rows align.

WebBetaMedia

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

Why it is here. Orochia's home feed, Explore and a profile's Videos tab (ORO-HOME-FEED): a Shorts shelf for the 9:16, a uniform grid for the 16:9.

When to use

  • A home, an explore page or a profile's Videos tab where creators publish both vertical and horizontal video.
  • A gallery whose items come from different sources (uniform: everything in one frame, the odd one drawn whole over a blurred copy).

When not to use

  • For a feed that plays one video per screen.Use instead: Vertical video
  • For still photos the owner reorders.Use instead: Photo grid

Installation

Install

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

Styles

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

Import

import { MediaGrid, ShortsShelf, VideoCard } from "@krizaka/ui/media-grid";

Examples

A feed

Three horizontal clips in the grid, three vertical on the shelf: every card of a row has one height.

Shorts

See all

One frame

mode="uniform": vertical clips drawn whole over a blurred copy inside 16:9 cards.

Props

MediaGrid

A media grid that never mixes heights badly: a shelf for the 9:16, a uniform grid for the rest.

PropTypeDefaultDescription
getIdrequired(item: T) => string—A stable key for an item.
itemsrequiredreadonly T[]—The videos, in order.
orientationOfrequired(item: T) => VideoCardAspect—The source's orientation (from its width and height).
renderItemrequired(item: T, state: MediaGridState) => ReactNode—One card, drawn in the frame the grid gives (state): use VideoCard.
shelfrequiredPick<ShortsShelfProps<unknown>, "title" | "label" | "seeAll" | "previousLabel" | "nextLabel">—The shelf of split: its name, "See all" and arrows, passed translated.
frameVideoCardAspectlandscapeThe frame of uniform.
layout"grid" | "list"gridgrid or list (one row per video).
mode"split" | "uniform"splitsplit: verticals on the shelf, the others in the grid · uniform: all in one frame (frame).

ShortsShelf

A Shorts shelf: equal-height 9:16 cards in a snap-scrolling row.

PropTypeDefaultDescription
getIdrequired(item: T) => string—A stable key for an item.
itemsrequiredreadonly T[]—The clips, in order.
labelrequiredstring—The shelf's accessible name ("Shorts"), passed translated; shown as its heading unless title is set.
nextLabelrequiredstring—The next arrow's name.
previousLabelrequiredstring—The arrows' names, passed translated.
renderItemrequired(item: T, index: number) => ReactNode—One card: use VideoCard aspect="portrait".
seeAll{ href: string; label: string; linkAs?: LinkComponent; }—Opens the vertical feed.
titleReactNode—A heading different from the name.

VideoCard

A video card whose frame, body and footer have one height per aspect, so a grid row or a shelf never staggers.

PropTypeDefaultDescription
hrefrequiredstring—Where the card opens.
titlerequiredstring—The title; it names the card and is its link.
actionReactNode—One quick action at the end of the footer (a tip, a save). Its clicks must not follow the card's link.
aspectVideoCardAspectlandscapeThe frame: landscape (16:9) or portrait (9:16).
badgesReactNode—Badges at the top-left of the picture (Free, a price, 18+). Put them on scrim so they read in both themes.
blurredbooleanfalseA sensitive picture: blurred and scaled so nothing shows (put the reveal button in overlay).
creatorVideoCardCreator—Who made it: name, photo, profile.
durationstring—The length, already formatted (3:42).
fallbackReactNode—Shown instead of the picture while there is none.
fit"cover" | "contain"covercover fills the frame; contain draws the whole picture over a blurred copy of itself (a source of the other orientation: no cropped face, no black bar).
layout"row" | "stack"stackstack (picture over text) or row (picture beside the text: the list mode of a section).
linkAsLinkComponent—The app's router link (Next's Link).
loading"eager" | "lazy"lazyeager for the first cards of a page.
metaReactNode—What is counted (12.4K views), already formatted.
overlayReactNode—Over the whole picture, above the card's link (a veil, a reveal button).
posterstring | null—The picture.
previewSrcstring | null—An animated picture (WebP) shown while the card is hovered or focused.

Accessibility

  • The shelf is a labelled section whose row is a list; the arrows are named buttons shown with a mouse, hidden on touch (swipe).
  • The card's whole surface is the title's link (a stretched link): no nested interactive element.
  • The animated preview plays on hover or focus only.

Keyboard

KeysAction
TabEach card is one link (its title); the creator and the action are their own stops; the shelf takes the focus to scroll with the arrow keys.
Arrow Left / Arrow RightScrolls the focused shelf.

Best practices

  • Leave mode on split for a feed: a 9:16 card in a 16:9 grid is what makes a row tower over its neighbours.
  • Give orientationOf the source's width and height, not the card's: a clip of the other shape is drawn with fit="contain", never cropped to a face.
  • Put what is the product's own in the slots (badges, action); badges sit on scrim and read in both themes.
  • Pass every word translated: the shelf's name, its arrows and “See all”.

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

Media capture

Previous

Media picker

Next

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components