0

Skeleton

PreviousNext

Use to show a placeholder while content is loading.

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

export default function SkeletonDemo() {

Installation

bunx --bun shadcn@latest add @ondo-ui/skeleton

Usage

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

Examples

Avatar

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

export default 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 default function SkeletonText() {

Form

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

export default function SkeletonForm() {

Table

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

export default function SkeletonTable() {