I’m starting a new open-source NPM package called Circadian UI 🌗
The idea is pretty simple — but I kept thinking:
why does this not exist as a clean, reusable default yet?
Most apps either ship a static theme or a manual Dark Mode toggle. But real usage isn’t static: morning vs late-night usage feels totally different, and so do our eyes, attention, and tolerance for contrast.
Circadian UI aims to be a small “default upgrade” for most React/Next.js projects:
- Time-aware theming (Dawn / Day / Dusk / Night)
- Tailwind-friendly tokens (CSS variables, HSL-based)
- WCAG contrast-aware by design (not a late patch)
- Next.js-ready + SSR-safe (no theme flash, clean hydration story)
- User control matters: opt-in, overrides, persistence, prefers-contrast / prefers-color-scheme support
The goal isn’t “another theme library”.
It’s more like: make the UI feel calm and right at any time of day — automatically — without being creepy or complex.
Where I want to take this
I’m building this in public and I’d love to turn it into a genuinely solid open-source package: clean API, great docs, good tests, and real-world ergonomics.
If you’re into React/Next.js DX, design tokens, accessibility, or just building polished tooling:
I’m very open to collaborating 🤝
Stuff I’d love help or feedback on:
- edge cases for phase scheduling and overrides
- a clean SSR + hydration strategy for Next.js App Router
- Tailwind integration patterns that feel “drop-in”
- contrast enforcement heuristics that stay visually consistent
- demo app ideas that prove the value fast
I’ll post the repo + first preview/demos soon — and if you want to co-build, feel free to reach out or drop a comment.
Let’s build something that makes people go: “wait… how was this not a standard already?” ✨
Top comments (0)