DEV Community

Cover image for how to use skeleton loading next 13 with shadcn ui
Aaronn
Aaronn

Posted on • Originally published at frontendshape.com

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


Enter fullscreen mode Exit fullscreen mode

or



npx shadcn-ui@latest add


Enter fullscreen mode Exit fullscreen mode
  1. 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>
  )
}


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

shadcn ui skeleton loading with gradient effect

See Also

πŸ‘‰Building a Next.js Hover-Activated Dropdown Menu with Shadcn UI
πŸ‘‰Next.js with Shadcn UI Product Cards Example
πŸ‘‰how to use icon in shadcn ui with next js 13
πŸ‘‰create responsive navbar in next 13 with shadcn ui
πŸ‘‰create footer section in next 13 with shadcn ui
πŸ‘‰Next.js Image File Upload and Preview with Shadcn UI
πŸ‘‰create sidebar in next 13 with shadcn ui
πŸ‘‰how to use skeleton loading next 13 with shadcn ui
πŸ‘‰next 13 with shadcn ui date picker example
πŸ‘‰next 13 with shadcn ui pagination example

Top comments (0)