Display@knitui/components

Skeleton

Skeleton renders an animated placeholder while content is loading. visible (default true) switches between the placeholder and real children. circle forces a round block. animate drives a soft opacity pulse. radius rounds the corners via the shared radius variant.

WebiOSAndroid3 own props9 examples

Stories Source Tests Open in Storybook

import { Skeleton } from "@knitui/components";

Playground

Loading playground…

visibleWhen false, renders children normally with no placeholder.

true

circleForce an equal-sided round block. Mirrors `height` onto `width`.

false

animateSoft opacity pulse while the placeholder is visible.

true

radiusCorner radius — maps to the shared radius variant.

width

height

Playground

<Skeleton
  visible
  circle={false}
  animate
  width={200}
  height="$xs"
/>

Examples

Text Block

A block of stacked skeletons mimicking a text-heavy content card.

Loading example…

Text BlockSource Storybook

Circle

Circle variant — useful for avatar placeholders; height is mirrored onto width.

Loading example…

CircleSource Storybook

Radii

All supported radius values applied to the same block.

Loading example…

RadiiSource Storybook

Shadows

Elevation shadow ladder applied via the inherited shadow prop.

Loading example…

ShadowsSource Storybook

No Animation

Animate disabled — static placeholder with no pulse. Useful for reduced-motion contexts.

Loading example…

No AnimationSource Storybook

Content Loaded

When visible is false the real children are rendered and the placeholder is gone.

Loading example…

Content LoadedSource Storybook

Controlled

Controlled toggle — press the button to flip between loading and loaded states.

Loading example…

ControlledSource Storybook

Card Layout

Card skeleton — a realistic layout with a circle avatar and stacked text lines.

Loading example…

Card LayoutSource Storybook

Props

Prop	Type	Default	Description
`animate`	`boolean \| undefined`	`true`	Soft opacity pulse while the placeholder is visible.
`circle`	`boolean \| undefined`	`false`	Force an equal-sided round block. Mirrors `height` onto `width`.
`disabled` system	`boolean \| undefined`	—
`radius` system	`string \| number \| undefined` xs · sm · md · lg · xl · none · full	—	Corner radius — maps to the shared radius variant.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`visible`	`boolean \| undefined`	`true`	When false, renders children normally with no placeholder.

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 498 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.