Skeleton

Skeleton defines how EnterUI handles a subtle placeholder for loading content, including default structure, accessible states, and token-driven styling.

#Default usage

<VStack align="stretch" gap={12} fullWidth>
  <Skeleton height={18} width="48%" />
  <Skeleton height={14} width="88%" />
  <Skeleton height={14} width="72%" />
</VStack>

#Import

import { HStack, Skeleton, VStack } from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

Skeleton is aria-hidden because it is visual placeholder content. Pair with meaningful loading text when needed.

#API

• height and width accept numbers or CSS sizes.
• radius: sm, md, lg, or full.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

#Motion and incremental loading

The pulse alternates smoothly between its endpoints. With reduced motion enabled, skeletons stay still. For scrolling lists, append skeleton cards below existing results, reserve the same media aspect ratio and content spacing, and replace only those placeholders when the next batch arrives. Keep an accessible Load more button available and announce the result count through a polite live region.