8 min read
Copy-paste components vs an npm component library
When to copy component source into your React project and when to install a versioned package: ownership, upgrades, bundle size, and how to use both.
ArchitectureReact
Blog
Notes on building interfaces
Practical guides on React components, Tailwind CSS v4, design tokens, colour, and accessibility, written while building Aback UI.
RSS feed- 9 min read
Design tokens in Tailwind CSS v4 with @theme
How to build a semantic token layer in Tailwind CSS v4: @theme, @theme inline, CSS variables for light and dark, and naming roles instead of colours.
Tailwind CSSDesign tokens - 7 min read
Dark mode in React and Next.js without a flash
Why the wrong theme flashes on load and how to fix it: a blocking script before paint, the class strategy, system preference, and hydration warnings.
Dark modeNext.js - 8 min read
Accessible modal dialogs in React: a checklist
Everything an accessible React dialog has to do: role and labelling, focus entry, focus trap, Escape, focus return, scroll lock, and how to test each one.
AccessibilityReact - 7 min read
WCAG colour contrast for UI developers
The WCAG 2.2 contrast rules in practice: 4.5:1 and 3:1, large text, non-text contrast for borders and focus rings, and the mistakes that fail audits.
AccessibilityColor - 8 min read
OKLCH colours in CSS for design systems
What OKLCH is, why Tailwind CSS v4 uses it, how it compares with HEX and HSL, and how to build an even colour scale from one brand colour.
ColorCSS - 7 min read
Aback UI vs shadcn/ui: an honest comparison
How Aback UI and shadcn/ui differ in design language, install model, package option, theming, and scope, and when each one is the better choice.
Comparison