Pro

Vite

PreviousNext

Install Jolocky footers in a React and Vite single-page application with the shadcn CLI.

Follow this guide to prepare a React + Vite project for the shadcn CLI and add a Jolocky footer.

1. Create a Vite Project

Skip this step if you already have a React + TypeScript Vite project:

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

2. Add Tailwind CSS

The shadcn CLI setup requires Tailwind CSS. Install it with its Vite plugin:

pnpm add tailwindcss @tailwindcss/vite

Replace the contents of src/index.css with:

src/index.css
@import "tailwindcss";

3. Add an Import Alias

Add the @/* alias to both tsconfig.json and tsconfig.app.json, keeping their existing settings:

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Install Node types so vite.config.ts can use path:

pnpm add -D @types/node

Then configure the plugin and alias in 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"),
    },
  },
})

4. Initialize the shadcn CLI

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

The files are written to src/components/footers/aurora-drift/. For Pro items, see CLI for how to pass your license key.

Render the footer in src/App.tsx:

src/App.tsx
import { AuroraDriftFooter } from "@/components/footers/aurora-drift"
 
export default function App() {
  return (
    <>
      <main style={{ minHeight: "100vh" }}>{/* Your app */}</main>
      <AuroraDriftFooter />
    </>
  )
}

The "use client" line at the top of the footer files is a React Server Components directive used by Next.js. A Vite app does not need it; you can leave it in place or remove it.