Life is about deciding who you are: Join us and decide to be for environmental protection, free education and generous social security, human rights and international law, and, of course, action against oppression and violence (starting with helping the people of occupied Palestine 🇵🇸)! Hide

Frontend Dogma

“components” News Archive

Definition, related topics, and tag feed

Definition · Supertopics: programming · Subtopics: props, storybook, web-components (non-exhaustive) · “components” RSS feed (per email)

Entry (Sources) and Additional TopicsDate#
Configuration Collapse (nat)210
figma, configuration, props
Native HTML Components Don’t Guarantee Good UX (ada)209
html, user-experience
Design Systems Can’t Automate Away All of Your Accessibility Considerations (eri/zer)208
design-systems, automation, accessibility, aria
Building Bulletproof React Components207
react
Figma Slots for Repeating Items (nat)206
figma
How to Steal Any React Component205
react
Very Good Components (bee)204
websites, html
5 Accessibility Checks to Run on Every Component (hdv/zer)203
accessibility, testing, keyboard-navigation, design-tokens, microcontent, zooming, screen-readers
WASI 1.0: You Won’t Know When WebAssembly Is Everywhere in 2026 (the)202
webassembly, standards
Beyond Components: From Design System to Design Language System201
design-systems, link-lists
Intro to Performance of React Server Components (ade/per)200
introductions, performance, react, server-side-rendering
Denial of Service and Source Code Exposure in React Server Components (rea)199
react, security
Critical Security Vulnerability in React Server Components (rea)198
react, security
The Timing Problem in Design Systems (mur)197
design-systems
Tooltip Components Should Not Exist (tkd)196
tooltips
Learn React Server Components (jad)195
videos, tutorials, react
Using Composability Over Inheritance to Scale Design Systems (ase/zer)194
design-systems, scalability
One Year With Next.js App Router—Why We’re Moving On193
nextjs, react, routing, tooling
Making Context-Aware Components: How CSS “inherit()” Could Simplify Design Systems (stu)192
css, functions, custom-properties
Behind the Scenes of Maintaining a Design System Component191
design-systems, maintenance, maintainability
Can Native Web APIs Replace Custom Components in 2025? (dxn/log)190
apis, web-platform, disclosure-widgets, pop-overs
CSS Overrides Without “!important” Using Layers in Astro Components (jle/cod)189
astro, css, cascade
How Senior Frontend Developers Think About React Architecture188
react, architecture
Can Components Conform to WCAG? (hdv)187
accessibility, wcag, compliance
Refactoring the Button Component186
refactoring, buttons, figma, design-systems
React Router and React Server Components: The Path Forward (mar/rem)185
react, react-router, outlooks
It’s All About (Accessibility) Focus and Compose (eev)184
accessibility, focus, keyboard-navigation
How Imports Work in RSC (dan)183
react, modules, javascript
Architecting Components in Design Systems: Why It Feels Overwhelming (and How to Tackle It)182
design-systems
Comparing Rust, JavaScript, and Go for Authoring WASM Components181
webassembly, rust, javascript, go, comparisons
React Router RSC Preview (rem)180
react, react-router
Dependency Inversion in React: Building Truly Testable Components179
react, testing
Towards React Server Components in Clojure (rom)178
clojure, react
The Growing Divide Among React Developers… (fir)177
videos, react, nextjs, vercel
Done With Components (don)176
design-systems
Impossible Components (dan)175
react, state-management
React Reconciliation: The Hidden Engine Behind Your Components174
react, dom
React Server Confusion (ano)173
react, vite, fastify
How WebAssembly Components Can Replace JavaScript SDKs (sac)172
webassembly, javascript
Naming Things in Design Systems—and Why It’s the Worst (pjo)171
design-systems, naming
Web Components vs. Framework Components: What’s the Difference? (sma)170
web-components, frameworks, html, comparisons
How Do We Know What Components to Work On? (lur/zer)169
design-systems, prioritization
Organizing Design System Component Patterns With CSS Cascade Layers (mrt/css)168
design-systems, css, cascade
How to Bring Structure and Clarity to Design System Components167
how-tos, design-systems, documentation, conventions, information-architecture
Introducing Fusion: Write PHP Inside Vue and React Components (eri/lar)166
introductions, tooling, php, vuejs, react
Considerations for Making a Tree View Component Accessible (eri/git)165
accessibility, keyboard-navigation, aria, case-studies
Open Props UI164
css, props
Your First Component (don)163
design-systems
Customize Interpolation Syntax in Angular at Component Level162
angular, customization
React.js Best Practices for Beginners: A Comprehensive Guide161
guides, best-practices, react, state-management, hooks, debugging
The Myth of “Accessible Components and Done” (mic)160
accessibility, myths
Component Spec: The Design System Component Delivery (uxd)159
design-systems, documentation, figma
Better Vue Components With TypeScript (fad)158
vuejs, typescript, examples
Standalone Components Are the Future157
videos, angular
Create a Toggle Switch in React as a Reusable Component156
react, toggles, sass, maintainability, functionality
Going Buildless (mxb)155
building, html
Design Systems Should Do Less (uxd)154
design-systems, simplicity
Advanced Figma Components Tips and Tricks: Little Gems We Love 2024 (uxd)153
figma, tips-and-tricks
Design Tokens Demystified (uxd)152
design-tokens, design-systems
What Is a Component Library and Should You Build Your Own? (and)151
And Now You Understand React Server Components (ken)150
videos, react
Assessing Components and Patterns for WCAG 2.2149
accessibility, wcag, design-patterns
MDX or: How I Learned to Stop Worrying and Love Multimedia Writing (fre/sma)148
markdown, mdx
Define Your Rock-Solid Design System Components147
design-systems
Decision Trees for UI Components (vit/sma)146
design, processes
Lazy Load Components in Nuxt to Improve Performance145
nuxt, performance, lazy-loading
Best Practices for Naming Design Tokens, Components, Variables, and More (sma)144
naming, design-tokens, variables, best-practices
When Should We Use Components and When Should We Just Use HTML? (chr)143
html, web-components
The Dilemmas You’ll Face When Creating a Component Library (and)142
libraries
Make Your Figma Components Work Harder (uxd)141
figma, design-systems
How We’re Building More Inclusive and Accessible Components at GitHub (eri/git)140
accessibility, dei, case-studies, github
Composability in Design Systems (ada)139
design-systems, design
CSS in React Server Components (jos)138
css, javascript, react, css-in-js
React Server Components in a Nutshell (the)137
react
Building Components With Radix UI136
radix
No Outer Margin135
css, margins, spacing
Patterns in Design Systems (ikn)134
design-systems, design-patterns
Use Tailwind CSS Prefixes for Shared Design System Components (sen)133
tailwind, design-systems
5 Advanced Data-Fetching Techniques in React for Enhanced User Experience132
react, data-fetching, code-splitting, techniques
Vue 3—Dynamic Components131
vuejs
The Two Reacts (dan)130
react, state-management
React Server Components: The Good, the Bad, and the Ugly (may)129
react
Server and Client Component—Next.js (fro)128
nextjs, react
Building Components for Consumption, Not Complexity II (dis/sma)127
design-systems, figma
Building Components for Consumption, Not Complexity (dis/sma)126
design-systems, figma
Better Vue.js Inputs With Generics: The Select125
vuejs, generics
Headless Component: A Pattern for Composing React UIs (mfo)124
react, headless
Quick Tip: Creating Polymorphic Components in TypeScript123
tips-and-tricks, typescript
Extending the Properties of an HTML Element in TypeScript122
html, typescript
Let’s Create a Filter Table Component in Vue121
videos, tables, vuejs
v0.dev120
websites, tooling, ai, react, tailwind
Why Your Design System Needs a Component Process119
design-systems, processes
Making Sense of React Server Components (jos)118
react
Writing Component Specs117
documentation, writing
Understanding React Server Components116
react
Testing a Component’s Accessibility115
videos, accessibility, testing
From Hacks to Elegance: Transforming a Card Component With Modern CSS Wizardry (9el)114
css, refactoring, maintenance
Component Driven User Interface Testing (CDUIT)113
testing
Radix UI Component With Next.js and Tailwind CSS112
videos, radix, nextjs, tailwind
Create React UI Lib: Component Library Speedrun111
typescript, react, npm
Rebuilding a Comment Component With Modern CSS (sha)110
functionality, css
Naming Components109
design-systems, naming
Modern CSS for Dynamic Component-Based Architecture (5t3)108
css, architecture
RSC From Scratch: Server Components107
videos, react
Accessible Components: The Hamburger Menu106
accessibility, navigation
Quick Tip: Shipping Resilient CSS Components (5t3)105
css, maintainability, resilience, tips-and-tricks
Advanced Figma Components Tips and Tricks: Little Gems We Love (uxd)104
figma, design, tips-and-tricks
Fighting Inter-Component HTML Bloat (eli)103
html, semantics, quality
How to Stop a React Component From Rendering (ami)102
how-tos, react, client-side-rendering
Internationalization in Next.js 13 With React Server Components (sma)101
internationalization, nextjs, react
My Ideal Accessible Components Resource Is Holistic, Well Tested and Easy to Use (hdv)100
accessibility
A Tab Interface Before Its Time (aar)99
html
Component Specifications (nat)98
design-systems, documentation
A Minimal, Multi-Framework, Responsive Image Component (asc)97
responsive-design, frameworks
Modularizing React Applications With Established UI Patterns (mfo)96
react, modules
Testing Vue Components the Right Way95
vuejs, vitest, testing
Invoking React Components From Your Ember Apps94
emberjs, react
The Key to Good Component Design Is Selfishness (sma)93
developer-experience, maintainability
Cascading Components—a Way to Organize Figma Component Variants92
figma
Radix UI: An Unstyled UI Component Library for React91
libraries, react, radix
Should Design Systems Include Problematic Components and Patterns? (amy)90
design-systems, design-patterns
Foundations: Native Versus Custom Components (tet)89
accessibility, fundamentals, html, comparisons
Tips for Design System Component Pages88
design-systems, documentation, consistency, tips-and-tricks
Building a Tooltip Component (arg/dev)87
tooltips, html, css
A Little Semantic HTML Trick for React Components86
react, html, semantics, tips-and-tricks
Adding Components to Eleventy With WebC (zac)85
eleventy, webc
Component-Level Design Tokens: Are They Worth It?84
design-tokens
PureComponents vs. Functional Components With Hooks (ade)83
react, hooks, comparisons
12 Modern UI Components to Inspire Your Future Designs82
design
A Content Warning Component (kit)81
html, css
Building Accessible Select Components in React80
react, forms, accessibility
How to Research Components and Patterns: Common Challenges and How to Overcome Them79
how-tos, design-systems
Truly Portable Design Patterns (clo)78
design-patterns
Super-Helpful Tips When Working With Figma Component Properties (uxd)77
figma, tips-and-tricks
Notes on Maintaining an Internal React Component Library76
react, maintenance, libraries
You Don’t Need a JavaScript Library for Your Components75
javascript, libraries
Dialog Components: Go Native HTML or Roll Your Own? (css)74
modals, accessibility
Building a Button Component (arg/dev)73
html, css, javascript, buttons
Testing Figma Components (nat)72
testing, figma
Building a Dialog Component (arg/dev)71
modals, html, css, javascript
Component Party70
websites, frameworks, comparisons, react, svelte, qwik, vuejs, angular, lit, emberjs, solidjs, alpinejs, marko
Building a Loading Bar Component (arg/dev)69
html, css, javascript
How to Use Spectator to Test Your Angular Components68
how-tos, testing, tooling, angular
Higher-Order Components in React Hooks Era (ade)67
react, hooks
Component Tokens and Themes Example (to Learn Figma Tokens) (fig)66
design, theming, design-tokens, figma
How to Prioritize Your Components (zer)65
how-tos, design-systems, prioritization
Accessibility Acceptance Criteria64
websites, accessibility, testing
Building UI Components With SVG and CSS (sha)63
svg, css
Rethinking Component Libraries62
Rationalise It! 5 Steps to Introduce a New Component to the Design System61
design-systems
Where Do You Put Spacing on Design System Components? (eri)60
design-systems, design, spacing
How to Create Reusable Components With the Vue 3 Composition API59
how-tos, vuejs, maintainability
Designing a Reorderable List Component58
lists, html, css
Building Real-Life Components: Facebook Messenger’s Chat Bubble (sha)57
html, css
Building an Effective Image Component (dev)56
javascript, performance
HTML With Superpowers (dav)55
videos, html
Building a Multi-Select Component (arg/dev)54
html, css, javascript
Introduction to Styled Components53
introductions, css, javascript
Developer Decisions for Building Flexible Components (mic/sma)52
A Practical Guide to Creating Reusable React Components51
guides, react, maintainability
Building a Split-Button Component (arg/dev)50
html, css, javascript
Building a Stepper Component (sha)49
html, css
Compound Components in React (sma)48
react
How We Built React Components for Any Front End47
react, case-studies
Demystifying Styled Components (jos)46
css, javascript
Component-Specific Design Tokens (clo)45
design-tokens
What Makes a Great Component Library?44
libraries
Don’t Overabstract Your Components43
html, javascript
The New Responsive: Web Design in a Component-Driven World (una/dev)42
responsive-design, css
Rethinking Component Libraries41
Designing Adaptive Components, Beyond Responsive Breakpoints (ste)40
videos, responsive-design
Understanding Design Systems—Designing Component APIs39
design-systems, apis
A Complete Guide to Accessible Front-End Components (vit/sma)38
guides, accessibility, focus, buttons, carousels, color-palettes, visualization, testing
How to Test the Accessibility of Your Components With Storybook (bol)37
how-tos, accessibility, storybook
One Figma Component—3,360 Variants (uxd)36
figma
DRY-ing Up styled-components (css)35
css, maintainability
Animating React Components With GreenSock (sma)34
react, gsap, javascript, animations
Higher-Order Components in React (sma)33
react
Building Reusable React Components Using Tailwind (sma)32
react, tailwind, maintainability
Styling Components in React (sma)31
react, css, sass, css-in-js, javascript
Implementing Dark Mode in React Apps Using styled-components (sma)30
dark-mode, react, javascript
The Component Gallery29
websites
Margin Considered Harmful28
css, margins
How to Pass Data Between Components in Vue.js (sma)27
how-tos, vuejs
How to Get Started With Vuetify26
how-tos, libraries, vuetify
Writing Resilient Components (dan)25
resilience
A Complete Guide to “useEffect” (dan)24
guides, react, hooks
Component-Based JavaScript Architecture (sea)23
javascript, architecture
How to Import a Sass File Into Every Vue Component in an App (sar/css)22
how-tos, vuejs, sass
Component Reusability in React and Vue21
react, vuejs, maintainability
CSS-in-JS (bri)20
css-in-js, css, javascript
What Are Higher-Order Components in React? (css)19
react
Creating Vue.js Component Instances Programmatically (css)18
vuejs
A Guide to Testing React Components17
guides, react, testing
Using Custom Properties to Modify Components (fon/css)16
custom-properties, css
CSS Utility Classes and “Separation of Concerns” (ada)15
css, presentational-html
What Does a Well-Documented CSS Codebase Look Like? (css)14
css, documentation, tooling, conventions, architecture
Componentizing a Framework (chr/css)13
frameworks
Intro to Vue.js: Components, Props, and Slots (sar/css)12
introductions, vuejs, props
Developing Extensible HTML and CSS Components (jon/css)11
html, css, extensibility
Component-Driven CSS Frameworks10
frameworks, css, bootstrap, foundation, pure
Nesting Components9
nesting
Designing Front-End Components8
best-practices
Demystifying React Components State7
react, state-management
The Role of Utility Classes in Scalable CSS6
css, presentational-html, scalability, maintainability, consistency
Thinking in Components5
web-components
CSS: The Good Parts4
css, namespaces, conventions
The Road to Reusable HTML Components (sma)3
html, css, maintainability
The Atlas Project (nza)2
microsoft, ajax, javascript
A Component Testing Method1
testing