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:

• Setup Tailwind CSS and shadcn/ui configuration
• Create `components.json` configuration file
• Create `lib/utils.ts` utility functions
• Install required dependencies

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 Next.js/React 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

🧩 UI Components

🏗️ Layout Components

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-app@latest my-app cd my-app

Add only what you need

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

Examples

Adding Individual Components

```bash

Add a button component

npx create-tibeb-platform-app add button

Use in your React component

```

```tsx import { Button } from "@/components/ui/button"

export function MyComponent() { return Click me } ```

Adding Complex Components

```bash

Add data table (automatically installs dependencies)

npx create-tibeb-platform-app add data-table ```

This automatically installs:

• Registry dependencies: table, button, input, select, checkbox
• NPM packages: @tanstack/react-table, @dnd-kit/core, @dnd-kit/sortable

Complete Dashboard Setup

```bash

One command for complete dashboard

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

Installs everything needed for a professional dashboard:

• 15+ UI components
• Layout components
• Theme system
• Charts and data tables
• Navigation system

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 Next.js or React project
• npm, yarn, or pnpm

Project Structure After Installation

``` your-project/ ├── app/ │ ├── globals.css # Updated with Tailwind styles │ ├── 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 ```

Troubleshooting

"No package.json found"

Make sure you're in a Next.js or React project directory: ```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