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@latest 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:

Platform	Output
Web	<div />
Native	<View />

Prop	Type	Default	Description
variant	rounded \| sharp \| circular	rounded	Shape of the skeleton component
startColor	string	bg-background-200	Sets the color of the skeleton animation
isLoaded	bool	false	When true, the skeleton content will be displayed
speed	number	2	Sets the animation speed of the skeleton component

SkeletonText

Renders a

<div />

on web and a

Animated.View

on native and has the following properties:

Platform	Output
Web	<div />
Native	<View />

Prop	Type	Default	Description
lines	number	-	Number of lines in text skeleton
startColor	string	bg-background-200	Sets the color of the skeleton animation
isLoaded	bool	false	When true, the skeleton content will be displayed
speed	number	2	Sets 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.