{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "type": "registry:ui",
  "title": "Skeleton",
  "description": "A skeleton component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/skeleton/skeleton.tsx",
      "content": "import React from \"react\";\nimport { View } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SkeletonProps extends React.ComponentPropsWithoutRef<typeof View> {\n  className?: string;\n}\n\nfunction Skeleton({ className, ...props }: SkeletonProps) {\n  return (\n    <View\n      className={cn(\"animate-pulse rounded-md bg-primary/10\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Skeleton };\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Skeleton } from \"@/components/ui/skeleton\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\nexport function SkeletonDemo() {\n    return (\n        <View className=\"flex-row items-center gap-4\">\n            <Skeleton className=\"h-12 w-12 rounded-full\" />\n            <View className=\"gap-3\">\n                <Skeleton className=\"h-4 w-[250px]\" />\n                <Skeleton className=\"h-4 w-[200px]\" />\n            </View>\n        </View>\n    );\n}\n",
  "customPreview": "import { Skeleton } from \"@/components/ui/skeleton\";\nimport * as React from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function SkeletonExample() {\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <ScrollView className=\"p-4\">\n                    <View className=\"mb-6\">\n                        <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                            Skeleton\n                        </Text>\n                        <Text className=\"text-base mb-6 text-muted-foreground\">\n                            A skeleton placeholder used to indicate content is loading.\n                        </Text>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Basic Usage\n                        </Text>\n                        <View className=\"flex-row items-center gap-4\">\n                            <Skeleton className=\"h-12 w-12 rounded-full\" />\n                            <View className=\"gap-3\">\n                                <Skeleton className=\"h-4 w-[250px]\" />\n                                <Skeleton className=\"h-4 w-[200px]\" />\n                            </View>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Card Skeleton\n                        </Text>\n                        <View className=\"p-4 border border-border rounded-lg\">\n                            <Skeleton className=\"h-40 w-full rounded-md mb-4\" />\n                            <Skeleton className=\"h-5 w-3/4 mb-2\" />\n                            <Skeleton className=\"h-4 w-full mb-2\" />\n                            <Skeleton className=\"h-4 w-full mb-2\" />\n                            <Skeleton className=\"h-4 w-1/2\" />\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            List Skeleton\n                        </Text>\n                        {[1, 2, 3].map((i) => (\n                            <View key={i} className=\"flex-row items-center gap-4 mb-6\">\n                                <Skeleton className=\"h-14 w-14 rounded-lg\" />\n                                <View className=\"flex-1 gap-3\">\n                                    <Skeleton className=\"h-5 w-3/4\" />\n                                    <Skeleton className=\"h-4 w-1/2\" />\n                                </View>\n                            </View>\n                        ))}\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Profile Skeleton\n                        </Text>\n                        <View className=\"items-center\">\n                            <Skeleton className=\"h-24 w-24 rounded-full mb-6\" />\n                            <Skeleton className=\"h-6 w-40 mb-4\" />\n                            <Skeleton className=\"h-4 w-60 mb-6\" />\n                            <View className=\"flex-row gap-6 mt-2\">\n                                <Skeleton className=\"h-10 w-20 rounded-md\" />\n                                <Skeleton className=\"h-10 w-20 rounded-md\" />\n                                <Skeleton className=\"h-10 w-20 rounded-md\" />\n                            </View>\n                        </View>\n                    </View>\n                </ScrollView>\n            </SafeAreaView>\n        </>\n    );\n}\n\nexport function SkeletonDemo() {\n    return (\n        <View className=\"flex-row items-center gap-4\">\n            <Skeleton className=\"h-12 w-12 rounded-full\" />\n            <View className=\"gap-3\">\n                <Skeleton className=\"h-4 w-[250px]\" />\n                <Skeleton className=\"h-4 w-[200px]\" />\n            </View>\n        </View>\n    );\n}\n"
}