Better UIBetter UI
Manual

Manual

Learn how to install and integrate Better UI Library in your project.

Install and configure your project

Add dependencies to your project manually.

If your project doesn’t have Tailwind CSS, install it, otherwise skip this step.

Configure Tailwind CSS

Install Tailwind CSS

Terminal
pnpm install -D tailwindcss postcss autoprefixer
# Or
npm install -D tailwindcss postcss autoprefixer
# Or
bun add -D tailwindcss postcss autoprefixer
# Or
yarn add -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS

Terminal
pnpm dlx tailwindcss init -p
# Or
npx tailwindcss init -p
# Or
yarn tailwindcss init -p
# Or
bunx --bun tailwindcss init -p

Configure Tailwind CSS tailwind.config.ts

tailwind.config.ts
import type { Config } from "tailwindcss";
 
export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

Add the Tailwind directives to your CSS app/globals.css

globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Start the development server

Terminal
pnpm dev
# Or
npm run dev
# Or
bun dev
# Or
yarn dev

Start using Tailwind CSS page.tsx

page.tsx
export default function Home() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}

If your project doesn’t have Framer motion, install it, otherwise skip this step.

Install Framer motion

Terminal
pnpm add motion
# Or
npm install motion
# Or
bun add motion
# Or
yarn add motion

Features can now be used in your project via the motion/react.

page.tsx
import { motion } from "motion/react";
 
export default function Home() {
  return <motion.div>Hello world!</motion.div>;
}

Previous

Vite

Next

Explosion Text

On this page