Void UI works with React and Next.js projects. Make sure you have Node.js installed before getting started.

npx create-next-app@latest my-app
cd my-app
npm run dev

Void UI uses Tailwind CSS for styling. Install it in your project:

npm install tailwindcss @tailwindcss/postcss postcss

Add this to postcss.config.mjs:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

And make sure app/globals.css contains:

@import "tailwindcss";

Void UI uses Motion for animations and interactive components.

npm install motion

Import Motion like this:

"use client";

import { motion } from "motion/react";

You don't need advanced JavaScript to use Void UI. Basic knowledge of these concepts is enough:

• • Variables — const and let
• • Functions
• • Arrays and objects
• • JSX
• • React components and props
• • React state

After installing Motion, you can create an animated component:

"use client";

import { motion } from "motion/react";

export default function Example() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="rounded-xl bg-white p-6 text-black"
    >
      Hello from Void UI
    </motion.div>
  );
}

Once your project is ready:

1. 1. Generate a component with a prompt.
2. 2. Copy the generated code.
3. 3. Install any dependencies it requires.
4. 4. Add the component to your project.
5. 5. Customize it however you want.

If a generated component uses Motion or React hooks, add"use client"at the top of the component.

"use client";

import { motion } from "motion/react";