Skeleton

Installation

Install the Skeleton component using the nocta-ui CLI:

npx nocta-ui add skeleton

Then import the component:

import { Skeleton } from '@/components/ui/skeleton';

Basic Usage

Default Skeleton

Pulse Animation

Sizes

Three size options are available: sm, md, and lg. The default size is md.

Shapes

The Skeleton component supports different shapes: rectangle, circle, and text.

Text Lines

For text content placeholders, you can specify multiple lines with the lines prop.

Custom Dimensions

You can customize the width and height of skeleton elements using the width and height props.

Real-world Examples

Card Skeleton

Article Skeleton

Table Skeleton

Usage Patterns

Loading States

const [loading, setLoading] = useState(true);

return (
  <div>
    {loading ? (
      <Skeleton shape="text" lines={3} />
    ) : (
      <div>
        <p>Actual content here...</p>
      </div>
    )}
  </div>
);

Conditional Rendering

return (
  <div className="space-y-4">
    {posts.length > 0 ? (
      posts.map(post => <PostCard key={post.id} post={post} />)
    ) : (
      Array.from({ length: 3 }, (_, i) => (
        <CardSkeletonDemo key={i} />
      ))
    )}
  </div>
);

Customization

Custom Classes

<Skeleton 
  className="rounded-xl border border-neutral-200" 
  width="300px" 
  height="200px" 
/>

Responsive Dimensions

<Skeleton 
  className="w-full md:w-1/2 lg:w-1/3" 
  height="200px" 
/>

Accessibility

The Skeleton component is designed with accessibility in mind:

• Uses semantic HTML structure
• Provides visual loading feedback
• Works well with screen readers
• Maintains proper contrast ratios

Props

The Skeleton component also accepts all standard HTML div attributes.