Component Libraries & Styling — Senior Interview Prep

How senior frontend engineers think about UI building blocks: when to adopt styled vs headless libraries, how to keep components flexible (polymorphic as), how to scale design decisions (tokens), and the trade-offs across styling approaches in the RSC era.

Files

Topic
Headless UI and Radix — behavior + a11y, you bring styles
Polymorphic components — the `as` prop and its typing
Design tokens and theming at scale
Styling approaches — CSS Modules, Tailwind, CSS-in-JS, zero-runtime

Library-specific

Library	Files
Material UI	core principles · components & theming · advanced theming
Tailwind	core principles · utility classes

How an interviewer probes this area

“Styled library or headless — how do you choose?” — design control + a11y vs speed. See headless_ui_and_radix.md.
“Make <Button> render as a link” — polymorphic as and how you’d type it. See polymorphic_components.md.
“How do you support dark mode / multi-tenant theming?” — semantic tokens + CSS variables. See design_tokens_and_theming.md.
“Why is CSS-in-JS discouraged in the App Router?” — runtime cost + RSC boundary. See styling_approaches.md.

Cross-references

Accessibility of components: ../16_accessibility/06_accessible_components.md
React typing for component props: ../04_typescript/08_react_typing.md
CSS fundamentals (variables, cascade): ../02_css/
Rendering modes (RSC + styling): ../19_rendering_modes/