how to use skeleton loading next 13 with shadcn ui
Tags: nextjs, webdev, tailwindcss, shadcnui
Published: 2024-03-18 17:34:09

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](https://frontendshape.com/post/how-to-use-shadcn-ui-in-next-js-13)
<br>
Before use skeleton loading in next js 13 with shadcn ui you need to install npx shadcn-ui@latest add skeleton.
```react
npx shadcn-ui@latest add skeleton
```
or
```react
npx shadcn-ui@latest add
```
<br>
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 (
    <Skeleton className="w-[100px] h-[20px] rounded-full" />
  )
}
```
<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>
  )
}
```
![skeleton loading in next js 13 with shadcn ui](https://frontendshape.com/storage/canvas/images/LSgrSWPrZJ7Tr8D4tra2rtWeNjPCrsGypasQDfuW.png)

3.Next js with shadcn ui skeleton loading with gradient effect.
```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 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>
  )
}
```
![shadcn ui skeleton loading with gradient effect](https://frontendshape.com/storage/canvas/images/DSrvdrKca6mjvpdHQRRhZG1pC51z4qHrc0tKqMUw.png)

## See Also
&#x1F449;[Building a Next.js Hover-Activated Dropdown Menu with Shadcn UI](https://frontendshape.com/post/building-a-nextjs-hover-activated-dropdown-menu-with-shadcn-ui)
&#x1F449;[Next.js with Shadcn UI Product Cards Example](https://frontendshape.com/post/nextjs-with-shadcn-ui-product-cards-example)
&#x1F449;[how to use icon in shadcn ui with next js 13](https://frontendshape.com/post/how-to-use-icon-in-shadcn-ui-with-next-js-13)
&#x1F449;[create responsive navbar in next 13 with shadcn ui](https://frontendshape.com/post/create-responsive-navbar-in-next-13-with-shadcn-ui)
&#x1F449;[create footer section in next 13 with shadcn ui](https://frontendshape.com/post/create-footer-section-in-next-13-with-shadcn-ui)
&#x1F449;[Next.js Image File Upload and Preview with Shadcn UI](https://frontendshape.com/post/nextjs-image-file-upload-and-preview-with-shadcn-ui)
&#x1F449;[create sidebar in next 13 with shadcn ui](https://frontendshape.com/post/create-sidebar-in-next-13-with-shadcn-ui)
&#x1F449;[how to use skeleton loading next 13 with shadcn ui](https://frontendshape.com/post/how-to-use-skeleton-loading-next-13-with-shadcn-ui)
&#x1F449;[next 13 with shadcn ui date picker example](https://frontendshape.com/post/next-13-with-shadcn-ui-date-picker-example)
&#x1F449;[next 13 with shadcn ui pagination example](https://frontendshape.com/post/next-13-with-shadcn-ui-pagination-example)