Home
Courses
Learn React 19: The Complete Guide to Modern Web Apps

Challenge: Accessible, Themeable Component Library

Build a small “component library slice” that is accessible by default, themeable via design tokens, language-aware via i18n messages, and flexible via a headless dropdown API.

We'll cover the following...

Problem statement

Teams often ship UI components that look correct in one screen but fail when requirements change: a new theme, a new language, RTL layout, or a different visual treatment. The root issue is usually the same: logic, semantics, presentation, and content are coupled. Our job is to design a tiny library surface that stays stable under change by separating responsibilities:

  • Accessibility semantics and focus behavior are owned by the component logic.

  • Styling is owned by design tokens and a theme provider.

  • Text is owned by i18n messages with interpolation and pluralization.

  • Presentation is owned by consuming markup, using headless APIs.

Success criteria

By the end of the lesson, we can:

  • Switch themes (light/dark) without editing component code.

  • Switch locales (English/Arabic) with correct direction (ltr/rtl).

  • Render translated UI strings using message keys, interpolation, and pluralization.

  • Use a headless dropdown that provides behavior and a11y props, while the UI decides the markup.

  • Keep keyboard navigation correct (Arrow keys + Escape) and focus stable.=

Technical requirements: Implement the following features step by step:

  1. Theme provider applies design tokens (CSS variables) to the document root.

  2. Locale provider supports language switching and updates dir (ltr/rtl).

  3. Translation function supports:

    1. message lookup by key

    2. variable interpolation ({name})

    3. simple pluralization (one/other)

  4. Accessible banner uses semantic roles and stable structure:

    1. status region announces language/theme changes without remounting the whole page

  5. Headless dropdown:

    1. exposes trigger/menu/item prop-getters

    2. supports keyboard navigation (ArrowDown/ArrowUp/Escape)

    3. uses compound components (Dropdown.Trigger, Dropdown.Menu, Dropdown.Item)

    4. UI stays customizable (no hardcoded dropdown markup)

Project structure

Below is the hierarchy of the project files and folders: