Components

Skeleton

Use for loading states within cards, lists, and other component surfaces that transition from a placeholder to a final data state.

Source
Loading...

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

1

Install the component

Run the registry command below to add skeleton to your project.

watermelon add skeleton
2

Install manual dependencies

If you are wiring the component manually, install the package dependencies shown below.

npm install react-native
3

Import the component

Import Skeleton from your local UI registry output.

Import

import { Skeleton } from "@/components/ui/skeleton";

Import

Import

import { Skeleton } from "@/components/ui/skeleton"

Usage

The Skeleton component provides a pulse animation for loading states. It is built using React Native's Animated API for maximum performance on mobile devices.

Basic Usage

Use a simple rectangular skeleton for text or content blocks.

Circle

Apply rounded-full to create circular skeletons for profile pictures or icons.

Grid Layouts

Compose skeletons within grid or flex layouts to match your final UI structure.

API Reference

Skeleton extends all supported props from React Native View.

proptypedefaultdescription
classNamestring-Standard Tailwind classes to control width, height, and border radius.
styleStyleProp<ViewStyle>-Direct style object for advanced overrides.
PreviousSeparator
NextSpotlight Button