npx @misarthak/uiforge add dashboard

The shadcn/ui for complete application features.
Drop entire working features — dashboards, AI chat, kanban boards — straight into your project as copy-paste source code. Zero runtime dependencies.

✨ What is UIForge?

UIForge is an open-source CLI tool that installs complete, production-ready application features directly into your codebase. Unlike component libraries that give you buttons and inputs, UIForge gives you entire application modules — AI Chat UIs, full Dashboards, Kanban boards, Auth flows, and more.

Inspired by shadcn/ui's philosophy: you own the code. There's no uiforge dependency in your final app. The CLI simply copies beautifully crafted, TypeScript-first source code into your project, and you take it from there.

⚡ One command. One complete feature.

| Feature | Command | Components Included | |---------|---------|---------------------| | 🤖 AI Chat | npx @misarthak/uiforge add ai-chat | Chat, Message, PromptInput, Sidebar, History | | 📊 Dashboard | npx @misarthak/uiforge add dashboard | Sidebar, Stats, Charts, DataTable, TopBar | | 🔐 Auth | npx @misarthak/uiforge add auth | LoginForm, RegisterForm, OAuthButtons, ForgotPassword | | 📋 Kanban | npx @misarthak/uiforge add kanban | Board, Column, Card, DragDrop, Filters | | 📑 Data Table | npx @misarthak/uiforge add data-table | Table, Filters, Sort, Pagination, RowActions | | 📅 Calendar | npx @misarthak/uiforge add calendar | MonthView, WeekView, EventSidebar, EventModal | | ⚙️ Settings | npx @misarthak/uiforge add settings | Sidebar, Profile, Notifications, Appearance | | 📝 Forms | npx @misarthak/uiforge add forms | MultiStep, Validation, FileUpload, DatePicker | | 🏢 Organization | npx @misarthak/uiforge add organization | Members, Roles, Invitations, TeamSwitcher | | 📁 File Manager | npx @misarthak/uiforge add file-manager | Grid/List views, Upload, Preview, Breadcrumb |

🚀 Quick Start

1. Install a feature

# AI Chat with sidebar and streaming support
npx @misarthak/uiforge add ai-chat

# Full analytics dashboard
npx @misarthak/uiforge add dashboard

# Auth flow with OAuth
npx @misarthak/uiforge add auth

2. Done — it's your code now

✓ Resolving registry...
✓ Writing components/features/dashboard/
  ├── sidebar.tsx
  ├── stats-card.tsx
  ├── revenue-chart.tsx
  ├── orders-table.tsx
  └── top-bar.tsx
✓ Installing dependencies (react-hook-form, zod, @tanstack/table)
✨ Dashboard added in 2.3s. Start building!

3. Use it instantly

// pages/dashboard.tsx
import { DashboardLayout } from "@/components/features/dashboard/sidebar";
import { StatsCards }       from "@/components/features/dashboard/stats-card";
import { RevenueChart }     from "@/components/features/dashboard/revenue-chart";

export default function DashboardPage() {
  return (
    <DashboardLayout>
      <StatsCards />
      <RevenueChart />
    </DashboardLayout>
  );
}

📦 Installation

Prerequisites

UIForge components are designed for modern Next.js / Vite projects. Make sure you have:

| Requirement | Version | |-------------|---------| | Node.js | >= 18.0.0 | | React | >= 18.0.0 (React 19 recommended) | | Tailwind CSS | >= 4.0 | | TypeScript | >= 5.0 |

Setup (if starting fresh)

# Create a new Next.js project
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app

# Add your first UIForge feature
npx @misarthak/uiforge add dashboard

Add to existing project

# Works with any React + Tailwind project
npx @misarthak/uiforge add ai-chat

# Need multiple features at once?
npx @misarthak/uiforge add dashboard kanban auth

🎨 Feature Showcase

🤖 AI Chat

A production-ready AI assistant UI inspired by ChatGPT & Claude. Includes conversation history, streaming simulation, suggested prompts, copy/regenerate actions, and an animated Upgrade button via Skiper UI.

📊 Dashboard

Full analytics dashboard with collapsible sidebar navigation, KPI stat cards with trend indicators, a monthly revenue bar chart, category distribution bars, and a paginated orders table.

🔐 Authentication

Login + Register with a seamless tab switcher. Includes email/password inputs with icons, password visibility toggle, OAuth via GitHub, a gradient submit CTA, and micro-animations on success.

📋 Kanban Board

Three-column project board (To Do → In Progress → Done) with priority tags, user avatar chips, and interactive move-left / move-right card controls. Ready to extend with drag-and-drop.

📑 Data Table

TanStack Table-compatible data grid with live search, multi-column sorting, row checkbox selection, bulk delete, Export, Filter actions, and smooth pagination.

📅 Calendar

