skeletonix

Plug-and-play React Skeleton Loader for fast, smooth placeholders.

A tiny, fully typed shimmer component for React & Next.js. Zero config — just import and use.

Install

npm install skeletonix

Quick Start

import Skeleton from 'skeletonix';

<Skeleton text />                        // text line
<Skeleton circle size={48} />            // avatar
<Skeleton block />                       // full-width block
<Skeleton width={200} height={20} rounded="md" />  // custom

No CSS import needed — styles are injected automatically.

Props

Shortcuts

| Prop | Type | Description | |------|------|-------------| | text | boolean | Text line (full width, 1rem) | | circle | boolean | Circle shape | | block | boolean | Full-width block (4rem) | | size | number \| string | Circle diameter |

Sizing & Style

| Prop | Type | Default | |------|------|---------| | width | number \| string | — | | height | number \| string | — | | rounded | none sm md lg xl full | — | | className | string | — | | style | CSSProperties | — |

Theming

| Prop | Type | Default | |------|------|---------| | baseColor | string | #e5e7eb | | shimmerColor | string | rgba(255,255,255,0.55) | | duration | number | 1.5 |

Also supports all standard <div> attributes.

Examples

Profile Card

import Skeleton from 'skeletonix';

function ProfileSkeleton() {
  return (
    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
      <Skeleton circle size={48} />
      <div>
        <Skeleton text width={140} />
        <Skeleton text width={90} style={{ marginTop: 8 }} />
      </div>
    </div>
  );
}

Content Card

function CardSkeleton() {
  return (
    <div style={{ width: 300, padding: 16 }}>
      <Skeleton block height={160} rounded="lg" />
      <Skeleton text width="70%" style={{ marginTop: 12 }} />
      <Skeleton text width="45%" style={{ marginTop: 8 }} />
    </div>
  );
}

Theming

Override colors globally with CSS variables:

:root {
  --skeletonix-base: #e5e7eb;
  --skeletonix-shimmer: rgba(255, 255, 255, 0.55);
  --skeletonix-duration: 1.5s;
}

/* Dark mode */
.dark {
  --skeletonix-base: #1e293b;
  --skeletonix-shimmer: rgba(255, 255, 255, 0.08);
}

Or per-component:

<Skeleton text baseColor="#1e293b" shimmerColor="rgba(255,255,255,0.1)" />

Next.js

Works with App Router and Pages Router — no extra setup.

// app/loading.tsx
import Skeleton from 'skeletonix';

export default function Loading() {
  return <Skeleton block height={200} rounded="lg" />;
}

Details

• Bundle: ~3KB (ESM, gzipped)
• Dependencies: none (only react as peer)
• TypeScript: full types with discriminated union props
• Compatibility: React 17+, Next.js 13+

Author

Milad Joodi — LinkedIn

License

MIT