@dinachi/cli

A CLI for adding Dinachi UI components to your project. Just like shadcn/ui, this tool copies component source code directly into your project, giving you full ownership and control.

Best fit: React projects using Tailwind CSS (Next.js, Vite, Remix, CRA, and similar layouts).

Installation

npm install -g @dinachi/cli

Or use npx without global install:

npx @dinachi/cli@latest init

Usage

Two ways to use the CLI

Option 1: Install globally (recommended)

npm install -g @dinachi/cli

# Then use short commands
dinachi init
dinachi add button

Option 2: Use npx (no global install)

# Always use the full package name
npx @dinachi/cli init
npx @dinachi/cli add button

Initialize Dinachi UI in your project

dinachi init
# or
npx @dinachi/cli init

This will:

• Set up the project configuration
• Install required dependencies
• Create utility functions
• Generate a components.json config file with normalized project paths

Add components

dinachi add button
# or
npx @dinachi/cli add button

This will:

• Copy the button component source code to your project
• Place it in your configured components directory
• Install any missing dependencies (or print them when using --skip-install)

Available Commands

• dinachi init - Initialize Dinachi UI in your project
• dinachi init --skip-install - Initialize without package installation
• dinachi add <component> - Add a component to your project
• dinachi add <component> --overwrite - Overwrite existing component files
• dinachi add --all - Install all registered components
• dinachi add <component> --skip-install - Add files without installing packages

Available Components

• accordion - Collapsible content sections
• alert-dialog - Modal dialogs for important actions
• autocomplete - Text input with dynamic suggestions
• avatar - User profile images with fallbacks
• button - Clickable buttons with variants
• checkbox - Checkbox inputs
• checkbox-group - Grouped checkboxes
• collapsible - Collapsible content panels
• combobox - Input + dropdown selection
• context-menu - Right-click context menus
• dialog - Modal dialogs
• drawer - Edge-anchored slide-in panel
• field - Form field wrapper
• fieldset - Group related form controls
• form - Form component with validation
• input - Text input fields
• menu - Button-triggered action menu
• menubar - Desktop-style menu bars
• meter - Scalar measurement indicator
• navigation-menu - Navigation menu systems
• number-field - Numeric input with steppers
• popover - Anchored floating panel
• preview-card - Hover preview cards
• progress - Task completion indicator
• radio - Single-select radio controls
• scroll-area - Custom scroll container
• select - Dropdown select inputs
• separator - Visual content divider
• slider - Range slider inputs
• switch - On/off toggle control
• tabs - Tabbed interfaces
• toast - Notification toasts
• toggle - Toggle switches
• toggle-group - Grouped toggles
• toolbar - Tool button groups
• tooltip - Hover tooltips

How it works

Unlike traditional component libraries, Dinachi UI copies the actual source code into your project. This means:

✅ Full ownership - The code is yours to modify ✅ Dependencies stay in your app - Required packages are installed directly into your project ✅ Complete customization - Change variants, styles, and behavior as needed ✅ Zero abstractions - See exactly how components work

Configuration

After running dinachi init, you'll have a components.json file:

{
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "./src/components",
    "utils": "./src/lib/utils",
    "ui": "./src/components/ui",
    "lib": "./src/lib",
    "hooks": "./src/hooks"
  }
}

Modifying Button Variants

Once you add the button component, you can modify the variants directly in your project:

// In your project: src/components/ui/button.tsx
const buttonVariants = cva(
  "inline-flex items-center justify-center...",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        // Add your own variants:
        success: "bg-green-500 text-white hover:bg-green-600",
        warning: "bg-yellow-500 text-white hover:bg-yellow-600",
      },
      // Add your own size variants:
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        xl: "h-12 rounded-md px-10", // Your custom size
        icon: "h-10 w-10",
      },
    },
    // ...
  }
)

The variants live in your code, so you have complete control!