Skip to main content

React Examples

These examples use React components for primitives and core utility classes for layout, sizing, and spacing.

Profile Row​

import { Skeleton, SkeletonAvatar, SkeletonLine } from "@skelia/react";

export function ProfileRowSkeleton() {
  return (
    <section aria-busy="true">
      <span className="sk-sr-only">Loading profile</span>

      <Skeleton>
        <div className="sk-row">
          <SkeletonAvatar />
          <div className="sk-stack sk-flex-1 sk-gap-sm">
            <SkeletonLine className="sk-w-40" />
            <SkeletonLine className="sk-w-80" />
          </div>
        </div>
      </Skeleton>
    </section>
  );
}

Profile row

Article Card​

import { Skeleton, SkeletonBox, SkeletonLine } from "@skelia/react";

export function ArticleCardSkeleton() {
  return (
    <Skeleton animation="shimmer">
      <div className="sk-stack sk-gap-md">
        <SkeletonBox className="sk-ratio-16-9" />
        <SkeletonLine className="sk-w-70 sk-h-lg" />
        <SkeletonLine className="sk-w-100" />
        <SkeletonLine className="sk-w-90" />
        <SkeletonLine className="sk-w-60" />
      </div>
    </Skeleton>
  );
}

Article card

Product Card​

import { Skeleton, SkeletonBox, SkeletonLine } from "@skelia/react";

export function ProductCardSkeleton() {
  return (
    <Skeleton animation="wave">
      <div className="sk-stack sk-gap-md">
        <SkeletonBox className="sk-ratio-4-3" />
        <SkeletonLine className="sk-w-80 sk-h-lg" />
        <div className="sk-row-between">
          <SkeletonLine className="sk-w-30" />
          <SkeletonBox className="sk-button sk-w-30" />
        </div>
      </div>
    </Skeleton>
  );
}

Product card

Loading List​

import { Skeleton, SkeletonBox, SkeletonLine } from "@skelia/react";

export function LoadingListSkeleton() {
  return (
    <Skeleton as="ul" className="sk-stack">
      {Array.from({ length: 3 }).map((_, index) => (
        <li className="sk-row" key={index}>
          <SkeletonBox className="sk-icon" />
          <SkeletonLine className="sk-flex-1" />
        </li>
      ))}
    </Skeleton>
  );
}

Loading list