How to build your reusable UI component library like a pro
summary
Argues for building reusable React components as block-level units (not tiny atoms), centralizing styles in BEM CSS/Sass style guides, and wiring components into a live docs/CMS pipeline. Shows a working demo of CMSDriven that registers React components, auto-generates editable prop forms and documentation, and lets non-devs assemble pages by drag‑and‑drop so content changes go live without code or deploys. Claims the approach preserves SEO and speeds marketing page delivery.
AI-written summary · about
chapters (26)
- 0:00Intro
- 1:31UI Components
- 4:43Every Single Atom
- 10:06CSS
- 11:20Atomic Components
- 12:20UI Block Elements
- 13:28UI Component Documentation
- 15:00Block Element Modifier
- 16:16Namespace
- 17:51Secondary
- 18:38segregation principle
- 19:51problem with content changes
- 20:45slow process
- 21:58Tech vs UX
- 22:34Brandon Authority
- 24:03Pros and Cons
- 25:28Headless CMS
- 28:38Statistics
- 29:22Traditional CMS
- 34:07Page
- 35:06Import
- 35:34Form
- 36:46reordering components
- 37:12no code changes
- 37:52code in silence
- 41:38focus group
related talks
46mBuilding Reusable Components ... That Are Actually Reusable
23mBest Practices for reusable UI components
44mBest Practices on building a UI component library for your company
38mWriting highly reusable React components
24mCase Study: Creating a Component Library in React JS
14mBuilding a component library with React, Vue, Angular or WebComponents
24mDesigning Components for Fun, Profit and Sanity
35mBuilding reusable UI libraries with React