Documentation

@frontfamily/cli

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

Quick Start

# Interactive mode — prompts you to pick pattern + framework
npx @frontfamily/cli eject

# Direct mode — no prompts
npx @frontfamily/cli eject auth-form -f vue-quasar

# Short alias (if installed globally)
npm i -g @frontfamily/cli
frontfamily eject data-table -f react-mui

The component file is copied to ./components/in your current directory. If the directory doesn't exist, it's created automatically.

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 162 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 eject	Interactive mode — select pattern and framework from menus
frontfamily eject <pattern>	Eject a specific pattern — prompts for framework only
frontfamily eject <pattern> -f <framework>	Fully non-interactive — ejects immediately
frontfamily --version	Show CLI version

Available Patterns (18)

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

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/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/SettingsPanelPattern.tsx

What You Get

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

Framework	File Type	Example Filename
React (Chakra, MUI, etc.)	.tsx	AuthFormPattern.tsx
Vue (Quasar)	.vue	QuasarAuthForm.vue
Angular (Material)	.ts	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.

FAQ

Does the CLI need internet?

No. All 162 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?

Not yet. Components are always written to ./components/ relative to where you run the command.

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.

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.