import * as React from "react"; import { cn } from "@kineticui/core"; /* Ready-made loading placeholders that match common layouts. Shimmer respects reduced motion. */ export function Bone({ className, style }: { className?: string; style?: React.CSSProperties }) { return ( ); } const Wrap = ({ label, className, children }: { label: string; className?: string; children: React.ReactNode }) => (

{children} {label}

); export function SkeletonText({ lines = 3, className }: { lines?: number; className?: string }) { return ( {Array.from({ length: lines }, (_, i) => ( ))} ); } export function SkeletonCard({ media = true, className }: { media?: boolean; className?: string }) { return ( {media ? : null}

); } export function SkeletonProfile({ className }: { className?: string }) { return (

{[0, 1, 2].map((i) => (

))}

); } export function SkeletonList({ rows = 5, className }: { rows?: number; className?: string }) { return ( {Array.from({ length: rows }, (_, i) => (

))} ); } export function SkeletonTable({ rows = 6, cols = 4, className }: { rows?: number; cols?: number; className?: string }) { return (

{Array.from({ length: cols }, (_, i) => )}

{Array.from({ length: rows }, (_, r) => (

{Array.from({ length: cols }, (_, c) => ( ))}

))} ); } export function SkeletonDashboard({ className }: { className?: string }) { return (

{[0, 1, 2, 3].map((i) => (

))}

{Array.from({ length: 16 }, (_, i) => )}

); }

Skeleton Presets

Installation

Exports