Skeleton

Use to show a placeholder while content is loading.

Preview

Code

import Skeleton from '@dinui/react/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>
  )
}

Card

Preview

Code

import Skeleton from '@dinui/react/skeleton'

export default function SkeletonCard() {
  return (
    <div className="flex flex-col space-y-3">
      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add skeleton

   yarn

   yarn dlx @dinui/cli@latest add skeleton

   pnpm

   pnpm dlx @dinui/cli@latest add skeleton

   bun

   bunx @dinui/cli@latest add skeleton

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install tailwind-variants

   yarn

   yarn add tailwind-variants

   pnpm

   pnpm add tailwind-variants

   bun

   bun add tailwind-variants

3. Copy and paste the following code into your project

   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   
   const skeleton = tv({
     slots: {
       root: 'animate-pulse rounded-md bg-bg--muted',
     },
   })
   
   const Skeleton = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => {
     const { root } = skeleton()
   
     return <div {...props} ref={ref} className={root({ className: props.className })} />
   })
   Skeleton.displayName = 'Skeleton'
   
   export default Skeleton

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.