Dots

Skeleton

PreviousNext

Use to show a placeholder while content is loading.

Loading profile
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonDemo() {

Installation

pnpm dlx shadcn@latest add @dots/skeleton

Usage

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

Avatar

Loading profile
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonAvatar() {

Card

Loading card
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

Text

Loading text
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonText() {

Form

Loading form
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonForm() {

Table

Loading table
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonTable() {