Skeleton

Overview

Skeleton is a React Native component that serves as a placeholder for content during the loading state, providing a smooth, pulsating animation similar to TailwindCSS’s animate-pulse.

Preview

Preview

Light mode

Dark mode

Code

<Skeleton className="w-48 h-4 mb-1" />
<Skeleton className="w-60 h-4 mb-1" />
<Skeleton className="w-56 h-4 mb-1" />
<Skeleton className="w-36 h-4" />

Installation

CLI

npx nativecn-ui add Skeleton 

Manual

1. First Step

   Include Skeleton.tsx in your project.

2. Second Step

   Update the import paths to match your project setup.

Properties

• className?: string (optional) - The classes for the View container.

Usage

<Skeleton className="w-48 h-4 mb-1" />
<Skeleton className="w-60 h-4 mb-1" />
<Skeleton className="w-36 h-4" />