Create Tibeb Platform App

A professional CLI tool for adding dashboard and components to your existing Next.js/React applications, similar to shadcn/ui workflow.

Features

• 🚀 Add to Existing Projects - Works with your existing Next.js/React apps
• 🎯 Complete Dashboard - Install a full dashboard with one command
• 🧩 Individual Components - Add components one by one as needed
• 📦 Smart Dependencies - Automatically installs required packages
• 🎨 shadcn/ui Compatible - Built on shadcn/ui patterns and components
• 🔧 Multiple Package Managers - Supports npm, yarn, and pnpm
• 🌙 Dark Mode Ready - Built-in theme support

Quick Start

1. Create a Next.js App (if you don't have one)

```bash npx create-next-app@latest my-dashboard-app cd my-dashboard-app ```

2. Initialize Tibeb Platform

```bash npx create-tibeb-platform-app init ```

This will:

• Install necessary Tailwind CSS and shadcn/ui dependencies.
• Create tailwind.config.ts configuration file (if not present).
• Create components.json configuration file.
• Create lib/utils.ts utility functions.

Important: Ensure your main CSS file (e.g., app/globals.css in Next.js) includes the Tailwind directives: ```css @tailwind base; @tailwind components; @tailwind utilities; ```

3. Add the Complete Dashboard

```bash npx create-tibeb-platform-app add dashboard ```

This installs a complete dashboard with:

• Sidebar navigation with collapsible menu
• Interactive charts and data visualization
• Data tables with sorting and filtering
• Theme provider with dark/light mode
• All necessary UI components

4. Start Development

```bash npm run dev ```

Usage

Initialize Your Project

```bash

Initialize in your existing project

npx create-tibeb-platform-app init

Skip confirmation prompts

npx create-tibeb-platform-app init --yes ```

Add Components

```bash

Add complete dashboard (recommended)

npx create-tibeb-platform-app add dashboard

Add individual components

npx create-tibeb-platform-app add button npx create-tibeb-platform-app add sidebar npx create-tibeb-platform-app add data-table

Interactive component selection

npx create-tibeb-platform-app add

List all available components

npx create-tibeb-platform-app list ```

Available Components

🎯 Complete Solutions

| Component | Description | |-----------|-------------| | dashboard | Complete dashboard with sidebar, charts, tables, and theme support |

🧩 UI Components

| Component | Description | Key Dependencies | |-----------|-------------|------------------| | avatar | User avatar with fallback | @radix-ui/react-avatar | | badge | Status badges and labels | class-variance-authority | | button | Interactive button | @radix-ui/react-slot | | card | Content container | - | | chart | Data visualization | recharts | | checkbox | Form checkbox | @radix-ui/react-checkbox | | dropdown-menu | Contextual menu | @radix-ui/react-dropdown-menu | | input | Form input field | - | | select | Dropdown selection | @radix-ui/react-select | | sidebar | Navigation sidebar | Multiple components | | table | Data table | - | | tabs | Tabbed interface | @radix-ui/react-tabs |

🏗️ Layout Components

| Component | Description | Dependencies | |-----------|-------------|--------------| | app-sidebar | Application sidebar | sidebar, button, dropdown-menu | | data-table | Advanced data table | @tanstack/react-table, @dnd-kit/* | | nav-main | Main navigation | sidebar | | nav-user | User navigation | sidebar, avatar, dropdown-menu | | site-header | Site header | button, separator | | theme-provider | Theme context | next-themes |

Workflow Comparison

Traditional Approach

```bash

Clone entire template

git clone https://github.com/user/dashboard-template cd dashboard-template npm install ```

Tibeb Platform Approach (Like shadcn/ui)

```bash

Start with your own Next.js app

npx create-next-platform-app my-app cd my-app

Add only what you need

npx create-tibeb-platform-app init npx create-tibeb-platform-app add dashboard ```

Configuration

The CLI creates a components.json file:

```json { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "slate", "cssVariables": true }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui" } } ```

Requirements

• Node.js 16.0.0 or higher
• Existing package.json file (for dependency management)

Project Structure After Installation

``` your-project/ ├── app/ │ ├── globals.css # Updated with Tailwind styles (manual step) │ ├── layout.tsx # Updated with theme provider │ └── page.tsx # Dashboard page ├── components/ │ ├── ui/ # UI components │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── sidebar.tsx │ │ └── ... │ ├── app-sidebar.tsx # Layout components │ ├── data-table.tsx │ └── ... ├── lib/ │ └── utils.ts # Utility functions ├── hooks/ │ └── use-mobile.tsx # Custom hooks ├── components.json # Configuration ├── tailwind.config.ts # Tailwind configuration └── package.json # Updated with dependencies ```

Troubleshooting

"No package.json found"

Make sure you're in a directory with a package.json file: ```bash ls package.json # Should exist ```

"Project not initialized"

Run the init command first: ```bash npx create-tibeb-platform-app init ```

Component conflicts

If you have existing components with the same name, they will be overwritten. Back up your components before installing.

Contributing

We welcome contributions! Please see our Contributing Guide.

License

MIT

Built with ❤️ for developers who want to add beautiful dashboards to their existing projects