Skip to content
1.5k

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 https://retroui.dev/r/base/skeleton.json

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

"use client"

import * as React from "react"