Get Started
Input
Feedback
Display
Installation
i18n
import { Skeleton } from "@/components/ui/skeleton"
export function SkeletonDemo() {Installation#
pnpm dlx shadcn@latest add https://ui.tyap.me/r/styles/base/skeleton.jsonnpx shadcn@latest add https://ui.tyap.me/r/styles/base/skeleton.jsonyarn dlx shadcn@latest add https://ui.tyap.me/r/styles/base/skeleton.jsonbunx --bun shadcn@latest add https://ui.tyap.me/r/styles/base/skeleton.json
Copy and paste the following code into your project.
import { cn } from "@/lib/utils"
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="skeleton"
className={cn("animate-pulse", className)}
{...props}
/>
)
}
export { Skeleton }
Update the import paths to match your project setup.
Usage#
import { Skeleton } from "@/components/ui/skeleton"<Skeleton className="h-[20px] w-[100px] rounded-full" />Examples#
Avatar#
import { Skeleton } from "@/components/ui/skeleton"
export function SkeletonAvatar() {Card#
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
Text#
import { Skeleton } from "@/components/ui/skeleton"
export function SkeletonText() {Form#
import { Skeleton } from "@/components/ui/skeleton"
export function SkeletonForm() {Table#
import { Skeleton } from "@/components/ui/skeleton"
export function SkeletonTable() {RTL#
To enable RTL support in shadcn/ui, see the RTL configuration guide.
"use client"
import * as React from "react"