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

WebStableRetours

Web — React, depuis @krizaka/orazaka-design-system. L'app mobile Orazaka prend les tokens du kit, pas ses composants. Stable : son API ne change qu’à une version majeure.

Pourquoi il existe au-dessus de 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.

Repose surSkeleton

Quand l’utiliser

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

Quand ne pas l’utiliser

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

Installation

Installer

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).

Importer

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

Exemples

An answer loading

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

Props

Skeleton

The

Prop	Type	Défaut	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	Défaut	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.

Accessibilité

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

Bonnes pratiques

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

Généré depuis le code de @krizaka/orazaka-design-system 2.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub