Better UIBetter UI

Vite

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

Install and configure Vite


Create a new Vite Project

Terminal
pnpm create vite@latest my-vite-app -- --template react
# Or
npm create vite@latest my-vite-app
# Or
bun create-vite@latest my-vite-app
# Or
yarn create vite@latest my-vite-app

Install dependencies

Terminal
cd my-vite-app
 
pnpm install
# Or
npm install
# Or
bun install
# Or
yarn install

Start the development server

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

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

Install and 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 --ts -p
# Or
npx tailwindcss init --ts -p
# Or
yarn tailwindcss init --ts -p
# Or
bunx --bun tailwindcss init --ts -p

Configure Tailwind CSS

tailwind.config.ts
import type { Config } from "tailwindcss";
 
export default {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

Add the Tailwind directives to your CSS src/index.css

index.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

_index.tsx
export default function App() {
  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>;
}