Components · Loading States
Skeleton
StableSince v0.0.1
Placeholder loading animation that mimics content layout.
import { Skeleton } from '@nexub/react';Examples
Default
Shapes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | 'line' | 'rect' | 'circle' | 'line' | Shape of the skeleton placeholder. |
| width | string | number | — | Width of the skeleton element. |
| height | string | number | — | Height of the skeleton element. |
| animated | boolean | true | Enables the shimmer animation. |
On iOS & Android: Skeleton
@nexub/react-nativeAlpha
import { Skeleton } from '@nexub/react-native';
<Skeleton width="60%" height={16} />Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
Skeleton props
| Prop | Type | Default | Description |
|---|---|---|---|
| width | ViewStyle['width'] | '100%' | — |
| height | number | 16 | — |
| radius | 'field' | 'control' | 'container' | number | 'field' | — |
| style | StyleProp<ViewStyle> | — | — |