Full month calendar with navigation, click-to-view events, color-coded event chips, and a live upcoming-events sidebar. Events are clickable to reveal detail panels.

⚙️ Settings Panel

Multi-section settings with sidebar navigation. Profile editor, notification toggles with animated switches, appearance theme picker (Light / Dark / System), and an accent color palette.

🛠 Tech Stack

UIForge components are built on a carefully chosen, modern stack:

| Layer | Technology | |-------|-----------| | Framework | React 19 | | Language | TypeScript 5 | | Styling | Tailwind CSS v4 | | Animation | Motion · Skiper UI | | Forms | React Hook Form + Zod | | Tables | TanStack Table | | Virtualization | TanStack Virtual | | Icons | Lucide React | | Primitives | Radix UI | | Monorepo | Turborepo + pnpm workspaces | | Build | tsup | | Testing | Vitest | | Releases | Changesets |

🏗 Architecture

UIForge is a monorepo with three packages:

uiforge/
├── packages/
│   ├── cli/           # The npx uiforge CLI tool
│   │   ├── src/
│   │   │   ├── commands/
│   │   │   │   └── add.ts       # Feature installer
│   │   │   └── index.ts         # CLI entry point
│   │   └── package.json
│   │
│   ├── registry/      # Feature source code + metadata
│   │   ├── src/
│   │   │   └── features/
│   │   │       ├── ai-chat/
│   │   │       │   ├── components/
│   │   │       │   └── registry.json
│   │   │       ├── dashboard/
│   │   │       ├── auth/
│   │   │       └── ...
│   │   └── scripts/
│   │       └── build-registry.ts
│   │
│   └── shared/        # Shared utilities (cn, types)
│
├── apps/
│   └── docs/          # Interactive showcase (Next.js)
│
└── turbo.json

How it works

┌─────────────────────────────────────────────────┐
│  Developer runs: npx uiforge add dashboard       │
└────────────────────────┬────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────┐
│  CLI fetches registry JSON                       │
│  (from CDN or local build)                       │
└────────────────────────┬────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────┐
│  Writes source files to:                         │
│  ./components/features/dashboard/               │
└────────────────────────┬────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────┐
│  Runs: npm install <required-deps>              │
│  (e.g. @tanstack/react-table, recharts)          │
└─────────────────────────────────────────────────┘

📖 CLI Reference

# Add a feature to your project
npx @misarthak/uiforge add <feature>

# Add multiple features at once
npx @misarthak/uiforge add ai-chat dashboard kanban

# List all available features
npx @misarthak/uiforge list

# Check installed features
npx @misarthak/uiforge status

# Update a feature to the latest version
npx @misarthak/uiforge update dashboard

# Show help
npx @misarthak/uiforge --help

Feature Registry Options

# Use local registry (for development)
UIFORGE_REGISTRY_URL=http://localhost:3000/registry npx @misarthak/uiforge add ai-chat

# Use a custom registry
UIFORGE_REGISTRY_URL=https://my-registry.com npx @misarthak/uiforge add ai-chat

🤝 Contributing

UIForge thrives on community contributions. Here's how to add a new feature:

1. Fork and clone

git clone https://github.com/yourusername/uiforge.git
cd uiforge
pnpm install

2. Create your feature

# Create the feature directory
mkdir -p packages/registry/src/features/my-feature/components

# Add your component files
touch packages/registry/src/features/my-feature/components/my-component.tsx

# Add registry metadata
touch packages/registry/src/features/my-feature/registry.json

3. Define registry.json

{
  "name": "my-feature",
  "title": "My Feature",
  "description": "A description of what your feature does",
  "files": ["components/my-component.tsx"],
  "dependencies": ["lucide-react"],
  "devDependencies": []
}

4. Preview your feature

# Start the docs app
pnpm dev

# Build the registry
pnpm --filter @uiforge/registry build

5. Submit a PR

Open a pull request with a short demo video or screenshot. All contributions welcome! 🎉

📋 Roadmap

• [x] 🤖 AI Chat
• [x] 📊 Dashboard
• [x] 🔐 Auth
• [x] 📋 Kanban
• [x] 📑 Data Table
• [x] 📅 Calendar
• [x] ⚙️ Settings
• [ ] 📝 Multi-step Forms
• [ ] 🏢 Organization / Team management
• [ ] 📁 File Manager
• [ ] 🔔 Notifications center
• [ ] 💳 Billing / Stripe integration
• [ ] 🌐 Internationalization (i18n)
• [ ] 🎨 Theme builder UI
• [ ] 📱 Mobile-optimized variants
• [ ] 🌙 Dark/Light mode auto-detection

📄 License

MIT © UIForge Contributors

Built with ❤️ for developers who move fast.

If UIForge saves you time, consider starring the repo ⭐