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

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

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

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