Skip to content
Aback UI

Installation

Vite

Set up Aback UI in a Vite React TypeScript app. Verified with the react-ts template on Vite 8, React 19, and Tailwind CSS v4.

  1. Create the app

    npx create-vite@latest my-app --template react-ts

    Then cd my-app and install dependencies with your package manager.

  2. Add Tailwind CSS

    npm install tailwindcss @tailwindcss/vite

    Replace everything in src/index.css with the Tailwind import. The template's starter styles would otherwise fight the Aback theme:

    src/index.csscss
    @import "tailwindcss";

  3. Add the @/ alias

    Installed components import @/components/ui and @/lib/utils, so the alias has to resolve in three places. The template splits TypeScript settings across files: add paths to tsconfig.json, which the CLI and editors read, and to tsconfig.app.json, which the build type-checks with.

    tsconfig.jsonjson
    {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
    tsconfig.app.jsonjson
    {
  "compilerOptions": {
    // ...keep the template's options
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

    Then teach Vite the same alias and add the Tailwind plugin:

    npm install -D @types/node
    vite.config.tsts
    import path from "node: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(import.meta.dirname, "./src"),
    },
  },
});

  4. Run init

    npx aback-ui@latest init

    init detects Vite, finds src/index.css, and adds the theme import after Tailwind. It writes src/lib/utils.ts, styles/aback.css, and aback-ui.json, and installs clsx and tailwind-merge.

    src/index.csscss
    @import "tailwindcss";
@import "../styles/aback.css";

  5. Add components

    npx aback-ui@latest add button dialog
    src/App.tsxtsx
    import { Button } from "@/components/ui/button";

export default function App() {
  return <Button>Save changes</Button>;
}

    Run npm run build to confirm the alias resolves in both TypeScript and Vite.

Add dark mode

npx aback-ui@latest add theme-toggle

A Vite app has no server-rendered layout, so apply the saved theme with an inline script in index.html, before your bundle loads. It is the same code ThemeScript renders, reading the default theme storage key that ThemeToggle writes:

index.htmlhtml
<head>
  <!-- ...the template's tags -->
  <script>
    (function(){try{var t=localStorage.getItem("theme");var d=t==="dark"||((!t||t==="system")&&window.matchMedia("(prefers-color-scheme: dark)").matches);document.documentElement.classList.toggle("dark",d);}catch(e){}})();
  </script>
</head>

Then render <ThemeToggle /> wherever you want the switch. The dark mode guide covers useTheme and custom labels.

If you set a Content Security Policy that blocks inline scripts, allow this one by hash, or leave it out: the app still works, and a visitor who chose dark sees the light theme until the bundle runs.

Where to next