Skeleton

1import { Skeleton } from "@/components/ui/skeleton"23export function Example() {4  return (5    <div className="flex w-full max-w-sm items-start gap-3">6      <Skeleton className="size-10 shrink-0 rounded-full" />7      <div className="grid flex-1 gap-2 pt-0.5">8        <Skeleton className="h-3.5 w-36" />9        <Skeleton className="h-3 w-full" />10        <Skeleton className="h-3 w-4/5" />11      </div>12    </div>13  )14}

1import { Skeleton } from "@/components/ui/skeleton"23export function Example() {4  return (5    <div className="flex items-center gap-3">6      <Skeleton className="size-8 rounded-full" />7      <Skeleton className="size-10 rounded-full" />8      <Skeleton className="size-12 rounded-full" />9      <Skeleton className="size-14 rounded-full" />10    </div>11  )12}

1import {2  Card,3  CardContent,4  CardDescription,5  CardHeader,6  CardTitle,7} from "@/components/ui/card"8import { Skeleton } from "@/components/ui/skeleton"910export function Example() {11  return (12    <Card className="w-full max-w-sm border-0">13      <CardHeader>14        <CardTitle>15          <Skeleton className="h-4 w-32" />16        </CardTitle>17        <CardDescription>18          <Skeleton className="mt-1 h-3 w-48" />19        </CardDescription>20      </CardHeader>21      <CardContent className="grid gap-2">22        <Skeleton className="h-3 w-full" />23        <Skeleton className="h-3 w-5/6" />24        <Skeleton className="h-3 w-2/3" />25      </CardContent>26    </Card>27  )28}

1import { Skeleton } from "@/components/ui/skeleton"23export function Example() {4  return (5    <div className="grid w-full max-w-sm gap-3">6      <Skeleton className="h-5 w-40" />7      <div className="grid gap-2">8        <Skeleton className="h-3 w-full" />9        <Skeleton className="h-3 w-full" />10        <Skeleton className="h-3 w-[92%]" />11        <Skeleton className="h-3 w-[70%]" />12      </div>13    </div>14  )15}

1import { Skeleton } from "@/components/ui/skeleton"23export function Example() {4  return (5    <div className="grid w-full max-w-sm gap-5">6      <div className="grid gap-2">7        <Skeleton className="h-3 w-16" />8        <Skeleton className="h-9 w-full rounded-md" />9      </div>10      <div className="grid gap-2">11        <Skeleton className="h-3 w-20" />12        <Skeleton className="h-16 w-full rounded-md" />13      </div>14      <div className="flex justify-end gap-2">15        <Skeleton className="h-9 w-20 rounded-md" />16        <Skeleton className="h-9 w-24 rounded-md" />17      </div>18    </div>19  )20}

1import {2  Table,3  TableBody,4  TableCell,5  TableHead,6  TableHeader,7  TableRow,8} from "@/components/ui/table"9import { Skeleton } from "@/components/ui/skeleton"1011export function Example() {12  return (13    <div className="w-full">14      <Table>15        <TableHeader>16          <TableRow>17            <TableHead className="w-[100px]">Invoice</TableHead>18            <TableHead>Status</TableHead>19            <TableHead>Method</TableHead>20            <TableHead className="text-right">Amount</TableHead>21          </TableRow>22        </TableHeader>23        <TableBody>24          {Array.from({ length: 4 }).map((_, index) => (25            <TableRow key={index}>26              <TableCell>27                <Skeleton className="h-3.5 w-14" />28              </TableCell>29              <TableCell>30                <Skeleton className="h-3.5 w-16" />31              </TableCell>32              <TableCell>33                <Skeleton className="h-3.5 w-24" />34              </TableCell>35              <TableCell className="text-right">36                <Skeleton className="ml-auto h-3.5 w-12" />37              </TableCell>38            </TableRow>39          ))}40        </TableBody>41      </Table>42    </div>43  )44}