Skeleton | Cortexcn

Installation

pnpm dlx shadcn@latest add @cortexcn/skeleton

pnpm dlx shadcn@latest add @cortexcn/skeleton

Usage

import { Skeleton } from "@/components/skeleton";

Examples

Avatar

import { Skeleton } from "@/components/skeleton"

export function SkeletonAvatar() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex w-full items-center gap-4">
        <Skeleton className="size-10 shrink-0 rounded-full" />
        <div className="grid gap-2">
          <Skeleton className="h-4 w-[150px]" />
          <Skeleton className="h-4 w-[100px]" />
        </div>
      </div>
    </div>
  )
}

import { Skeleton } from "@/components/skeleton"export function SkeletonAvatar() {  return (    <div className="flex flex-col gap-6">      <div className="flex w-full items-center gap-4">        <Skeleton className="size-10 shrink-0 rounded-full" />        <div className="grid gap-2">          <Skeleton className="h-4 w-[150px]" />          <Skeleton className="h-4 w-[100px]" />        </div>      </div>    </div>  )}

Card

import { Card, CardContent, CardHeader } from "@/components/card"
import { Skeleton } from "@/components/skeleton"

export function SkeletonCard() {
  return (
    <div className="flex flex-col gap-6">
      <Card className="w-full">
        <CardHeader>
          <Skeleton className="h-4 w-2/3" />
          <Skeleton className="h-4 w-1/2" />
        </CardHeader>
        <CardContent>
          <Skeleton className="aspect-square w-full" />
        </CardContent>
      </Card>
    </div>
  )
}

import { Card, CardContent, CardHeader } from "@/components/card"import { Skeleton } from "@/components/skeleton"export function SkeletonCard() {  return (    <div className="flex flex-col gap-6">      <Card className="w-full">        <CardHeader>          <Skeleton className="h-4 w-2/3" />          <Skeleton className="h-4 w-1/2" />        </CardHeader>        <CardContent>          <Skeleton className="aspect-square w-full" />        </CardContent>      </Card>    </div>  )}

Text

import { Skeleton } from "@/components/skeleton"

export function SkeletonText() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex w-full flex-col gap-2">
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-3/4" />
      </div>
    </div>
  )
}

import { Skeleton } from "@/components/skeleton"export function SkeletonText() {  return (    <div className="flex flex-col gap-6">      <div className="flex w-full flex-col gap-2">        <Skeleton className="h-4 w-full" />        <Skeleton className="h-4 w-full" />        <Skeleton className="h-4 w-3/4" />      </div>    </div>  )}

Form

import { Skeleton } from "@/components/skeleton"

export function SkeletonForm() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex w-full flex-col gap-7">
        <div className="flex flex-col gap-3">
          <Skeleton className="h-4 w-20" />
          <Skeleton className="h-10 w-full" />
        </div>
        <div className="flex flex-col gap-3">
          <Skeleton className="h-4 w-24" />
          <Skeleton className="h-10 w-full" />
        </div>
        <Skeleton className="h-9 w-24" />
      </div>
    </div>
  )
}

import { Skeleton } from "@/components/skeleton"export function SkeletonForm() {  return (    <div className="flex flex-col gap-6">      <div className="flex w-full flex-col gap-7">        <div className="flex flex-col gap-3">          <Skeleton className="h-4 w-20" />          <Skeleton className="h-10 w-full" />        </div>        <div className="flex flex-col gap-3">          <Skeleton className="h-4 w-24" />          <Skeleton className="h-10 w-full" />        </div>        <Skeleton className="h-9 w-24" />      </div>    </div>  )}

Table

import { Skeleton } from "@/components/skeleton"

export function SkeletonTable() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex w-full flex-col gap-2">
        <div className="flex gap-4">
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 w-24" />
          <Skeleton className="h-4 w-20" />
        </div>
        <div className="flex gap-4">
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 w-24" />
          <Skeleton className="h-4 w-20" />
        </div>
        <div className="flex gap-4">
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 w-24" />
          <Skeleton className="h-4 w-20" />
        </div>
      </div>
    </div>
  )
}

import { Skeleton } from "@/components/skeleton"export function SkeletonTable() {  return (    <div className="flex flex-col gap-6">      <div className="flex w-full flex-col gap-2">        <div className="flex gap-4">          <Skeleton className="h-4 flex-1" />          <Skeleton className="h-4 w-24" />          <Skeleton className="h-4 w-20" />        </div>        <div className="flex gap-4">          <Skeleton className="h-4 flex-1" />          <Skeleton className="h-4 w-24" />          <Skeleton className="h-4 w-20" />        </div>        <div className="flex gap-4">          <Skeleton className="h-4 flex-1" />          <Skeleton className="h-4 w-24" />          <Skeleton className="h-4 w-20" />        </div>      </div>    </div>  )}

Adapted from the shadcn/ui Skeleton (MIT).