LogoBaseStack
GuideComponents

Skeleton

Use to show a placeholder while content is loading.

Code

Demo

import { Skeleton } from '@workspace/ui/components/Skeleton'

export function SkeletonDemo() {
    return (
        <div className="flex items-center space-x-4">
            <Skeleton className="size-12 rounded-full" />
            <div className="space-y-2">
                <Skeleton className="h-4 w-[250px]" />
                <Skeleton className="h-4 w-[200px]" />
            </div>
        </div>
    )
}

Examples

Skeleton screen

Below is an example of a general-purpose skeleton used to represent a full screen layout while loading. Although this version works for many use cases, consider creating page-specific skeletons for a more accurate loading experience.

import { Skeleton } from '@workspace/ui/components/Skeleton'

export function SkeletonScreen() {
    return (
        <div className="w-full">
            <div className="space-y-3 mb-8">
                <Skeleton className="h-7 w-5/12" />
                <Skeleton className="h-7 w-7/12" />
            </div>
            <div className="space-y-2 mb-6">
                <Skeleton className="h-4 w-10/12" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-9/12" />
            </div>
            <div className="space-y-2 mb-6">
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-8/12" />
            </div>
        </div>
    )
}