Skeleton

Use to show a placeholder while content is loading.

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

export function SkeletonDemo() {

Installation


pnpm dlx shadcn@latest add skeleton

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

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

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

export function SkeletonAvatar() {

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

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

export function SkeletonText() {

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

export function SkeletonForm() {

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

export function SkeletonTable() {

To enable RTL support in StyleDriven UI, see the RTL configuration guide.

"use client"

import * as React from "react"

On This Page

Deploy your StyleDriven UI app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.