Installation

Set up a React app with Tailwind CSS v4, then add Another UI components by URL.

Another UI works in any React app that uses Tailwind CSS v4. This page covers Next.js and Vite. Other React setups follow the same steps once Tailwind is in place.

Components are added with the CLI command shown on each page, pointed at the Another UI registry.

Create a project

Skip this step if you already have a React app with Tailwind CSS v4.

Next.js


pnpm create next-app@latest my-app --typescript --tailwind --eslint --app

Vite


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

For Vite, add the Tailwind plugin and an @ alias to 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"),
    },
  },
})

Then add the same alias to tsconfig.json and tsconfig.app.json:

tsconfig.json

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

Replace the contents of src/index.css with:

src/index.css

@import "tailwindcss";

Set up components.json

Run init once with the Radix base. It writes a components.json file that tells the CLI where your components, hooks and global CSS live, and adds the cn helper.


pnpm dlx shadcn@latest init --base radix

Another UI components are built on Radix. If you pick another base, the CLI rewrites some props (for example asChild) and the components won't type check. If you already ran init, make sure components.json has "style": "radix-nova".

Add a component

Add components by URL. The first one also brings in another-ui-styles, the shared Another UI stylesheet that every component depends on.


pnpm dlx shadcn@latest add https://anotherui.dev/r/button.json

Every component page shows its own command. The full list is in the registry index at anotherui.dev/r/registry.json.

Shared stylesheet

The first component you add also installs styles/another-ui.css (motion, button styles and surfaces) and adds an import for it to your global CSS. If your CSS file is not app/globals.css, add the import yourself, after Tailwind:

src/index.css

@import "tailwindcss";
@import "../styles/another-ui.css";

Sounds (optional)

Some components can play short interaction sounds through Cuelume. They are off by default. To turn them on, call this once on the client, for example from a settings toggle:

import { setSoundsEnabled } from "@/lib/sounds"
 
setSoundsEnabled(true)

The choice is saved in the browser, and setSoundsEnabled(false) turns them off again.

Use it

import { Button } from "@/components/ui/button"
 
export default function Page() {
  return <Button>Click me</Button>
}

Next steps

Browse the components and blocks.
Pick colors, radius and fonts in the theme editor, then copy the CSS into your global file. See Theming.
Add a theme toggle with Dark mode.

Introduction Theming

On This Page

Create a project Set up components.json Add a component Shared stylesheet Sounds (optional)Use it Next steps