-
+
+ {/* Skeleton Section */}
+
+
+ Skeleton Placeholders
+
+
+ Simplified loading placeholders for various content shapes
+
+
+
+
+ {/* Shapes */}
+
+
+ {/* Real Data Simulation */}
+
+
+ Shapes
+
+
+
+ {/* Animations */}
+
+
+
+
+
+
+
+
+ Animations
+
+
+
+ {/* Custom Size */}
+
+
+
+
+ Wave (Default)
+
+
+
+
+ Pulse
+
+
+
+
+ None
+
+
+
+
+ Typography Variants
+
+
+
+
+
+
+
+
+
+
+
+ Real Data simulation
+
+
+ Toggle to see how skeletons transition to real content
+
+
+
+
+ {[1, 2, 3].map((i) => (
+
+
+
+ ))}
+
+ {isSimulatingData ? (
+
+
+ {isSimulatingData ? (
+ <>
+
+ {
+ ["Alice Freeman", "Bob Smith", "Charlie Davis"][
+ i - 1
+ ]
+ }
+
+
+ {
+ [
+ "Senior Designer",
+ "Software Engineer",
+ "Product Manager",
+ ][i - 1]
+ }
+
+
+ )}
+
+
+ {isSimulatingData ? (
+
+ {
+ [
+ "Creative designer with a passion for building beautiful UI components.",
+ "Backend developer focused on scalable architecture and performance.",
+ "Strategic thinker driving product vision and execution.",
+ ][i - 1]
+ }
+
+ )}
+
+
+
+ ) : (
+
+
+ Checkboxes
+
+
+ Selection controls with support for labels, descriptions, and
+ interactive indeterminate states
+
+
+
+
+ {/* Interactive Playground */}
+
+
+
+
+ {/* Sizes & States */}
+
+
+
+
+
+
+
+
+
+
+
+ Available Sizes
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Visual Feedback
+
+
+
+
+
+
+ Native States
+
+
+
+
+
+
+ Combine labels, descriptions, and icons to create clear and
+ actionable interfaces.
+
+
+
+
+ Radio Groups
+
+
+ Single selection controls with support for horizontal/vertical
+ layouts, descriptions, and validation.
+
+
+
+
+ {/* Basic & Orientations */}
+
+
+
+
+ {/* Validation & States */}
+
+
+ Vertical Layout (Default)
+
+
+ Selected:{" "}
+
+ {radioValue}
+
+
+
+
+
+
+ Horizontal Layout
+
+
+
+
+ {/* Card Variant */}
+
+
+ Validation & States
+
+
+
+
+
+
+
+ Sizes
+
+
+
+
+
+
+
+
+ Card Variant (New)
+
+
+
+
+ React Pay
+ 
+
+ ),
+ },
+ ]}
+ />
+