@frontfamily/cli

v0.12.0

Published

22 days ago

Eject production-ready UI pattern components across React, Vue, and Angular frameworks

0High
0Medium
0Low

frontfamily ui components react vue angular mui chakra antd quasar mantine eui migration eject scaffold shadcn shadcn-ui code-generator boilerplate starter cli template

$ npx @frontfamily/cli eject auth-form data-table -f react-mui

┌   FrontFamily Eject
│
◆  components/MuiAuthForm.tsx
│
◆  components/MuiDataTable.tsx
│
└  2 ejected

$ npx @frontfamily/cli list -f react-eui

react-eui — 23 patterns:

  data-table               → EuiDataTable.tsx
  auth-form                → EuiAuthForm.tsx
  kanban-board             → EuiKanbanBoard.tsx
  chat-ui                  → EuiChatUI.tsx
  ... 14 more

The problem

You're starting a new feature. You need a data table in MUI, an auth form in Chakra UI, a kanban board in Angular Material. You'll spend 2-4 hours writing boilerplate — imports, props, state management, responsive layout, dark mode, loading states, error handling — before you write a single line of business logic.

The fix

npx @frontfamily/cli eject kanban-board -f react-mui
# → ./components/MuiKanbanBoard.tsx (ready to use)

npx @frontfamily/cli eject auth-form data-table -f react-chakra
# → ./components/ChakraAuthForm.tsx
# → ./components/ChakraDataTable.tsx

207 templates across 9 frameworks. Each one is a self-contained, typed, production-ready component with theme support, responsive layout, and loading/error states built in. No runtime dependency — the file is yours.

All templates are bundled inside the package. No network requests, no API keys, no accounts. Works offline, works in CI.

Install

# Use directly (no install needed)
npx @frontfamily/cli eject

# Or install globally
npm i -g @frontfamily/cli
frontfamily eject

Usage

Scaffold a new project

$ npx @frontfamily/cli init my-admin-app

┌  FrontFamily Init
│
◆  What are you building?
│  ○ SaaS Dashboard        ← 6 components
│  ○ Admin Panel            ← 7 components
│  ○ Content Management     ← 7 components
│  ○ E-commerce Storefront  ← 7 components
│  ○ Social / Community App ← 7 components
│  ○ Custom — pick your own
│
◆  Build tool:
│  ○ Next.js              ← App Router, SSR, file-based routing
│  ○ Vite                 ← SPA, fast HMR, simpler setup
│
◆  UI framework: React + Material UI
│
◆  Include these components:
│  ◻ Login Form        ◻ Sidebar Layout
│  ◻ Dashboard Stats   ◻ Data Table
│  ◻ Notifications     ◻ Settings Panel
│
◆  Design theme: Stripe
│
◆  Created my-admin-app/
◆  6 components ejected
◆  theme/tokens.ts — Stripe palette
│
└  Next steps:

  cd my-admin-app
  npm install
  npm run dev

Generates a Next.js or Vite project with package.json, tsconfig, routing, selected components, and optional theme tokens — ready to npm install && npm run dev.

# Non-interactive: Vite + Chakra UI with Stripe theme
npx @frontfamily/cli init my-app -b vite -f react-chakra --theme=stripe

Interactive mode

$ npx @frontfamily/cli eject

┌  FrontFamily Eject
│
◆  Select the UI Pattern:
│  ○ Data Table
│  ○ Auth Form          ← you pick
│  ○ Card Feed
│  ...
│
◆  Select the framework:
│  ○ React + Material UI    ← you pick
│  ○ React + Chakra UI
│  ○ React + Ant Design
│  ...
│
◇  Ejected successfully!
│
└  ✨ Your component is ready at ./components/MuiAuthForm.tsx

Direct mode

# Single pattern
npx @frontfamily/cli eject auth-form -f react-mui
npx @frontfamily/cli eject data-table -f react-chakra
npx @frontfamily/cli eject nav-bar -f react-antd

# Multiple patterns at once
npx @frontfamily/cli eject auth-form data-table nav-bar -f react-mui

# Custom output directory
npx @frontfamily/cli eject auth-form -f react-mui -o src/components/

# Preview in browser before ejecting
npx @frontfamily/cli eject kanban-board -f react-mui --preview

# Preview without writing files
npx @frontfamily/cli eject auth-form -f react-mui --dry-run

# Eject with a design theme (writes tokens + wires imports)
npx @frontfamily/cli eject auth-form -f react-mui --theme=stripe

# Overwrite existing files without prompting
npx @frontfamily/cli eject auth-form -f react-mui --overwrite

Check your project

$ npx @frontfamily/cli doctor

