Pro

Vite

PreviousNext

Install and configure Jolocky kinetic sections in a React and Vite single-page application using Tailwind CSS.

Vite delivers an ultra-fast local development server and bundle optimization for client-side single page applications. Follow this guide to configure Vite with Tailwind CSS and Jolocky sections.

1. Create a Vite Project

Initialize a new Vite project using the React and TypeScript template:

pnpm create vite@latest my-app -- --template react-ts
cd my-app
npm install

2. Install Tailwind CSS and Vite Plugin

Install Tailwind CSS alongside its official Vite plugin:

pnpm add tailwindcss @tailwindcss/vite

Configure @tailwindcss/vite in your vite.config.ts:

vite.config.ts
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

3. Install Motion and Utilities

Install motion libraries and class name merge utilities:

pnpm add motion lenis lucide-react clsx tailwind-merge

Import Tailwind in src/index.css:

src/index.css
@import "tailwindcss";

4. Initialize Project Configuration

Initialize shadcn compatibility:

pnpm dlx shadcn@latest init

5. Add a Jolocky Section

Install any section from the registry:

pnpm dlx shadcn@latest add https://jolocky.com/r/aurora-drift

Render the component inside src/App.tsx:

src/App.tsx
import { AuroraDriftFooter } from "@/components/footers/aurora-drift"
 
export default function App() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <AuroraDriftFooter />
    </div>
  )
}