Getting started

Installation

AtroUI is a pnpm monorepo. Run the docs locally, or import atroui from a Next.js app in the workspace.

Clone & install

bash

git clone <your-repo-url> atroui
cd atroui
pnpm install

Run the docs

bash

pnpm dev

Opens the landing page and catalog at http://localhost:3000.

Use in an app

Import components and the global stylesheet. Wrap the tree with ThemeProvider and load Outfit (see root layout in docs).

tsx

import { Button, ThemeProvider } from "atroui"
import "atroui/globals.css"

export function Example({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <Button>Click me</Button>
      {children}
    </ThemeProvider>
  )
}

Tailwind v4 is configured inside atroui/globals.css. Host apps only need to import that CSS and scan their own source files. See Theming.

Host-bound tools

OG workspace, thumbnail generator, scope chat, contact, and similar tools call host /api/* routes. They render in the catalog but need those APIs (and env) in a real app. Marked Host API in the sidebar.