┌  FrontFamily Doctor
│
◆  ✓ node_modules present
◆  ✓ Next.js ^15.0.0 with App Router
◆  ✓ TypeScript configured (target: ES2017)
◆  ✓ react-mui — all dependencies installed
◆  ✓ react-chakra — all dependencies installed
⚠  @elastic/eui not installed (required by react-eui templates)
⚠  No Tailwind config found — react-tailwind templates require Tailwind CSS
│
└  2 warning(s) — ejecting will work but check the notes above.

Detects your meta-framework (Next/Vite/CRA/Nuxt/Angular CLI), TypeScript config, installed UI libraries, and Tailwind setup.

Install missing deps after eject

$ npx @frontfamily/cli add react-mui

┌  FrontFamily Add
│
◆  Missing 3 packages for react-mui:
│    + @mui/material
│    + @emotion/react
│    + @emotion/styled
│
◆  Run npm install @mui/material @emotion/react @emotion/styled? (Y/n)
│
└  Dependencies ready — your ejected components will work now.

Detects your package manager (npm/pnpm/yarn/bun) and installs only what's missing.

List available templates

# Show all frameworks and patterns
npx @frontfamily/cli list

# Filter by framework
npx @frontfamily/cli list -f react-eui

# JSON output (for tooling, VS Code extensions, AI agents)
npx @frontfamily/cli list --json
npx @frontfamily/cli list -f react-mui --json

Patterns

| ID | Name | What you get | |---|---|---| | data-table | Data Table | Sortable, paginated table with status badges and a11y scores | | auth-form | Auth Form | Login/signup with validation, password visibility toggle, error states | | card-feed | Card Feed | Responsive grid of profile cards with avatars, badges, hover effects | | dashboard-stats | Dashboard Stats | 4 KPI cards with progress bars, trend indicators, department breakdown | | modal-dialog | Modal Dialog | Confirmation, form, and alert dialogs with overlay and keyboard dismiss | | nav-bar | Navigation Bar | Top nav with links, dropdown menu, search input, mobile hamburger drawer | | notification-center | Notifications | Toast stack with auto-dismiss, progress bars, and notification history | | settings-panel | Settings Panel | Toggles, sliders, radio groups, selects with save/reset actions | | file-upload | File Upload | Drag-and-drop zone, file list, progress bars, and validation | | date-picker | Date Picker | Calendar selector with range mode, time input, and locale support | | sidebar-layout | Sidebar Layout | Collapsible sidebar with nested nav, icons, and responsive drawer | | data-grid | Data Grid | Editable table with inline editing, column reorder, and virtualization | | command-palette | Command Palette | Cmd+K search overlay with fuzzy matching and keyboard navigation | | pricing-table | Pricing Table | Tier cards with feature comparison, toggle billing cycle, and CTAs | | stepper-wizard | Stepper Wizard | Multi-step form with validation, progress indicator, and back/next | | autocomplete | Autocomplete | Search input with async suggestions, multi-select, and custom rendering | | kanban-board | Kanban Board | Draggable cards across columns with add, edit, and status filtering | | chat-ui | Chat UI | Message bubbles, input with send, timestamps, and typing indicator | | tabs | Tabs | Tabbed interface with content panels, icons, badges, and lazy loading | | comments | Comments | Threaded comment list with reply, edit, like, avatars, and timestamps | | auth-login | Login Form | Email/password login with social buttons, remember me, forgot password | | auth-signup | Signup Form | Registration with password strength meter, terms checkbox, validation | | auth-password-reset | Password Reset | Forgot password flow with email input and success confirmation |

Frameworks

| Flag | ID | Framework | Output | |---|---|---|---| | ⚛️ | react-mui | Material UI (MUI) | .tsx | | ⚛️ | react-chakra | Chakra UI | .tsx | | ⚛️ | react-antd | Ant Design | .tsx | | ⚛️ | react-eui | Elastic EUI — all 23 patterns use native @elastic/eui | .tsx | | ⚛️ | react-mantine | Mantine | .tsx | | ⚛️ | react-bootstrap | Bootstrap | .tsx | | ⚛️ | react-tailwind | Tailwind / Headless UI | .tsx | | 💚 | vue-quasar | Quasar (Vue 3) — native Quasar components | .vue | | 🔺 | angular-material | Angular Material — native Material components | .ts |

23 patterns × 9 frameworks = 207 templates

What you get

Each ejected file is a single, self-contained component with:

Framework-native imports (@mui/material, @chakra-ui/react, @elastic/eui, antd, quasar, @angular/material)
Proper TypeScript types
Theme support (dark/light)
Density support (compact/comfortable)
Loading and error states
Responsive layout

The file is yours — modify it however you want. No dependency on @frontfamily/cli at runtime.

Theme presets

Eject components with pre-wired design tokens inspired by popular products:

# Eject with a theme — generates tokens + adds import to component
npx @frontfamily/cli eject auth-form -f react-mui --theme=stripe
# → components/MuiAuthForm.tsx   (with theme import)
# → theme/tokens.ts              (Stripe palette)

