Installation

Create project

Run the init command to create a new AxionJS project or to setup an existing one:

npx axionjs-ui init

The CLI will guide you through the setup process with beautiful interactive prompts built with Clack:

$ npx axionjs-ui init
 
┌  Welcome to axion.js CLI
✓ Preflight checks.
✓ Validating Tailwind CSS.
✓ Validating import alias.
◇ Select a color category:
│ Creative
│
◇ Select a theme:
│ Sunset Orange
│
◇ components.json written successfully.
✓ Checking registry.
✓ Updating tailwind.config.js
✓ Updating CSS variables in src\app\globals.css
✓ Installing dependencies.
✓ Created 1 file:
 
Success! Project initialization completed.
You may now add components.

Choose between a standard project or a Monorepo setup.

Add Components

You can now start adding components to your project.

npx axionjs-ui add button

Interactive Component Selection

You can also browse and select multiple components interactively:

$ npx axionjs-ui add
┌
◇ Which components would you like to add?
│
│ Hint: Space to select. A to toggle all. Enter to submit.
│ │ chart
✓ Checking registry.
✓ Updating CSS variables in src\app\globals.css
✓ Installing dependencies.
✓ Created 1 file:
  - src\components\ui\chart.jsx

Adding Individual Components

$ npx axionjs-ui add button
✓ Checking registry.
✓ Updating CSS variables in src\app\globals.css
✓ Installing dependencies.
✓ Created 1 file:
  - src\components\ui\button.jsx

The command above will add the Button component to your project. You can then import it like this:

src/App.tsx

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

Full-Stack Components

AxionJS excels at providing complete, production-ready solutions. Here’s what happens when you add a full-stack component like a contact form:

$ npx axionjs-ui add contact-form
✓ Checking registry.
✓ Updating CSS variables in src\app\globals.css
✓ Installing dependencies.
✓ Prisma initialized successfully.
Model for contact-form appended to schema.prisma.
│
◇ The file button.tsx already exists. Would you like to overwrite?
│ No
│
◇ The file input.tsx already exists. Would you like to overwrite?
│ No
│
◇ The file label.tsx already exists. Would you like to overwrite?
│ No
│
◇ The file card.tsx already exists. Would you like to overwrite?
│ No
│
◇ The file use-toast.tsx already exists. Would you like to overwrite?
│ No
│
◇ The file toast.tsx already exists. Would you like to overwrite?
│ No
│
✓ Created 14 files:
  - src\actions\contact-actions.js
  - src\lib\db.js
  - src\hooks\use-contact-form.js
  - src\hooks\use-message-list.js
  - src\components\contact-form.jsx
  - src\components\message-list.jsx
  - src\app\(contact-form)\admin\page.jsx
  - src\app\(contact-form)\admin\messages\page.jsx
  - src\app\(contact-form)\admin\layout.jsx
  - src\components\ui\textarea.jsx
  - src\components\ui\dropdown-menu.jsx
  - src\components\ui\tabs.jsx
  - src\components\ui\badge.jsx
  - src\components\ui\toaster.jsx
 
ⓘ Skipped 7 files:
  - src\components\ui\button.jsx
  - src\components\ui\input.jsx
  - src\components\ui\form.jsx
  - src\components\ui\label.jsx
  - src\components\ui\card.jsx
  - src\hooks\use-toast.jsx
  - src\components\ui\toast.jsx

This single command sets up:

Database Models - Prisma schema for contact messages
Server Actions - Form submission and data handling
Custom Hooks - Form state and message management
UI Components - Contact form and admin interface
Admin Pages - Message management dashboard
Type Safety - Full TypeScript support