Docs
Levitate

Levitate

Displays a levitate component.

Notifications

You have 3 unread messages.

CN

Installation

Install the shadcn/ui dependencies:

You need to install shadcn components, like this:

npx shadcn@latest add avatar card

Copy and paste the Levitate code into your project.

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
       keyframes: {
            levitate: {
                "0%": {
                    transform: "translateY(0)",
                },
                "30%": {
                    transform: "translateY(-10px)",
                },
                "50%": {
                    transform: "translateY(4px)",
                },
                "70%": {
                    transform: "translateY(-15px)",
                },
                "100%": {
                    transform: "translateY(0)",
                },
            },
        },
       animation: {
        levitate: "levitate 5s ease infinite",
      },
    },
  },
}
Fold CardReorder Card