Documentation

@frontfamily/cli

Eject production-ready UI components into your project. 207 templates across 9 frameworks and 23 patterns.

Quick Start

# Scaffold a new project (Next.js or Vite)
npx @frontfamily/cli init my-app

# Vite + MUI, non-interactive
npx @frontfamily/cli init my-app -b vite -f react-mui

# Eject components into an existing project
npx @frontfamily/cli eject auth-form -f vue-quasar

# Install missing framework deps after eject
npx @frontfamily/cli add react-mui

init scaffolds a complete project with Next.js or Vite.eject adds components to an existing project.add installs missing framework dependencies.

How It Works

You run npx @frontfamily/cli eject from your project root.

Pick a pattern (Data Table, Auth Form, etc.) and a framework (Chakra, Quasar, Angular Material, etc.).

The CLI writes the component source file to ./components/. The file is yours — modify it freely.

All 207 templates are bundled inside the CLI package. No network requests, no API calls, no account needed. The CLI works offline and never sends your project data anywhere.

Command Reference

Command	Description
frontfamily init [name]	Scaffold a new project with Next.js or Vite (-b next\|vite)
frontfamily eject	Interactive mode — select pattern and framework from menus
frontfamily eject <pattern> -f <fw>	Fully non-interactive — ejects immediately
frontfamily eject <p1> <p2> -f <fw>	Multi-eject — multiple patterns in one command
frontfamily eject ... -o src/ui/	Custom output directory (default: ./components/)
frontfamily eject ... --preview	Open browser to preview the component before ejecting
frontfamily eject ... --dry-run	Show what would be written without touching disk
frontfamily eject ... --theme=stripe	Eject with design theme tokens (stripe, linear, vercel, notion)
frontfamily eject ... --overwrite	Overwrite existing files without prompting
frontfamily theme <preset>	Generate design tokens standalone (default, stripe, linear, vercel, notion)
frontfamily list	List all available frameworks and patterns
frontfamily list -f <framework>	Show patterns available for a specific framework
frontfamily list --json	JSON output for tooling, extensions, and AI agents
frontfamily add <framework>	Install missing framework deps (detects npm/pnpm/yarn/bun)
frontfamily analyze [dir]	Migration feasibility report — scans imports, reports coverage (no code changes)
frontfamily doctor	Check if your project is ready — detects framework, deps, TypeScript config
frontfamily diff <source> <target>	Show all component mappings between two frameworks
frontfamily diff <source> <target> <Component>	Detailed prop mapping for a specific component
frontfamily compat <component>	Check if a component exists across all 8 frameworks
frontfamily compat <component> --json	JSON output with coverage ratio and import paths
frontfamily --version	Show CLI version

Available Patterns (23)

data-table

Data Table

Sortable, paginated table with status badges, a11y scores, and department filtering

auth-form

Auth Form

card-feed

Card Feed

Responsive grid of user profile cards with avatars, badges, and hover effects

dashboard-stats

Dashboard Stats

KPI cards with progress bars, trend indicators, and department breakdown

modal-dialog

Modal Dialog

Confirmation, form, and alert dialogs with overlay, transitions, and keyboard dismiss

nav-bar

Navigation Bar

Top nav with logo, links, dropdown menu, search, avatar, and mobile drawer

notification-center

Notification Center

Toast stack with auto-dismiss, progress bars, history list, and type filtering

settings-panel

Settings Panel

Toggles, sliders, radio groups, selects, and grouped form controls with save/reset

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

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

Available Frameworks (9)

react-chakra

Chakra UI

react-eui

Elastic EUI

react-bootstrap

Bootstrap

react-mui

Material UI

react-antd

Ant Design

react-mantine

Mantine

react-tailwind

Tailwind

vue-quasar

Quasar

angular-material

Angular Material

Examples

Eject a Quasar data table into a Vue project

$ npx @frontfamily/cli eject data-table -f vue-quasar

┌  FrontFamily Eject
│
◇  Ejected successfully!
│
└  ✨ Your component is ready at ./components/QuasarDataTable.vue

Eject an Angular Material auth form

$ npx @frontfamily/cli eject auth-form -f angular-material

┌  FrontFamily Eject
│
◇  Ejected successfully!
│
└  ✨ Your component is ready at ./components/ff-auth-form.component.ts

