Documentation

A powerful command-line interface tool for managing and integrating UI components from both GitHub and MongoDB sources, built for Next.js projects.

Getting Started

1

Installation

Install the Multi UI CLI tool to use it in your project.

npm i multi-ui-cli
2

Project Setup

Initialize your project with necessary dependencies and configurations.

npx multi-ui setup

Then start the development server:

npm run dev
3

Add Components

Add components to your project using one of these methods:

Add Component Using Name:

npx multi-ui add <ComponentName> [customFilename]

Add Component Using ID:

npx multi-ui add <ComponentID> [customFilename]

With example files:

npx multi-ui add <ComponentName> --example [customFilename]

Installation

Install the Multi UI CLI tool using your preferred package manager:

npm i multi-ui-cli

Project Setup

Initialize your project with necessary dependencies and configurations:

npx multi-ui setup

Then start the development server:

npm run dev

Add Components

List Components

View all available components

npx multi-ui list

Search Components

Find components by name or type

npx multi-ui search <term>

Interactive Mode

Use the interactive UI

npx multi-ui interactive

Remove Components

Remove unused components

npx multi-ui remove <ComponentName>

Help & Version

Get help and version info

Show help information:

npx multi-ui --help

Show version:

npx multi-ui --version

Project Structure

your-project/
├── app/
│   ├── components/
│   │   ├── multi-ui/
│   │   │   ├── [ComponentName]/
│   │   │   │   ├── index.tsx
│   │   │   │   └── examples/
│   │   │   │       └── Example_1.tsx
│   │   │   └── ...
│   │   └── ...
│   └── ...
├── public/
│   └── multi-ui/
│       └── assets/
├── multi-ui.config.json
└── package.json

Configuration

The `multi-ui.config.json` configuration file:

{
  "language": "typescript",
  "componentPath": "app/components/multi-ui",
  "examplesPath": "examples",
  "framework": "next",
  "styling": "tailwind",
  "typescript": {
    "strict": true
  }
}

TypeScript Support

  • • Full type safety
  • • IntelliSense support
  • • Automatic JS conversion
  • • Type definitions included

Next.js Integration

  • • Next.js 14+ compatible
  • • App Router support
  • • Server Components
  • • Automatic optimization

Styling

  • • Tailwind CSS support
  • • Custom theming
  • • Responsive design
  • • Dark mode ready

Need Help?

Report IssuesJoin Discord