Build with utilities. Ship with components. Power everything with one lightweight runtime engine. From prototype to production at lightspeed.
<div class="bg-white dark:bg-slate-900 text-black dark:text-white border-gray-200 dark:border-slate-800..."><html fa-theme="dark">
<div class="card bg-surface text-body">...</div>
</html>FrontAlign gives you the speed of utilities, the confidence of components, and the control of a semantic design system.
Start with utility classes when you need speed. Switch to ready components when the interface needs structure.
Modals, drawers, tabs, and dark mode work seamlessly through one lightweight JavaScript engine.
Change a semantic token and buttons, badges, forms, and surfaces instantly follow your design language.
Use the exact same engine in static HTML or React applications — without locking your stack.
Install the framework, initialize it once, and let FrontAlign handle components, themes, dark mode, and dynamic DOM updates.
Switch steps or tabs to preview the matching setup code.
FrontAlign is a single engine that carries you from a CDN prototype to a production React app without a rewrite along the way.
Utility classes for speed, ready-made components for structure, and one semantic token layer that keeps every surface, button and badge in sync — on any stack you ship to.
Every fa-component mounts through one shared IntersectionObserver, 100px before it scrolls into view. Nothing off-screen initializes.
A single MutationObserver watches the DOM tree and wires up components the instant React, Vue, or plain HTML injects new markup.
faConfig({ theme }) writes --primary, --body, --space-* to :root. [fa-theme="dark"] swaps them, no rebuild step.
useModal, useDrawer, useTabview and 17 more call the same vanilla core through custom DOM events, not a parallel React rewrite.
aria-expanded, aria-modal, aria-live and 10 more are applied automatically, not left for you to wire up by hand.
Modal, Toast, Carousel, Select, Range, Tooltip and more ship from a single ESM bundle. v1.1.0, MIT-licensed, zero dependencies.
Core capabilities that set FrontAlign apart from legacy frameworks.
Built natively on CSS @layer. Specificity wars are over. Your custom styles always win.
@layer theme, base, components, utilities, custom;
@layertheme {
/* Token variables */
}
@layercustom {
.my-card{ ... }
}Say goodbye to ml-4. FrontAlign uses logical properties to adapt to LTR and RTL out of the box.
Scans your templates and generates only the CSS you need on-demand. Ship microscopic stylesheets instantly.
$ npx frontalign build ./src
⠋ Scanning templates...
✓ Found 42 utilities
✔ Build successful in 24ms
frontalign.build.css30.4 kBA premium documentation showcase should not only say what FrontAlign does. It should visually prove that one semantic system can power real interface output.
<article class="card p-4"> <span class="badge bg-primary rounded-pill"> Semantic Layer </span> <h3 class="text-3xlarge font-extrabold"> Build once. Align everywhere. </h3> <p class="text-muted"> Utilities, components and interactions inherit the same design decision. </p> <div class="is-grid grid-cols-2 gap-3"> <button class="button is-primary">Primary</button> <button class="button is-primary-outline">Outline</button> </div> <div class="is-flex place-center gap-2 text-small text-muted"> <span>primary</span> <span>components</span> <span>runtime</span> </div> <div class="is-grid grid-cols-3 gap-2"> <div class="card transition-transform hover:-translate-x-1">Utilities</div> <div class="card transition-transform hover:-translate-x-1">Components</div> <div class="card transition-transform hover:-translate-x-1">Themes</div> </div> </article>
Utilities, components and interactions inherit the same design decision.
Run a single command to scaffold a fully configured FrontAlign project. Choose your template and framework — no setup required.