@a5gard/midgardr-cli

A comprehensive React components library with 3100+ production-ready components for building modern web applications.

[!IMPORTANT]

At this time, this package can be used as a standalone cli tool. Over time this will change and eventually will only be meant to be used through the already in-place vscode extension as it will serve the role of an installer and database for the components. The primary reasoning it to just keep the overall size of the extension down as it is already climbing.

So if you are looking to use this package I implore you to use the extension named 'DevStack' that you can find in vscodes extensions or on the marketplace.

import { Command, CommandGroup, CommandItem, CommandList, cn } from '#midgardr'
import { X } from '#baldr'

Selecting the full installation will also configure your project for this use as well.

Installation

npm install -g @a5gard/midgardr-cli

Installing allows the usage of

midgardr button

If you would rather not install and just trigger each feature

bunx @a5gard/midgardr-cli button

Quick Start

Install a single component:

bunx @a5gard/midgardr-cli button

Menu

bunx @a5gard/midgardr-cli

Then select from the interactive menu:

• Full Install - Components + Libraries + Tailwind + PostCSS
• Full Install with Ngin - Includes 18,000 Tailwind config presets
• Components + Libraries - Install without config files
• Configure Tailwind + PostCSS - Setup only
• Configure Tailwind + PostCSS w/ ngin - Setup with preset that contains 18,000 configurations set with only 3 variables
• Select Components - Choose specific components
• Create Config - Creates config file that can be used in conjuction with the bunx command

Flags

Running the command with flags

• full-w-ngin - installs all, includes preset ngin
• full-install - full install
• select-components - provides a list with toggable items to install
• comps-and-libs - just installs the components and required libraries
• create-config - create config wizard
• configure-tailwind-postcss - installs tailwind v3, postcss and configures each for you
• configure-ngin - before installing ngin, prompts you for 3 values, creating the file with them instead of having to manually editing them

Premium Access

Unlock the full component library with a premium access key:

Premium features include:

• Access to all 2000+ components
• Advanced interactive components
• Specialized tools and utilities
• Priority updates

Component Categories

Primitives

Core UI components following modern design patterns:

• Button, Input, Select, Checkbox, Radio, Switch
• Dialog, Sheet, Popover, Tooltip
• Card, Badge, Avatar, Separator
• Accordion, Tabs, Collapsible
• And more...

Forms

Advanced form components with validation:

• Input variants (masked, OTP, password)
• Date pickers and calendars
• File uploads and dropzone
• Toggle groups and button groups

Data Display

Components for presenting data:

• Tables with sorting and filtering
• Charts and data visualizations
• Timeline and progress indicators
• Empty states and skeletons

Navigation

Navigation and layout components:

• Menus and navigation bars
• Breadcrumbs and pagination
• Sidebars and dual sidebars
• Command palette

Feedback

User feedback components:

• Alerts and notifications
• Toast messages
• Loading spinners
• Progress indicators

Interactive

Advanced interactive elements:

• Drag and drop
• Resizable panels
• Image zoom and crop
• Code editors with syntax highlighting

Utilities

Helper components and hooks:

• Custom hooks (useTimer, useCopyToClipboard, etc.)
• Auth utilities
• Server middleware
• Context management

Package Managers

Catalyst UI automatically detects and uses your package manager:

• npm
• pnpm
• yarn

Configuration

Config File (Optional)

Create a config.midgardr file in your project root to customize installation behavior:

bunx @a5gard/midgardr-cli
# Select: Create Config File

Or create it manually:

{
    "theme": "blue",                      // presetting the theme
    "preset": "MODERN",                   // presetting the preset
    "font": "Geist",                      // presetting the font
    "all-components": false,              // auto-install all on `bunx @a5gard/midgardr-cli`
    "install-tailwind": true,             // install Tailwind dependencies
    "configure-tailwind": true,           // create and paste .css file
    "configure-tailwind.config": true,    // true, "ngin", or false
    "install-postcss": true,              // install PostCSS dependencies
    "configure-postcss": true,            // create postcss.config.js
    "css": "app/routes/styles/tailwind.css",  // CSS file location
    "components": "app/"                  // components folder location
}

Config Options Explained

| Option | Type | Default | Description | |--------|------|---------|-------------| | theme | string | "blue" | Default theme color | | preset | string | "MODERN" | Default preset style | | font | string | "Geist" | Default font family | | all-components | boolean | false | Auto-install all components when running bunx @a5gard/midgardr-cli | | install-tailwind | boolean | true | Install Tailwind CSS and related dependencies | | configure-tailwind | boolean | true | Create the tailwind.css file at specified location | | configure-tailwind.config | boolean|"ngin" | true | true for basic config, "ngin" for 18k presets, false for none | | install-postcss | boolean | true | Install PostCSS dependencies | | configure-postcss | boolean | true | Create postcss.config.js file | | css | string | "app/routes/styles/tailwind.css" | Path and filename for tailwind.css | | components | string | "app/" | Base directory for components folder |

Auto-Install with Config

Once you have a config file with "all-components": true, simply run:

bunx @a5gard/midgardr-cli

This will automatically:

1. Install all components to your specified components directory
2. Install required dependencies (if enabled)
3. Configure Tailwind CSS (if enabled)
4. Configure PostCSS (if enabled)
5. Create utils file

No menu selection needed!

Tailwind Setup

Catalyst UI includes pre-configured Tailwind setups:

Standard Configuration:

bunx @a5gard/midgardr-cli
# Select: Configure Tailwind + PostCSS

Ngin Configuration (18,000 presets):

bunx @a5gard/midgardr-cli
# Select: Configure with Ngin

Or set in config:

{
    "configure-tailwind.config": "ngin"
}

Examples

Installing a Button Component

bunx @a5gard/midgardr-cli button

This will:

1. Create /components/midgardr/primitives/button.tsx
2. Install required dependencies (extracted from component imports)
3. Create utils/utils.ts if it doesn't exist

Using the Button Component

import { Button } from '~/components/midgardr';

export default function MyPage() {
  return (
    <Button 
      variant="default"
      size="lg"
      onClick={() => console.log('clicked')}
    >
      Click Me
    </Button>
  );
}

Installing Multiple Components

bunx @a5gard/midgardr-cli
# Select: Select Components
# Choose from the list

Component Import Paths

All components use the centralized import path:

import { Button, Card, Dialog } from '~/components/midgardr';

Or import directly from category folders:

import { Button } from '~/components/midgardr/primitives';
import { useTimer } from '~/components/midgardr/hooks';

If you would rather a much easier import path to use, I have recently adopted the following and can be configured in your project using the flag 'easy-paths'

import { Button, Card, Dialog } from '#midgardr';

Features

• TypeScript First - Full TypeScript support with type definitions
• Accessible - Built with accessibility in mind following WAI-ARIA standards
• Customizable - Highly customizable with Tailwind CSS
• Tree-shakeable - Import only what you need
• Dark Mode - Built-in dark mode support
• Responsive - Mobile-first responsive design
• Zero Config - Works out of the box with sensible defaults

File Structure

After installation, your project will have:

your-project/
├── components/
│   └── midgardr/
│       ├── primitives/
│       ├── forms/
│       ├── overlays/
│       ├── hooks/
│       ├── utils/
│       │   └── utils.ts
│       └── index.ts
└── (optional config files)
    ├── tailwind.config.js
    └── postcss.config.js