ReUI
Getting Started

Skeleton

Used to show a placeholder while content is loading.

Installation

Install ReUI

Refer to the Installation Guide for detailed instructions on setting up ReUI dependencies in your project.

Add component

Copy and paste the following code into your project’s components/ui/skeleton.tsx file.

import * as React from 'react';
import { cn } from '@/lib/utils';

function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="skeleton"
      className={cn('animate-pulse rounded-md bg-accent', className)}
      {...props}
    />
  );
}

export { Skeleton };

Examples

Default

Loading

API Reference

This is a custom component that provides a loading placeholder animation effect.

Skeleton

PropTypeDefault
className string
PreviouseSheetNextSlider