Skeleton

Use to show a placeholder while content is loading.

@react.component
let make = () =>
  <div className="flex items-center gap-4">

Installation

npx shadcn@latest add @rescript-shadcn/Skeleton

Usage

<Skeleton className="h-[20px] w-[100px] rounded-full" />

Examples

Avatar

@react.component
let make = () =>
  <div className="flex w-fit items-center gap-4">

Card

@react.component
let make = () =>
  <Card className="w-full max-w-xs">

Text

@react.component
let make = () =>
  <div className="flex w-full max-w-xs flex-col gap-2">

Form

@react.component
let make = () =>
  <div className="flex w-full max-w-xs flex-col gap-7">

Table

@react.component
let make = () =>
  <div className="flex w-full max-w-sm flex-col gap-2">