Skeleton

Name: Rad UI
Author: Rad UI Team

A loading placeholder that mimics the shape of content. When loading is false, it renders its children instead.

React
"use client"

import Skeleton from "@radui/ui/Skeleton"

const SkeletonExample = () => {
    return (
        <div className="flex flex-col gap-3 w-[280px]">
            <Skeleton loading={true} width="100%" height="16px" radius="4px" />
            <Skeleton loading={true} width="80%" height="16px" radius="4px" />
            <Skeleton loading={true} width="90%" height="16px" radius="4px" />
            <Skeleton loading={true} width="40px" height="40px" radius="50%" />
        </div>
    )
}

export default SkeletonExample

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Skeleton from "@radui/ui/Skeleton"

export default () => {
    return (
        <Skeleton loading={true} width="200px" height="20px" />
    )
}

Skeleton

A loading placeholder. Renders children when loading is false.

Prop	Type	Default
loading*	boolean	true
width*	string	--
height*	string	--
radius	string	""
customRootClass	string	""