Skeleton

Discover the ultimate gluestack-ui Skeleton component for React & React Native. Improve app loading visuals with gluestack-ui easy-to-use Skeleton. This is an illustration of Skeleton component.

Installation

Run the following command:

npx gluestack-ui@alpha add skeleton

API Reference

To use this component in your project, include the following import statement in your file. 
import { Skeleton, SkeletonText } from '@/components/ui/skeleton';

export default () => (
  <Box className="gap-2">
    <Skeleton variant="rounded" className="h-32 w-64" />
    <SkeletonText className="h-4 w-64 " />
  </Box>
)

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Skeleton

Renders a
<div />
on web and a
Animated.View
on native and has the following properties:
PlatformOutput
Web
<div />
Native
<View />
PropTypeDefaultDescription
variant
rounded | sharp | circularroundedShape of the skeleton component
startColor
stringbg-background-200Sets the color of the skeleton animation
isLoaded
boolfalseWhen true, the skeleton content will be displayed
speed
number2Sets the animation speed of the skeleton component

SkeletonText

Renders a
<div />
on web and a
Animated.View
on native and has the following properties:
PlatformOutput
Web
<div />
Native
<View />
PropTypeDefaultDescription
lines
number-Number of lines in text skeleton
startColor
stringbg-background-200Sets the color of the skeleton animation
isLoaded
boolfalseWhen true, the skeleton content will be displayed
speed
number2Sets the animation speed of the skeleton component
gap
number-Sets the gap between the text skeletons

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Using isLoaded prop

Use the
isLoaded
prop to show the content after the skeleton content is loaded.
isLoaded
Edit this page on GitHub
Go backFab
Up nextuseBreakPointValue