Skeleton

Skeleton placeholder

import { Skeleton } from '@/components/ui/skeleton'

...

import { Skeleton } from '@/components/ui/skeleton'

export default function SkeletonDemoExample() {
  return <div class="flex items-center gap-4"><Skeleton class="size-12 rounded-full" /><div class="grid gap-2"><Skeleton class="h-4 w-[250px]" /><Skeleton class="h-4 w-[200px]" /></div></div>
}

Installation

npx @fictjs/shadcn@latest add skeleton

Copy the Fict shadcn component into your project.

Source

components/ui/skeleton.tsx

src/components/ui/skeleton.tsx

import { cn } from '@/lib/cn'

type SkeletonProps = JSX.IntrinsicElements['div']

export function Skeleton(props: SkeletonProps) {
  const { class: className, ...rest } = props
  return (
    <div
      aria-hidden='true'
      data-slot='skeleton'
      class={cn('animate-pulse rounded-md bg-muted', className)}
      {...rest}
    />
  )
}

Usage

Examples

Avatar

import { Skeleton } from '@/components/ui/skeleton'

...

import { Skeleton } from '@/components/ui/skeleton'

export default function SkeletonAvatarExample() {
  return <div class="flex items-center gap-4"><Skeleton class="size-10 rounded-full" /><div class="grid gap-2"><Skeleton class="h-4 w-[150px]" /><Skeleton class="h-4 w-[100px]" /></div></div>
}

Card

import { Skeleton } from '@/components/ui/skeleton'

...

import { Skeleton } from '@/components/ui/skeleton'

export default function SkeletonCardExample() {
  return <div class="grid w-80 gap-4 rounded-lg border p-4"><header class="grid gap-2"><Skeleton class="h-4 w-48" /><Skeleton class="h-4 w-36" /></header><Skeleton class="aspect-video w-72" /></div>
}

Text

import { Skeleton } from '@/components/ui/skeleton'

...

import { Skeleton } from '@/components/ui/skeleton'

export default function SkeletonTextExample() {
  return <div class="grid gap-2"><Skeleton class="h-4 w-80" /><Skeleton class="h-4 w-80" /><Skeleton class="h-4 w-60" /></div>
}

Form

import { Skeleton } from '@/components/ui/skeleton'

...

import { Skeleton } from '@/components/ui/skeleton'

export default function SkeletonFormExample() {
  return <div class="grid gap-4"><div class="grid gap-2"><Skeleton class="h-4 w-20" /><Skeleton class="h-9 w-80" /></div><div class="grid gap-2"><Skeleton class="h-4 w-24" /><Skeleton class="h-9 w-80" /></div><Skeleton class="h-9 w-24" /></div>
}

Table

import { Skeleton } from '@/components/ui/skeleton'

...

import { Skeleton } from '@/components/ui/skeleton'

export default function SkeletonTableExample() {
  return <div class="grid w-96 gap-3">{Array.from({ length: 5 }, () => <div class="grid grid-cols-[1fr_6rem_5rem] gap-4"><Skeleton class="h-4 w-full" /><Skeleton class="h-4 w-24" /><Skeleton class="h-4 w-20" /></div>)}</div>
}

Rtl

import { Skeleton } from '@/components/ui/skeleton'

...

import { Skeleton } from '@/components/ui/skeleton'

const directions = { ar: 'rtl', he: 'rtl', en: 'ltr' } as const

export default function SkeletonRtlExample() {
  let language = $state<keyof typeof directions>('ar')
  return <div class="grid gap-4"><select value={language} onChange={event => { language = event.currentTarget.value as keyof typeof directions }}><option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option></select><div class="flex items-center gap-4" dir={directions[language]}><Skeleton class="size-12 rounded-full" /><div class="grid gap-2"><Skeleton class="h-4 w-[250px]" /><Skeleton class="h-4 w-[200px]" /></div></div></div>
}

Sidebar Slider