Skeleton Component

Installation

The Skeleton component provides a placeholder loading state for content that is still loading.

Installation Command

npx @nativecn/cli add skeleton

Basic Usage

Basic Skeleton

Card Skeleton Example

Card Loading State

Static vs Animated

Animation Comparison

Complex Content Example

Complex Loading State

Usage Example

Basic Skeleton Usage with Responsive Mode

import { View } from 'react-native';
import { Skeleton } from '../components/ui/skeleton';
import { useColorScheme } from 'react-native';

export function LoadingCard() {
  const colorScheme = useColorScheme();
  
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
      <Skeleton 
        className="h-12 w-12 rounded-full"
        mode={colorScheme} // 'light' or 'dark' based on system preference
      />
      <View style={{ gap: 8 }}>
        <Skeleton 
          className="h-4 w-[250px]"
          mode={colorScheme}
        />
        <Skeleton 
          className="h-4 w-[200px]"
          mode={colorScheme}
        />
      </View>
    </View>
  );
}

Reference

Skeleton Props

interface SkeletonProps {
  className: string;      // Required - Tailwind classes for styling
  mode?: 'light' | 'dark'; // Optional - Controls light/dark appearance
  animated?: boolean;      // Optional - Controls animation, defaults to true
}

OTP Input