Eject a Chakra UI settings panel

$ npx @frontfamily/cli eject settings-panel -f react-chakra

┌  FrontFamily Eject
│
◇  Ejected successfully!
│
└  ✨ Your component is ready at ./components/ChakraSettingsPanel.tsx

Preview before ejecting

$ npx @frontfamily/cli eject kanban-board -f react-mui --preview

┌  FrontFamily Eject
│
◆  Opening https://frontfamily.com/showroom?pattern=kanban-board&framework=react-mui
│
◆  Preview the component before ejecting. Still eject? (Y/n)

Check project readiness

$ 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
⚠  @elastic/eui not installed (required by react-eui templates)
│
└  1 warning(s) — ejecting will work but check the notes above.

Compare component mappings between frameworks

$ npx @frontfamily/cli diff react-mui react-chakra

  React + Material UI → React + Chakra UI  (19 components)

  Button           → Button      7 props 4 renamed
  TextField        → Input       8 props 3 renamed
  Card             → Box         2 props 2 dropped
  Typography       → Text        3 props 2 renamed
  Dialog           → Modal       2 props 1 renamed
  Switch           → Switch      4 props 3 renamed
  ...

Get detailed prop mapping for a specific component

$ npx @frontfamily/cli diff react-mui react-chakra Button

  Button (React + Material UI → React + Chakra UI)

  Component:  Button  →  Button
  Import:     @chakra-ui/react

  Props:
    · variant    (unchanged)
    → color      →  colorScheme
    → disabled   →  isDisabled
    → startIcon  →  leftIcon
    → endIcon    →  rightIcon

Check component availability across all frameworks

$ npx @frontfamily/cli compat DatePicker

  Datepicker availability across 8 frameworks:

  ✓ React + Material UI  @mui/material    Datepicker
  ✓ React + Ant Design   antd             Datepicker
  ✓ React + Mantine      @mantine/core    Datepicker
  ✗ React + Chakra UI    —                No equivalent
  ✗ React + Elastic EUI  —                No equivalent
  ✗ React + Bootstrap    —                No equivalent
  ✗ React + TailwindCSS  —                No equivalent
  ✗ Vue 3 + Quasar       —                No equivalent

  3/8 frameworks support this component natively.

What You Get

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

Framework	File Type	Example Filename
React (Chakra, MUI, etc.)	.tsx	ChakraAuthForm.tsx, MuiDataTable.tsx
Vue (Quasar)	.vue	QuasarAuthForm.vue
Angular (Material)	.ts	ff-auth-form.component.ts

Components are self-contained. They import from their framework's package (e.g., @chakra-ui/react,quasar,@angular/material) which you must have installed in your project. The CLI does not install dependencies for you.

Theme Presets

Eject components with design tokens inspired by popular products. The CLI generates a theme/tokens.ts file and adds the import to your ejected components.

# Eject with Stripe-inspired theme
npx @frontfamily/cli eject auth-form -f react-mui --theme=stripe
→ components/MuiAuthForm.tsx   (with theme import)
→ theme/tokens.ts              (Stripe palette)

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

default

Neutral baseline

stripe

Purple accent, light

linear

Dark mode, indigo

vercel

Pure black, blue

notion

Warm serif, minimal

Each tokens file exports three formats: a typed JS object (ff.accent), CSS variable map (cssVars), and a CSS string (cssString) for global stylesheets.

FAQ

Does the CLI need internet?

No. All 207 templates are bundled in the package. It works completely offline.

Does it modify my existing files?

No. It only creates new files in ./components/. It never reads or modifies your existing code.

Can I customize 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, not a dependency. The difference is FrontFamily covers 9 frameworks (not just React + Tailwind) and focuses on cross-framework migration patterns.

Can I add my own templates?

Yes. Create a frontfamily.config.json with custom registries pointing to npm packages, GitHub repos, or local files. Custom templates merge with and can override built-in ones.

How do I check if my project is compatible?

Run frontfamily doctor — it detects your meta-framework, TypeScript config, installed UI libraries, and Tailwind setup.

What license are the ejected components under?

Apache 2.0. You can use them in any project, commercial or otherwise.

Try it now

npx @frontfamily/cli eject

Or use the web converter to see the code before ejecting.