A
Aether UI

CLI

One command adds a production-quality component directly to your codebase. The aether-ui CLI installs components, generates full pages from natural-language prompts, and keeps everything up to date — all without a runtime library to maintain.

Open code, not a dependency

Unlike traditional component libraries, Aether UI copies component source files into your project via the CLI. You get full transparency, full control, and zero API lock-in. Update components by running the CLI again — or just edit them directly.

Installation

No global install required. Run the CLI directly with npx:

terminal
npx aether-ui@latest init

Or install globally to use the shorter aether-ui command:

terminal
npm install -g aether-ui
# or
pnpm add -g aether-ui

Commands

aether-ui init

Initialize Aether UI in a project. Creates aether.json, installs shared dependencies, and sets up the utility function.

Options

--cwd <path>Working directory. Defaults to the current directory.
--yes, -ySkip confirmation prompts and use defaults.
--defaults, -dUse default configuration values without prompting.
--force, -fForce overwrite of existing configuration.
aether-ui add [components...]

Add one or more components to your project. Copies component source files into your configured components directory.

Arguments

componentsOne or more component names to add. Runs interactive selection if omitted.

Options

--allAdd all available components.
--path <path>Custom path to write the component files.
--overwriteOverwrite existing component files without prompting.
--cwd <path>Working directory. Defaults to the current directory.
--yes, -ySkip confirmation prompts.
aether-ui diff [component]

Show the diff between your local component and the latest registry version. Useful for seeing what changed after an upstream update.

Arguments

componentComponent name to diff. Shows all components with changes if omitted.

Options

--yes, -ySkip confirmation prompts.
--cwd <path>Working directory. Defaults to the current directory.
aether-ui update [components...]

Update components to their latest registry versions. Runs diff first to show changes.

Arguments

componentsComponents to update. Updates all installed components if omitted.

Options

--allUpdate all installed components.
--yes, -ySkip confirmation and overwrite automatically.
--cwd <path>Working directory. Defaults to the current directory.
aether-ui list

List all available components in the Aether UI registry.

Options

--installedOnly show components already installed in the project.
--category <name>Filter by category (primitives, patterns, blocks).
aether-ui generate "<prompt>"

Generate a starter page or feature scaffold from a natural-language prompt. Installs the required components and writes a page.tsx with the composition wired together.

Arguments

prompt*Natural-language description of the UI to generate.

Options

--cwd <path>Working directory. Defaults to the current directory.

Generate examples

terminal
# SaaS dashboard with charts and activity feed
npx aether-ui generate "a dashboard page with a stat strip, recent activity feed, and data table"

# AI chat interface
npx aether-ui generate "an AI chat layout with a sidebar for conversations and a streaming message thread"

# Marketing landing page
npx aether-ui generate "a landing page with a hero section, feature grid, and pricing table"

The CLI installs required components, then writes a page.tsx with all components composed and ready to customise.

Configuration — aether.json

Running aether-ui init creates an aether.json file at your project root. All CLI commands read from this file.

aether.json
{
  "$schema": "https://aether-ui.dev/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}
KeyTypeDescription
style"default" | "new-york"Visual style variant for components.
rscbooleanEnable React Server Component support. Adds "use client" directives where needed.
tsxbooleanUse TypeScript (.tsx) or JavaScript (.jsx) for component files.
tailwind.configstringPath to your Tailwind CSS config file.
tailwind.cssstringPath to the CSS file where global styles and tokens are imported.
tailwind.baseColorstringBase color palette used for generated CSS variables.
tailwind.cssVariablesbooleanUse CSS variables (true) or Tailwind utility classes (false) for theming.
tailwind.prefixstringTailwind class prefix, e.g. "tw-". Leave empty for no prefix.
aliases.componentsstringImport alias for your components directory.
aliases.utilsstringImport alias for the cn utility function.
aliases.uistringImport alias for Aether UI component files.

Common workflows

Set up a new project

terminal
# 1. Create your app (Next.js example)
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app

# 2. Initialize Aether UI
npx aether-ui@latest init

# 3. Add your first component
npx aether-ui add button

Add multiple components at once

terminal
npx aether-ui add button input label badge card
# or interactively (omit component names)
npx aether-ui add

Check for upstream updates

terminal
# See what changed in the registry vs. your local files
npx aether-ui diff

# Update specific components
npx aether-ui update button card

# Update everything
npx aether-ui update --all

Use a custom component path

terminal
# Write components to a custom directory
npx aether-ui add button --path src/design-system/ui

Monorepo support

Using Aether UI inside a pnpm or npm workspace? Pass the --cwd flag to point the CLI at the app where you want components installed:

terminal
# Add a component to a specific workspace app
npx aether-ui add button --cwd apps/web

# Initialize in a specific workspace app
npx aether-ui init --cwd apps/web