Skeleton

Skeleton

A placeholder UI used to indicate that content is loading, improving perceived performance.

Storybook

Radix UI Docs

Source

Automatic Installation

This method is still working on progress, please use manual installation for now.

Manual Installation

Install dependencies

npm install radix-ui

Copy the code

components/skeleton/skeleton.tsx

import { Slot } from 'radix-ui'
import * as React from 'react'
import { type SkeletonStyles, skeletonStyles } from './skeleton.css'
 
interface SkeletonProps extends React.ComponentPropsWithoutRef<'div'>, SkeletonStyles {
  asChild?: boolean
}
 
const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
  ({ className, asChild = false, ...props }: SkeletonProps, forwardedRef) => {
    const Comp = asChild ? Slot.Root : 'div'
    return <Comp ref={forwardedRef} className={skeletonStyles({ className })} {...props} />
  }
)
 
Skeleton.displayName = 'Skeleton'
 
export { Skeleton, type SkeletonProps }

Usage

Imports

import { Skeleton } from '#/components/skeleton'

Example

Browse the Storybook for more examples.