Components

Skeleton

A placeholder shape for loading states.

Skeleton renders a muted, pulsing block. Use it to reserve space while data is loading.

Installation

Terminal

pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/skeleton.json

typescript

import { Skeleton } from "@/components/ui/skeleton";

export default function Example() {
  return <Skeleton className="h-4 w-48" />;
}

The Skeleton accepts all props of a native <div> element. Control the size and shape with className.

Last updated on

Sidebar

A composable sidebar system with collapsible modes and a trigger.

Slider

A range slider for selecting a value.