# Or generate tokens standalone
npx @frontfamily/cli theme linear
# → theme/tokens.ts

Available presets: default, stripe, linear, vercel, notion

Each tokens file exports three formats:

import { ff, cssVars, cssString } from './theme/tokens';

ff.accent           // '#533afd' — use in JS/inline styles (prefixed to avoid clashes with MUI/Chakra theme objects)
cssVars             // { '--ff-accent': '#533afd', ... } — spread on a wrapper element
cssString           // :root { --ff-accent: #533afd; } — paste into a stylesheet

Commands

frontfamily init [name]                              Scaffold project (Next.js or Vite)
frontfamily init [name] -b vite -f react-mui          Vite + MUI project
frontfamily init [name] -f <fw> --theme=stripe         Non-interactive scaffold
frontfamily eject                                    Interactive mode
frontfamily eject <pattern> -f <framework>           Direct eject
frontfamily eject <p1> <p2> <p3> -f <framework>      Multi-eject
frontfamily eject <pattern> -f <fw> -o src/ui/        Custom output dir
frontfamily eject <pattern> -f <fw> --theme=stripe    Eject with design theme
frontfamily eject <pattern> -f <fw> --preview          Open browser preview first
frontfamily eject <pattern> -f <fw> --dry-run          Preview only (no files)
frontfamily eject <pattern> -f <fw> --overwrite        Skip overwrite prompt
frontfamily theme <preset>                           Generate theme tokens standalone
frontfamily theme <preset> -o src/theme/              Custom output dir for tokens
frontfamily list                                     Show all templates
frontfamily list -f <framework>                      Filter by framework
frontfamily list --json                              JSON output (for tooling)
frontfamily add <framework>                          Install missing deps for a framework
frontfamily doctor                                   Check project readiness
frontfamily doctor -f <framework>                    Check deps for one framework only
frontfamily --version                                Print version
frontfamily --help                                   Show help

Custom template registries

Teams can maintain their own templates alongside the built-in ones. Create a frontfamily.config.json in your project root:

{
  "registries": [
    "npm:@acme/frontfamily-templates",
    "github:acme/design-system",
    "./local/templates.json"
  ]
}

Registry sources:

| Prefix | How it works | |---|---| | npm: | Reads templates.json from an installed npm package (node_modules/) | | github: | Fetches templates.json from a GitHub repo (branch, tag, or commit SHA) | | ./path | Reads a local JSON file |

Pin by commit SHA (recommended for production):

{
  "registries": [
    "github:acme/design-system#a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2"
  ]
}

Security model for github: registries:

Remote templates are fetched and written to disk as source files. To prevent supply-chain issues:

First-use confirmation — the CLI prompts before trusting a new github: source. In CI (non-TTY), new sources are blocked until confirmed interactively.
Checksum lockfile — on first fetch, a SHA-256 hash is recorded in frontfamily.lock.json. Subsequent fetches warn if the remote content changed.
SHA pinning — github:org/repo#<40-char-sha> pins to an exact commit. If the content somehow changes for a pinned SHA, the CLI aborts.

`frontfamily.lock.json`

This file is created automatically when you first use a github: registry. It pins remote templates by SHA-256 content hash.

Commit it. Your team shares the same trusted checksums.
If it changes unexpectedly, investigate. A changed hash means the remote templates were modified.
Do not .gitignore it. Without the lockfile, every team member gets prompted to re-trust on first run, and content changes go undetected.

{
  "github:acme/design-system#main": {
    "sha256": "a1b2c3d4e5f6...",
    "fetchedAt": "2026-04-22T10:30:00.000Z"
  }
}

The registry file must follow the same format as the built-in templates:

{
  "react-mui": {
    "my-pattern": {
      "file": "MyPattern.tsx",
      "source": "export default function MyPattern() { ... }"
    }
  }
}

Custom templates override built-in ones when the framework + pattern match. This lets you replace defaults with your team's conventions.

# Verify your registries are loaded
npx @frontfamily/cli list
#   + 12 templates from npm:@acme/frontfamily-templates
#   + 5 templates from ./local/templates.json

FAQ

Does it need internet? No. All 207 templates are bundled in the npm package. Fully offline.

Does it touch my existing files? Only creates new files. If a file already exists, it asks before overwriting (unless --overwrite is used).

Can I change the output directory? Yes: frontfamily eject auth-form -f react-mui -o src/components/

Is this like shadcn/ui? Similar concept — you own the code. The difference: FrontFamily covers 9 frameworks (React, Vue, Angular), not just React + Tailwind. And it includes complex patterns (Kanban, Chat UI, Command Palette) not just primitives.

Can I use the output commercially? Yes. Apache 2.0 license. No restrictions.

License

Apache 2.0