The @krizaka/ui skeleton (default shape rect) with the 1.x shorthands, and SkeletonGroup — a paragraph of text lines.

WebStableFeedback

Web — React, from @krizaka/orazaka-design-system. The Orazaka mobile app takes the kit's tokens, not its components. Stable: its API only changes in a major version.

Why it exists above Krizaka UI

Orazaka 1.x sized skeletons with width / height and chose the shape with variant; this adapter keeps them (deprecated) on the primitive, and adds SkeletonGroup, the paragraph its chat and document views wait on.

Built onSkeleton

When to use

While an answer, a document or a list loads: the shape of what is coming.
SkeletonGroup for a paragraph (an answer being prepared).

When not to use

In new code for a single block: import Skeleton from @krizaka/ui/skeleton and size it with className.Use instead: Skeleton
For an action in progress (a button, a send).Use instead: Spinner

Installation

Install

npm install @krizaka/orazaka-design-system && npm install -D tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/orazaka-design-system/theme.css";

The package ships its TypeScript sources: add it to transpilePackages (with @krizaka/orazaka-shared and @krizaka/ui).

Import

import { Skeleton, SkeletonGroup } from "@krizaka/orazaka-design-system";

Examples

An answer loading

The avatar and three lines while the engine prepares the answer.

Props

Skeleton

The

Prop	Type	Default	Description
`height`	`string`	—	@deprecated Since 2.0 — size it with a `className` (`h-4`) or `style`.
`variant`	`NonNullable<"circle" \| "rect" \| "text">`	—	@deprecated Since 2.0 — use `shape` (same names).
`width`	`string`	—	@deprecated Since 2.0 — size it with a `className` (`w-32`) or `style`.

SkeletonGroup

A paragraph of text skeletons; the last line is shorter.

Prop	Type	Default	Description
`className`	`string`	—	Extra classes on the group (its width), merged last.
`lines`	`number`	`3`	The number of text lines; the last one is shorter. Default 3.

Accessibility

Hidden from assistive technology: announce the loading state elsewhere (aria-busy on the region).

Best practices

Size with className (h-4 w-32), not width / height (deprecated).
Match the layout that replaces it, so nothing jumps.

Generated from the code of @krizaka/orazaka-design-system 2.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub