@sedonawebservices/skeletize-chakra-ui

Effortless, zero-flash skeleton loading for Chakra UI v3+ — with auto and manual modes, variant support, and TypeScript safety.

Automatically generate skeleton placeholders for Chakra UI applications. Supports all common Chakra components (Button, Text, Heading, Input, Badge, etc.), preserves layout, and offers both auto and manual skeletonization. No content flash, no layout shift, and full TypeScript support.

---

✨ Features

• ⚡ Zero-Flash Skeletons: No content flash on load, even for buttons and inputs
• 🎯 Smart Component Detection: Auto-detects Chakra UI components (Button, Text, Heading, etc.)
• 🎨 Variants & Customization: Pulse, fade, static, and custom color support (via props)
• 🛠 Manual & Auto Modes: Use auto-detection or mark elements with data-skeleton
• 📦 TypeScript Support: Full types for all exports
• 🧩 Chakra UI v3+ Compatible: Works with the latest Chakra UI
• ♻️ Preserves Layout: No layout shift, keeps your UI structure

---

🚀 Installation

1npm install @sedonawebservices/skeletize-chakra-ui
2# or
3yarn add @sedonawebservices/skeletize-chakra-ui
4# or
5pnpm add @sedonawebservices/skeletize-chakra-ui

---

📦 Usage

Basic Example

1import { Skeletize } from '@sedonawebservices/skeletize-chakra-ui';
2import { Stack, Heading, Text, Button, Input } from '@chakra-ui/react';
3
4function MyComponent() {
5  const [loading, setLoading] = useState(true);
6  return (
7    <Skeletize loading={loading} variant="pulse">
8      <Stack gap={4}>
9        <Heading size="lg">Dashboard</Heading>
10        <Text>Welcome back! Here's your activity.</Text>
11        <Input placeholder="Type here..." />
12        <Button colorScheme="blue">Submit</Button>
13      </Stack>
14    </Skeletize>
15  );
16}

Manual Mode

1<Skeletize loading={loading} mode="manual">
2  <Box height="20px" width="80%" data-skeleton />
3  <Text>This will not be replaced unless marked</Text>
4  <Button data-skeleton>This button will become a skeleton</Button>
5</Skeletize>

Skeleton Variants

1<Skeletize loading={loading} variant="fade" skeletonColor="#e2e8f0" skeletonEndColor="#f8fafc">
2  <Button>Fade Skeleton</Button>
3</Skeletize>

---

🛠 API Reference

1interface SkeletizeProps {
2  loading: boolean; // Whether to show skeletons
3  mode?: 'auto' | 'manual'; // Detection mode (default: 'auto')
4  variant?: 'pulse' | 'fade' | 'static' | 'none'; // Skeleton animation variant
5  skeletonColor?: string; // Skeleton base color
6  skeletonEndColor?: string; // Skeleton highlight color
7  children: React.ReactNode; // Components to wrap
8}

Prop	Type	Default	Description
loading	boolean	-	Whether to show skeleton placeholders or actual content
mode	'auto' | 'manual'	'auto'	Toggle automatic detection vs manual override with data-skeleton
variant	'pulse' | 'fade' | 'static' | 'none'	'pulse'	Skeleton animation style
skeletonColor	string	gray.200	Skeleton base color
skeletonEndColor	string	gray.50	Skeleton highlight color
children	React.ReactNode	-	The components to wrap and potentially convert to skeletons

---

🧪 Development

1# Install dependencies
2npm install
3
4# Start Ladle development server
5npm run ladle
6
7# Build the library
8npm run build
9
10# Build Ladle documentation
11npm run build-ladle

---

📄 License

MIT