Implement Skeleton Loading in Next.js with shadcn/ui

In this tutorial, we will see how to use skeleton loading in next js with shadcn ui. First you need to setup next js with shadcn ui project.

Before use skeleton loading in next js 13 with shadcn ui you need to install npx shadcn-ui@latest add skeleton.

npx shadcn-ui@latest add skeleton
# or
npx shadcn-ui@latest add

1. Create next js 13 with shadcn ui skeleton loading using shadcn-ui Skeleton component.

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

export default function SkeletonDemo() {
  return (
    <Skeleton className="w-[100px] h-[20px] rounded-full" />
  )
}

2. Next js with shadcn ui skeleton loading full rounded with line.

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

export default function SkeletonDemo() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

3. Next js with shadcn ui skeleton loading with gradient effect.

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

export default function SkeletonDemo() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full bg-gradient-to-r from-purple-400 via-pink-500 to-red-500  animate-pulse" />

      <div className="space-y-2">
        <Skeleton className="h-4 w-40 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 rounded" />
        <Skeleton className="h-4 w-32 bg-gradient-to-r from-yellow-400 via-green-500 to-blue-500 rounded" />
      </div>
    </div>
  )
}

Aaronn