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

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

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

export default function SkeletonDemo() {
return (

)
}

<br>
2.next js 13 with shadcn ui skeleton loading full rounded with line
```react


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

Blog

how to use skeleton loading next 13 with shadcn ui

Aaronn

See Also

Join Our Newsletter. No Spam, Only the good stuff.

Related