Installation

Get Ajax UI set up in your project using the CLI or manual installation.

Using the CLI (recommended)

The ajaxui CLI lets you add individual components straight into your project.

1. Install the CLI

Install it globally with your package manager of choice, or skip this step and use npx in the next step.

npm install -g ajaxui

pnpm add -g ajaxui

yarn global add ajaxui

2. Add a component

npx ajaxui add button

3. Import and use it

import { Button } from "@/components/ui/button"

export default function App() {
  return <Button>Click me</Button>
}

Manual installation

You can also install the package directly and import components from it.

Install the package

npm install @ajax-ui/react

pnpm add @ajax-ui/react

yarn add @ajax-ui/react

Add the Tailwind preset

// tailwind.config.ts
import type { Config } from "tailwindcss"
import ajaxPreset from "@ajax-ui/tailwind"

const config: Config = {
  presets: [ajaxPreset],
  content: ["./src/**/*.{ts,tsx}"],
}

export default config

Import global styles

import "@ajax-ui/tailwind/src/globals.css"

TypeScript

All components include full TypeScript definitions. No extra configuration required.

import type { ButtonProps } from "@ajax-ui/react/button"

function MyButton(props: ButtonProps) {
  // fully typed!
}