NgAtoms

Angular UI primitives you own.
No runtime dependency — copy components directly into your project.

---

Quick Start

# 1. Initialize your project
npx ngatoms init

# 2. Add a component
npx ngatoms add button

Components

Full docs and previews at ngatoms.com.

Component	Description	Tier	Status
accordion	Collapsible items, single or multiple mode	—
alert	Feedback messages — 5 variants	—
avatar	Image with fallback initials or icon	—
badge	Labels — 5 variants	—
button	5 variants, 5 sizes, loading state, icon support	—
card	Container with header, content, footer slots	—
checkbox	Checked, unchecked, and indeterminate states	—
dialog	Modal using native <dialog>, focus trap, backdrop	—
input	3 variants, 5 sizes, invalid state	—
progress	Progress bar — determinate and indeterminate	—
radio-group	Radio button group with keyboard navigation	—
select	Styled native select — 3 variants, 5 sizes	—
separator	Horizontal or vertical divider	—
spinner	Loading spinner	—
switch	Toggle switch — 3 sizes	—
tabs	Underline and pills variants, keyboard navigation	—
textarea	Multiline input with auto-resize	—
tooltip	Floating label — 4 placements, viewport clamping	—
date-picker	Calendar overlay for date selection	1
dropdown-menu	Contextual action menu	1
number-input	Numeric input with increment/decrement controls	1
popover	Floating content anchored to a trigger	1
breadcrumb	Hierarchical navigation trail	2
combobox	Text input with filtered dropdown	2
file-upload	Drag-and-drop file input zone	2
pagination	Page navigation controls	2
slider	Range slider — single and dual thumb	2
stepper	Multi-step wizard progress indicator	2
tag-input	Input that creates removable tag chips	2
code-block	Syntax-highlighted code display	3
color-picker	HSL/hex color selector	3
context-menu	Right-click triggered menu	3
drawer	Side-panel overlay	3
rating	Star rating input	3
skeleton	Placeholder loading shimmer	3
timeline	Vertical event timeline	3
tree	Collapsible tree view	3

Monorepo Structure

ngatoms/
├─ packages/
│  ├─ ngatoms        # Published CLI
│  ├─ primitives     # Angular UI primitive components
│  ├─ tokens         # Design tokens / CSS variables
│  └─ utils          # Shared utilities
├─ apps/
│  └─ docs           # Documentation site → ngatoms.com
├─ registry/         # Component registry metadata
└─ tools/            # Build and publishing scripts

Development

npm install
npm run build
npm run test
npm run lint

Release Channels

Branch	npm tag	Description
main	latest	Stable
lts	lts	Long-term support
rc	rc	Release candidate

License

MIT