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

• 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

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” — polymorphic as and 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.

Related

• 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