Design system core

Write a design system core with a theme and base components.

Design system core

In the second step you will write a ThemeProvider. This provider carries theme information to the whole app and shares it with createContext.

The starting code includes the previous Button solution; so the project grows in a single file. ThemeProvider keeps the theme with useState('light').

Child components read and change the theme with useContext.

Provider and value

ThemeProvider returns a ThemeContext.Provider. The value prop carries { theme, setTheme }; so children both read and change.

This pattern lets you share state without passing props through every layer. In a design system it is used for theme, language or cart state.

Even if the provider re-renders the value reference should stay stable.

Exercise Write the ThemeProvider component

Write ThemeProvider. Import createContext and useState. Set ThemeContext = createContext(). Write function ThemeProvider({ children }). Keep theme and setTheme with useState('light'). Return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>. Export it.

Show example solution

import { createContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
export default ThemeProvider;

Test yourself

Fill in the blank: create a context

import { createContext, useState } from 'react';

const ThemeContext = ____();

Show answer

import { createContext, useState } from 'react';

const ThemeContext = createContext();

What does ThemeProvider return?
- useState
- useEffect
- ThemeContext.Provider
- Button
Show answer

ThemeContext.Provider — ThemeProvider returns a Provider component.
Match provider concepts

createContext

Creates a context
Provider

Shares the value
value

Theme and setter
useContext

Reads the value

Next lesson: Page with server components

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies