Skeleton

Usage

The Skeleton component is used to create placeholder loading states for content that is still being fetched or rendered.

import { Skeleton } from "stylus-ui/Skeleton";

export default () => <Skeleton className="h-20 w-full" />;

Theming

The Skeleton component supports two themes: light (default) and dark. Use the theme prop to change the appearance.

import { Skeleton } from "stylus-ui/Skeleton";

export default () => <Skeleton theme="dark" className="h-20 w-full" />;

Complex layouts

You can create more complex loading states by combining multiple <Skeleton> components with Tailwind styles via the className prop.

import { Skeleton } from "stylus-ui/Skeleton";

export default () => (
  <div className="w-52 space-y-4 rounded-lg border p-4">
    <Skeleton className="h-32 w-full rounded-md" />
    <div className="space-y-2">
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-4 w-1/2" />
    </div>
    <Skeleton className="h-8 w-32 rounded-full" />
  </div>
);

API Reference

Skeleton

Inherits properties from HTMLElement.

Prop	Type	Default
className	string
theme	"light""dark"	"light"