@ng-elemental/cli

CLI for NgElemental — copy Angular UI component source into your project.

Install

No global install required. Use npx:

npx @ng-elemental/cli init
npx @ng-elemental/cli add button

Commands

init

Creates elemental.json, asks where to copy components, and installs theme tokens.

npx @ng-elemental/cli init
npx @ng-elemental/cli init --yes                 # non-interactive (default path, installs theme)
npx @ng-elemental/cli init --path libs/ui --yes  # Nx / custom folder
npx @ng-elemental/cli init --skip-theme          # tokens later via `add theme`

Default config:

{
  "componentsDir": "src/app/ui"
}

init also appends @use of theme/tokens and theme/typography to src/styles.scss when that file exists. Load Inter so --el-font-sans resolves.

list

Prints the copy-paste catalog (name, title, kind). Use --kind to filter.

npx @ng-elemental/cli list
npx @ng-elemental/cli list --kind directive

add <component>

Copies component source files into componentsDir.

npx @ng-elemental/cli add icon
npx @ng-elemental/cli add button
npx @ng-elemental/cli add <component>
npx @ng-elemental/cli add button --force   # overwrite existing files

After adding a component, import it from the path shown in the CLI output:

import { ElButton } from './ui/button/button';

@Component({
  imports: [ElButton],
  template: `<el-button variant="primary">Save</el-button>`,
})
export class MyComponent {}

Agents / MCP

Coding agents should use @ng-elemental/mcp instead of guessing CLI flags:

npx @ng-elemental/mcp
npx @ng-elemental/mcp init --client cursor

See packages/mcp/README.md for Cursor, Claude Code, VS Code, and Codex config.

Available components

| Name | Selector | Class | | --- | --- | --- | | theme | — | ElThemeService (+ tokens.scss) | | button | el-button | ElButton | | label | el-label | ElLabel | | form-error | el-form-error | ElFormError | | input | el-input | ElInput | | checkbox | el-checkbox | ElCheckbox | | slide-toggle | el-slide-toggle | ElSlideToggle | | radio | el-radio-group, el-radio | ElRadioGroup, ElRadio | | select | el-select, el-select-item, el-select-group | ElSelect, ElSelectItem, ElSelectGroup | | datepicker | el-date-picker, el-date-range-picker | ElDatePicker, ElDateRangePicker | | chip | el-chip | ElChip | | progress | el-progress, el-progress-circle | ElProgress, ElProgressCircle | | slider | el-slider | ElSlider | | carousel | el-carousel, el-carousel-slide | ElCarousel, ElCarouselSlide | | avatar | el-avatar | ElAvatar | | card | el-card | ElCard | | container | el-container | ElContainer | | stack | el-stack | ElStack | | grid | el-grid | ElGrid | | aspect-ratio | el-aspect-ratio | ElAspectRatio | | scroll-area | el-scroll-area | ElScrollArea | | separator | el-separator | ElSeparator | | resizable | el-resizable, el-resizable-panel, el-resizable-handle | ElResizable, ElResizablePanel, ElResizableHandle | | list | el-list, el-list-item | ElList, ElListItem, ElListItemDef | | tree | el-tree, el-tree-item | ElTree, ElTreeItem, ElTreeNodeDef | | infinite-scroll | [elInfiniteScroll] | ElInfiniteScroll | | attachment | el-attachment (+ parts) | ElAttachment, … | | file-upload | el-file-upload | ElFileUpload | | icon | el-icon | ElIcon | | tabs | el-tabs, el-tab | ElTabs, ElTab, ElTabContent, ElTabLabel | | stepper | el-stepper, el-step | ElStepper, ElStep, ElStepContent | | accordion | el-accordion, el-accordion-item | ElAccordion, ElAccordionItem, ElAccordionTitle, ElAccordionSubtitle, ElAccordionContent | | table | el-table, el-table-column | ElTable, ElTableColumn, ElTableHeader, ElTableCell, ElTableExpand | | pagination | el-pagination | ElPagination | | skeleton | el-skeleton, [elSkeleton] | ElSkeleton, ElSkeletonDirective | | breadcrumb | el-breadcrumb, el-breadcrumb-item | ElBreadcrumb, ElBreadcrumbItem | | tooltip | [elTooltip] | ElTooltip | | menu | el-menu, el-menu-panel, el-menu-item | ElMenu, ElMenuPanel, ElMenuItem, ElMenuTrigger | | menubar | el-menubar | ElMenubar | | popover | el-popover, el-popover-panel | ElPopover, ElPopoverPanel, ElPopoverTrigger | | dialog | el-dialog | ElDialog, ElDialogClose, ElDialogService | | sheet | el-sheet | ElSheet, ElSheetClose, ElSheetService | | drawer | el-drawer | ElDrawer, ElDrawerClose, ElDrawerService | | alert | el-alert | ElAlert | | toast | el-toast, el-toaster | ElToast, ElToaster, ElToastService | | snackbar | el-snackbar | ElSnackbar, ElSnackbarService | | empty-state | el-empty-state | ElEmptyState | | segmented-button | el-segmented-button, el-segmented-button-item | ElSegmentedButton, ElSegmentedButtonItem |

Requirements

• Angular 22+
• An existing Angular project (@angular/core in package.json, or angular.json / project.json)

Documentation

Full usage, typography setup, and component API reference:

https://github.com/AtulFalle/ng-elemental#readme

License

MIT