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
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.
- “Make
<Button>render as a link” — polymorphicasand how you’d type it. See Polymorphic Components (the as prop). - “How do you support dark mode / multi-tenant theming?” — semantic tokens + CSS variables. See Design Tokens and Theming at Scale.
- “Why is CSS-in-JS discouraged in the App Router?” — runtime cost + RSC boundary. See Styling Approaches.
Cross-references
- Accessibility of components: Accessible Components (APG Patterns)
- React typing for component props: Typing React Components
- CSS fundamentals (variables, cascade): CSS
- Rendering modes (RSC + styling): Rendering Modes — Senior Interview Prep