uix-uiSkeleton
Loading placeholder. 4 types.
import { Skeleton } from "@/components/ui/skeleton";
export default function Example() {
return (
<div style={{ width: 320, display: "flex", gap: 12, alignItems: "center" }}>
<Skeleton type="avatar" />
<div style={{ flex: 1, display: "grid", gap: 8 }}>
<Skeleton type="text" />
<Skeleton type="text" style={{ width: "60%" }} />
</div>
</div>
);
}
Installation
$ npx uix-ui@latest add skeletonThis copies the file into components/ui/skeleton.tsx in your project. npx shadcn@latest add @uix/skeleton works too.
Usage
import { Skeleton } from "@/components/ui/skeleton";
<div style={{ width: 320, display: "flex", gap: 12, alignItems: "center" }}>
<Skeleton type="avatar" />
<div style={{ flex: 1, display: "grid", gap: 8 }}>
<Skeleton type="text" />
<Skeleton type="text" style={{ width: "60%" }} />
</div>
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "block" | "text" | "avatar" | "card" | "list-item" | "block" | "block" is a bare placeholder you size with className; the others are ready-made layouts. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts