A first example

createContext(defaultValue?) returns the context. The context object is also the provider component: render it around a subtree with a value, and read the value below it with useContext.

import { createContext, useContext } from "@shadow-js/core";

export const ThemeContext = createContext<"light" | "dark">("light", { name: "Theme" });

export function Label() {
  const theme = useContext(ThemeContext);
  return <p>Theme: {theme}</p>;
}

export function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Label />
    </ThemeContext.Provider>
  );
}

<ThemeContext.Provider value={...}> and <ThemeContext value={...}> are the same component; Context.Provider points at the context function itself. Use whichever reads better. useContext(context) returns the value of the nearest provider above the calling owner.