Stats
Actions
Available In
Tags
Plugin
atomic-design
Generate hierarchical UI components following Atomic Design—from quarks and atoms to molecules, organisms, templates, and pages—for React, Vue, Angular projects with TypeScript templates, CSS organization, folder structures, barrel exports, and a11y best practices to enforce scalable design systems.
What's Inside
Skills7
atomic-design-atoms
/atomic-design-atoms
Use when creating atomic-level UI components like buttons, inputs, labels, and icons. The smallest building blocks of a design system.
atomic-design-fundamentals
/atomic-design-fundamentals
Use when applying Atomic Design methodology to organize UI components into quarks, atoms, molecules, organisms, templates, and pages. Core principles and hierarchy.
atomic-design-integration
/atomic-design-integration
Use when integrating Atomic Design methodology with React, Vue, Angular, or other frameworks. Framework-specific implementation patterns.
atomic-design-molecules
/atomic-design-molecules
Use when composing atoms into molecule components like form fields, search bars, and card headers. Molecules are functional groups of atoms.
atomic-design-organisms
/atomic-design-organisms
Use when building complex organisms from molecules and atoms like headers, footers, product cards, and sidebars. Organisms are distinct UI sections.
Stats
Version1.1.0
Released
LanguageTypeScript
Stars152
Forks16
Copy clicks2
MaintenanceFair
LicenseApache-2.0
Last Commit
Added
Available In
Tags
Categories
