tibeb-design-cli

Tibeb Design System CLI

A command-line interface for adding beautiful components from the Tibeb Design System to your project. Built with atomic design principles and inspired by shadcn/ui.

Quick Start

Run the CLI with npx (no installation required):

```bash npx tibeb-design-cli@latest init npx tibeb-design-cli@latest add button ```

Installation Options

Option 1: Use with npx (Recommended)

No installation required - always uses the latest version:

```bash

Initialize your project

npx tibeb-design-cli@latest init

Add components

npx tibeb-design-cli@latest add button npx tibeb-design-cli@latest add register-form ```

Option 2: Use with pnpm dlx

```bash

Initialize your project

pnpm dlx tibeb-design-cli@latest init

Add components

pnpm dlx tibeb-design-cli@latest add button pnpm dlx tibeb-design-cli@latest add register-form ```

Option 3: Use with yarn dlx

```bash

Initialize your project

yarn dlx tibeb-design-cli@latest init

Add components

yarn dlx tibeb-design-cli@latest add button yarn dlx tibeb-design-cli@latest add register-form ```

Option 4: Global Installation

```bash

Install globally

npm install -g tibeb-design-cli

Use anywhere

tibeb init tibeb add button ```

Setup

1. GitHub Authentication (Required)

Set up a GitHub personal access token to avoid API rate limits:

• Go to https://github.com/settings/tokens
• Create a new token with public_repo scope
• Set the environment variable:

```bash

Windows PowerShell

$env:GITHUB_TOKEN="your_github_token_here"

macOS/Linux/WSL

export GITHUB_TOKEN="your_github_token_here"

Add to your shell profile for permanent setup

echo 'export GITHUB_TOKEN="your_github_token_here"' >> ~/.bashrc ```

Rate Limits:

• Without token: 60 requests/hour ⚠️
• With token: 5,000 requests/hour ✅

2. Initialize Your Project

```bash npx tibeb-design-cli@latest init ```

This creates a components.json file and sets up your project structure.

Usage

Add Components

```bash

Add a single component

npx tibeb-design-cli@latest add button

Add multiple components

npx tibeb-design-cli@latest add button card modal

Add with automatic dependencies (like shadcn/ui)

npx tibeb-design-cli@latest add register-form

↳ Automatically installs: Card, Label, Input, Checkbox, Button, ErrorMessage

```

List Available Components

```bash

List all components

npx tibeb-design-cli@latest list

List by category

npx tibeb-design-cli@latest list atoms npx tibeb-design-cli@latest list molecules
npx tibeb-design-cli@latest list organisms ```

Use Components in Your Code

```jsx // After adding components, import and use them import { Button } from "./components/atoms/Button" import { Card } from "./components/molecules/Card" import { RegisterForm } from "./components/organisms/RegisterForm"

function App() { return (

Click me

) } ```

Features

🚀 Just like shadcn/ui - Use with npx, no global installation needed
📦 Smart Dependencies - Automatically installs component dependencies
🎯 Atomic Design - Components organized as atoms, molecules, organisms
🔧 Package Manager Agnostic - Works with npm, yarn, pnpm
🎨 Beautiful CLI - Colored output with progress indicators
🔄 Cross-platform - Windows, macOS, Linux support
🔑 GitHub Integration - Direct component fetching from repository

Commands

Command	Description
npx tibeb-design-cli@latest init	Initialize design system in your project
npx tibeb-design-cli@latest list	List all available components
npx tibeb-design-cli@latest add <component>	Add component(s) to your project
npx tibeb-design-cli@latest --help	Show help information
npx tibeb-design-cli@latest --version	Show version number

Configuration

The components.json file created by init:

```json { "registry": "https://github.com/Dagi1995/Design-system-tibeb", "components": { "atoms": "design-system/src/components/atoms", "molecules": "design-system/src/components/molecules", "organisms": "design-system/src/components/organisms" }, "path": "./components" } ```

Available Components

Atoms

• Button, Input, Label, Checkbox, Avatar, Badge, ErrorMessage, FilterTag

Molecules

• Card, BirthdateInput, Dropdown Menu, Collapsers

Organisms

• RegisterForm (auto-installs all dependencies)

Troubleshooting

Rate Limit Errors

```bash

Set GitHub token

export GITHUB_TOKEN="your_token_here" ```

Component Not Found

• Verify repository access
• Check component name spelling
• Run npx tibeb-design-cli@latest list to see available components

Permission Errors

```bash

Windows: Run PowerShell as Administrator

macOS/Linux: Use sudo if needed

sudo npm install -g tibeb-design-cli ```

Development

Local Development

```bash git clone https://github.com/Dagi1995/Design-system-tibeb.git cd cli npm install npm run build npm link ```

Publishing Updates

```bash npm version patch # or minor/major npm publish ```

License

MIT © Dagi1995 the package.json { "name": "tibeb-design-cli", "version": "1.0.0", "description": "CLI tool for Tibeb Design System components - Add beautiful components to your project", "type": "module", "main": "dist/index.js", "bin": { "tibeb": "dist/index.js" }, "scripts": { "build": "node build.js", "dev": "node --watch src/index.js", "prepublishOnly": "npm run build" }, "keywords": [ "cli", "design-system", "components", "tibeb", "react", "ui", "atomic-design", "shadcn", "component-library" ], "author": { "name": "Dagi1995", "url": "https://github.com/Dagi1995" }, "license": "MIT", "repository": { "type": "git", "url": "https://github.com/Dagi1995/Design-system-tibeb.git" }, "homepage": "https://github.com/Dagi1995/Design-system-tibeb#readme", "bugs": { "url": "https://github.com/Dagi1995/Design-system-tibeb/issues" }, "dependencies": { "commander": "^11.1.0", "chalk": "^5.3.0", "fs-extra": "^11.2.0", "ora": "^8.0.1", "inquirer": "^9.2.12" }, "engines": { "node": ">=18.0.0" }, "files": ["dist", "registry.json", "README.md"] }