Components

Skeleton

Use to show a placeholder while content is loading.

Installation

CLI

npx shadcn@latest add https://exawizards.com/exabase/design/registry/skeleton.json

Manual

import { cn } from "@/lib/utils"

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }

Usage

import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="h-[20px] w-[100px] rounded-full" />

API

<Skeleton> renders as a <div> element.

Sidebar

A composable, themeable and customizable sidebar component.

Slider

An input where the user selects a value from within a given range.

On this page

InstallationCLIManualUsageAPI