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 DWL Components, see the RTL configuration guide.

"use client"

import * as React from "react"

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.