How to use React Context effectively

Kent C. Dodds kentcdodds.com/blog/how-to-use-react-context-effectively

Design type: Developer blog article
Page tags: article typography dark code blocks callouts long form author bio related posts blog
Site tags: dark personal developer
Vocabulary: narrow reading columnwide-bleed hero imageback linktranslation pillscoloured callout boxesleft-border admonitionfull-bleed code blocksline highlightingfilename captionlanguage badgeauthor bio cardcta cardrelated posts griddark syntax theme
Prompt: Show prompt
Build a dark, long-form technical article page for [Your name]'s blog, with comfortable reading and rich code samples. Global shell (reuse on every page): near-black charcoal background #1f2028, raised panels #2a2d36, hairline dividers #2f323b. Text #ffffff for headings, #9aa0aa for muted copy. A neutral grotesk sans throughout (Matter, Inter or similar), medium weight, tight tracking on headings. Header: wordmark [Your name] + round search icon button on the left, centred row of small nav links (active link gets a short underline), round theme-toggle and avatar buttons on the right. Content sits in a ~1000px column with generous vertical rhythm (120–160px between sections). Signature link style: bold label followed by a 40px outlined circle holding an arrow, the circle fills on hover. Footer: four columns (name + tagline + social icons + signature, Contact/General link lists, Sitemap list, newsletter form with two tall filled inputs and a "Sign me up →" circle-arrow button), then a small copyright line. Layout: the prose sits in a narrow ~680px column. Images and code blocks break out wider (~820px) and stay centred. - Article header: "← Back to overview" link, a ~32px white [Article title], muted "[Date] — [N] min read", and a small pill "☆ Favourite" button on the right. - Hero: a wide rounded image ([Hero image]). - A row of small dark pill buttons for translations/related tags, ending in a plain "Add translation" link. - Body: 15–16px muted grey (#b6bac2) text with 1.75 line-height, bold and links in white, inline code in bold mono with literal backticks, and H2s at ~24px white with lots of space above. - Callouts: tinted boxes with a 3px left border and matching text colour, in red (warning, #e5484d on #3a1f24), blue (info, #4aa3ff on #1e2a3d), yellow (tip, #f5c84b on #3a3420) and green (success, #46c46b on #1f3326). - Code blocks: a very dark navy background (#0b1622), a tiny filename caption at top-left, line numbers, a pastel syntax theme, highlighted lines given a lighter band plus a magenta left bar, and the language label at bottom-right. - Footer of the article: a centred promo card, a "Share / Discuss / Edit on GitHub" row above a divider, and an author block (circular photo on the left; name, bio and circle-arrow link on the right). Then a bordered raised card "[Question CTA]" with a circle-arrow action, and a two-tone "[You might also like]" heading over 3 portrait image cards. Responsive: below 768px the code blocks go full-bleed edge to edge and the author block stacks.
Added: 26 Oct 2026

Esc gallery · ← → pages

Full-page screenshot of How to use React Context effectively on Kent C. Dodds