Mcoli UI - MC Skeleton

Overview

mc-skeleton is a lightweight loading placeholder for content that is still being fetched or rendered. It uses a simple animated surface so you can reserve layout space without showing final content too early.

The component supports direct sizing through width and height, plus a rectangle flag for switching between rounded and rectangular shapes.

Preview

import { McSkeleton } from '../ui/mc-skeleton';export default function McSkeletonDemo() {  return (    <div className="p-6">      <div className="w-full max-w-sm space-y-4">        {Array.from({ length: 3 }).map((_, i) => (          <div key={i} className="flex gap-3">            <McSkeleton width={48} height={48} rectangle={false} />            <div className="flex-1 space-y-2">              <McSkeleton height={16} width={192} rectangle />              <McSkeleton height={12} width={256} rectangle />              <McSkeleton height={12} width={170} rectangle />            </div>          </div>        ))}      </div>    </div>  );}

Add to Your Project

Deploy mc-skeleton directly into your components/ui folder:

npx mcoli-ui@latest add mc-skeleton

pnpm dlx mcoli-ui@latest add mc-skeleton

yarn dlx mcoli-ui@latest add mc-skeleton

bunx mcoli-ui@latest add mc-skeleton

Manual Setup

If you prefer manual installation:

Copy component source

import { cn } from '@/lib/utils';type McSkeletonProps = {  width?: number;  height?: number;  rectangle?: boolean;} & React.ComponentProps<'div'>;function McSkeleton({ className, rectangle, width, height, ...props }: McSkeletonProps) {  return (    <div      data-slot="skeleton"      style={{        width,        height,        ...(height === width ? { marginRight: 16 } : { marginBottom: 8 }),      }}      className={cn('animate-pulse bg-muted', rectangle ? 'rounded-md' : 'rounded-full', className)}      {...props}    />  );}export { McSkeleton };

Adjust utility imports

Ensure @/lib/utils (or your local classname helper) is correctly mapped.

Usage

import { McSkeleton } from '@/components/ui/mc-skeleton';

export default function Example() {
  return <McSkeleton width={160} height={16} rectangle />;
}

Examples

Text Placeholder

<McSkeleton width={240} height={16} />

Avatar Placeholder

<McSkeleton width={48} height={48} className="rounded-full" />

Card Image Placeholder

<McSkeleton width="100%" height={180} rectangle />

API Reference

Props

Prop	Type	Default	Description
`width`	`number`	`undefined`	Inline width passed to the skeleton container.
`height`	`number`	`undefined`	Inline height passed to the skeleton container.
`rectangle`	`boolean`	`false`	Uses a rectangular shape instead of the default rounded pill.
`className`	`string`	`undefined`	Additional Tailwind classes.

All other props from React.ComponentProps<'div'> are supported.

MC Skeleton

On this page