Skeleton

Placeholder component for loading states. Shows an animated pulse effect while content is loading.

Installation

# Install @opencosmos/ui to use Skeleton
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

variant— Shape variant of the skeleton

width— Width of the skeleton (CSS value)

height— Height of the skeleton (CSS value)

Usage

Import

import { Skeleton } from '@opencosmos/ui';

Example

<Skeleton>
  Content
</Skeleton>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
variant	default \| circular \| rectangular \| text	"default"	Shape variant of the skeleton
width	text	"100%"	Width of the skeleton (CSS value)
height	text	"20px"	Height of the skeleton (CSS value)

Examples

Default

Circular

Text Lines

Code Examples

Card Skeleton

Loading skeleton for a user card

import { Skeleton } from '@opencosmos/ui';

<div className="space-y-2">
  <Skeleton className="h-12 w-12 rounded-full" />
  <Skeleton className="h-4 w-[250px]" />
  <Skeleton className="h-4 w-[200px]" />
</div>

List Skeleton

Loading skeleton for a list of items

import { Skeleton } from '@opencosmos/ui';

<div className="space-y-3">
  {Array.from({ length: 5 }).map((_, i) => (
    <div key={i} className="flex items-center space-x-4">
      <Skeleton variant="circular" className="h-12 w-12" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  ))}
</div>