I built Frontalign because I was tired of retrofitting dark mode and chasing WCAG contrast fails on every project. It's a lightweight CSS design system with OKLCH color tokens, AA-compliant contrast baked in, and light/dark themes that just work out of the box. Free core + premium UI blocks for teams who want more. Zero-config, SSR-safe, ready in minutes. Just not and CSS framework This is game-changer UI Engine for any enviroment.Built solo, shipped with care — would love your feedback! 🙌
We are continuously keeping the FrontAlign framework up-to-date and vibrant. In our latest releases, we fix potential bugs and work on new features. Version 1.0.9 is available you can try it by simply running npm install frontalign.
No reviews yetBe the first to leave a review for FrontAlign
Maker
📌
Hey Product Hunt! 👋
I'm Eyruz, solo builder of FrontAlign.
I built this because I kept hitting the same wall: Tailwind gives you a great utility-first workflow with JIT, but you're on your own for actual components. Bootstrap gives you components, but you lose the utility-first speed and it's not built for how CSS looks in 2026. I didn't want to duct-tape two separate tools together for every project, so I built one system that does both — properly integrated, not bolted on.
What's in it:
🎨 OKLCH-based color tokens + modern @layer architecture
⚡ A JIT compiler with configurable breakpoints
⚛️ A full React adapter with typed hooks
🧩 A complete component library — Modal, Carousel, Drawer, Range, Select, and more
🔒 SSR-safe by default, so it drops cleanly into Next.js and other SSR frameworks with no hydration surprises
It's a solo project — every line of the compiler, the components, and the docs is mine, so I'd genuinely love to hear what breaks, what's missing, and what you'd want next. I'll be here all day answering everything.
Thanks for checking it out! 🙏
Report
🎯 FrontAlign
CSS frameworks are everywhere, so differentiation is tough.
What workflow do you think FrontAlign makes fundamentally simpler rather than just slightly faster?
Feels like that's where long-term adoption comes from.
Report
Maker
@aryan787544 Hi Aryan! Great question! The core workflow FrontAlign fundamentally simplifies—rather than just speeding up—comes down to two major developer headaches: dynamic DOM updates and theming lifecycle management.
Here is where it changes the workflow:
Zero-reinit Dynamic UIs: In traditional setups, when dynamic content is injected via AJAX, SPAs, or HTMX, you usually have to write glue code to re-initialize components or bind JS listeners. With FrontAlign’s Smart Observer Runtime (MutationObserver), you simply drop elements like fa-component="modal" into the DOM, and they boot up automatically. No manual reInit() or lifecycle tracking required.
Flexible Runtime + Build-time Configuration: Most frameworks force a choice between pure build-time optimization or runtime flexibility. FrontAlign gives you both:
Build-time JIT: Purges unused CSS via frontalign.config.js for lightweight production builds.
Runtime Theming: Change themes instantly on the fly with new FrontAlign({ theme }) without re-compiling your CSS. Combined with our modern OKLCH color system, perceptually balanced contrast is preserved automatically during live theme swaps (great for multi-tenant SaaS or customizable dashboards).
Unified Stack: Instead of patching together Tailwind + JS plugins + Skeleton libraries + Form validation tools, FrontAlign provides a zero-dependency, unified engine that handles it all in one clean system.
So the long-term value isn't just writing CSS faster—it's eliminating the glue code and build pipeline hacks needed to handle modern dynamic interfaces.
Report
@eyruz Really enjoyed this conversation. I have a feeling FrontAlign is one of those products whose positioning will evolve as you learn from users.
If you're open to it, what's the best email to reach you on? I'd love to stay in touch and follow your journey.
Report
Maker
@aryan787544 Thank you! I really appreciate your thoughtful feedback. I agree that FrontAlign's positioning will evolve as more developers start using it and sharing their experiences.
The best way to reach me is eyruz@frontalign.dev. You can also connect with me on X (Twitter) or LinkedIn if you prefer. I'd be happy to stay in touch!
Looking forward to hearing your thoughts whenever you have a chance.
Report
honestly the OKLCH + WCAG combo sounds super useful, but would be huge if you could add a visual color picker where devs can tweak tokens and see the contrast scores update live. saves a lot of back-and-forth.
Report
Maker
@bilalstnteuv6m Bilal, funny timing — your comment sent me down a rabbit hole and I already have a rough prototype working: sliders for L/C/H on both tokens, swatch preview, and the contrast ratio + AA/AAA badges updating live as you drag. Turned out simpler than I expected since it's all self-contained, no external libs needed. Going to polish it into a real playground page — will share it here once it's live.
Report
Nice work shipping this solo, the OKLCH tokens with built-in AA contrast are a real time saver. One thing that would level it up for me — a Figma plugin that mirrors the token system so designers can preview light and dark variants before handoff. That would close the loop between design and code without anyone having to eyeball hex values.
Report
Maker
@kucuksahal10675 Thank you Nehir, this genuinely made my day — thank you! The OKLCH + AA contrast setup took a lot of late nights, so hearing it's actually saving you time means a lot. And the Figma plugin idea is a really good one — filing it away as a strong next step. Appreciate you being here on day one 🙌
Report
Love seeing a solo-built CSS system focused on real pain points like contrast and theming. One thing that would make this even more useful for me: a CLI or Figma plugin that syncs my OKLCH tokens both ways, so I can tweak colors in design and push directly to the codebase without manual copy-paste. Would save a ton of back-and-forth.
Report
Maker
@sakar_gulh22939 Gülhan, thank you — that really means a lot, especially building this solo. Contrast and theming were the two things I cared about getting right, so I'm glad it shows. The CLI/two-way sync idea is great too, noting it down as a strong candidate for what's next. Thanks for showing up early 🙌
🎯 FrontAlign
CSS frameworks are everywhere, so differentiation is tough.
What workflow do you think FrontAlign makes fundamentally simpler rather than just slightly faster?
Feels like that's where long-term adoption comes from.
@aryan787544 Hi Aryan! Great question! The core workflow FrontAlign fundamentally simplifies—rather than just speeding up—comes down to two major developer headaches: dynamic DOM updates and theming lifecycle management.
Here is where it changes the workflow:
Zero-reinit Dynamic UIs: In traditional setups, when dynamic content is injected via AJAX, SPAs, or HTMX, you usually have to write glue code to re-initialize components or bind JS listeners. With FrontAlign’s Smart Observer Runtime (MutationObserver), you simply drop elements like fa-component="modal" into the DOM, and they boot up automatically. No manual reInit() or lifecycle tracking required.
Flexible Runtime + Build-time Configuration: Most frameworks force a choice between pure build-time optimization or runtime flexibility. FrontAlign gives you both:
Build-time JIT: Purges unused CSS via frontalign.config.js for lightweight production builds.
Runtime Theming: Change themes instantly on the fly with new FrontAlign({ theme }) without re-compiling your CSS. Combined with our modern OKLCH color system, perceptually balanced contrast is preserved automatically during live theme swaps (great for multi-tenant SaaS or customizable dashboards).
Unified Stack: Instead of patching together Tailwind + JS plugins + Skeleton libraries + Form validation tools, FrontAlign provides a zero-dependency, unified engine that handles it all in one clean system.
So the long-term value isn't just writing CSS faster—it's eliminating the glue code and build pipeline hacks needed to handle modern dynamic interfaces.
@eyruz Really enjoyed this conversation. I have a feeling FrontAlign is one of those products whose positioning will evolve as you learn from users.
If you're open to it, what's the best email to reach you on? I'd love to stay in touch and follow your journey.
@aryan787544 Thank you! I really appreciate your thoughtful feedback. I agree that FrontAlign's positioning will evolve as more developers start using it and sharing their experiences.
The best way to reach me is eyruz@frontalign.dev. You can also connect with me on X (Twitter) or LinkedIn if you prefer. I'd be happy to stay in touch!
@eyruz Thanks! I’ve just sent it over.
Looking forward to hearing your thoughts whenever you have a chance.
honestly the OKLCH + WCAG combo sounds super useful, but would be huge if you could add a visual color picker where devs can tweak tokens and see the contrast scores update live. saves a lot of back-and-forth.
@bilalstnteuv6m Bilal, funny timing — your comment sent me down a rabbit hole and I already have a rough prototype working: sliders for L/C/H on both tokens, swatch preview, and the contrast ratio + AA/AAA badges updating live as you drag. Turned out simpler than I expected since it's all self-contained, no external libs needed. Going to polish it into a real playground page — will share it here once it's live.
Nice work shipping this solo, the OKLCH tokens with built-in AA contrast are a real time saver. One thing that would level it up for me — a Figma plugin that mirrors the token system so designers can preview light and dark variants before handoff. That would close the loop between design and code without anyone having to eyeball hex values.
@kucuksahal10675 Thank you Nehir, this genuinely made my day — thank you! The OKLCH + AA contrast setup took a lot of late nights, so hearing it's actually saving you time means a lot. And the Figma plugin idea is a really good one — filing it away as a strong next step. Appreciate you being here on day one 🙌
Love seeing a solo-built CSS system focused on real pain points like contrast and theming. One thing that would make this even more useful for me: a CLI or Figma plugin that syncs my OKLCH tokens both ways, so I can tweak colors in design and push directly to the codebase without manual copy-paste. Would save a ton of back-and-forth.
@sakar_gulh22939 Gülhan, thank you — that really means a lot, especially building this solo. Contrast and theming were the two things I cared about getting right, so I'm glad it shows. The CLI/two-way sync idea is great too, noting it down as a strong candidate for what's next. Thanks for showing up early 🙌