how to use skeleton loading next 13 with shadcn ui

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

how to use shadcn ui in next js 13

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

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 13 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>
  )
}

skeleton loading in next js 13 with shadcn ui

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>
  )
}