FrontAlign Framework | The High-Performance UI Engine
Ctrl + K<br>Search documentation<br>Esc<br>↑↓navigate↵selectEscclose
Docs<br>Components<br>Playground<br>Blog<br>v1.1Current Version<br>v1.1<br>Other Versions<br>v1.0
FrontAlign v1.0.6 Released<br>Build modern web interfaces<br>without the framework chaos.<br>Build with utilities. Ship with components. Power everything with one lightweight runtime engine. From prototype to production at lightspeed.<br>Get Started →Open Source
theme-engine.html<br>The Chaos<br>dark:bg-slate-900 text-black dark:text-white border-gray-200 dark:border-slate-800...">
FrontAlign<br>fa-theme="dark"><br>...
runtime: Observer Active
The structure you need.<br>The freedom you crave.<br>FrontAlign gives you the speed of utilities, the confidence of components, and the control of a semantic design system.
🧱<br>Utilities + Components<br>Start with utility classes when you need speed. Switch to ready components when the interface needs structure.
🚀<br>Built-In Runtime<br>Modals, drawers, tabs, and dark mode work seamlessly through one lightweight JavaScript engine.
🎨<br>One Token System<br>Change a semantic token and buttons, badges, forms, and surfaces instantly follow your design language.
Framework Agnostic<br>Use the exact same engine in static HTML or React applications — without locking your stack.
Quick StartBuild faster with FrontAlign.<br>Install the framework, initialize it once, and let FrontAlign handle components, themes, dark mode, and dynamic DOM updates.
01Install FrontAlignDrop it into any project. Use NPM for modern apps or CDN for instant zero-config setup.02Initialize FrontAlignOne clean call activates components, observers, themes, fonts, and dark mode.
NPMCDN<br>terminal
Switch steps or tabs to preview the matching setup code.
THE BUILD-ANYWHERE ENGINE<br>Any stack. Any interface.<br>At speed.<br>Build dashboards, landing pages and commerce interfaces with one engine that moves from CDN prototypes to production React apps.<br>Zero-Build Start<br>Drop FrontAlign into static HTML with CDN, or install it via NPM.
🧱<br>Template-Ready UI<br>Production-minded blocks for dashboards without blank files.
🎨<br>Semantic Theme Layer<br>Control brand color and dark mode through one token system.
🚀<br>Small Runtime Footprint<br>Compile only what you use. Lightweight from prototype to prod.
Accessible Patterns<br>Interactive components follow practical ARIA behavior.
🧠<br>SPA-Safe Engine<br>MutationObserver state keeps dynamic interfaces stable.
React IntegrationComponents →
Any Stack (React, Vue, HTML)
FrontAlign Runtime<br>MutationObserver • Zero Deps
Components<br>Theme Tokens
Cascade Control<br>Built natively on CSS @layer. Specificity wars are over. Your custom styles always win.
@layer theme, base, components, utilities, custom;
@layertheme {<br>/* Token variables */
@layercustom {<br>.my-card{ ... }
Logical Layouts<br>Say goodbye to ml-4. FrontAlign uses logical properties to adapt to LTR and RTL out of the box.
JS<br>John Smith<br>Product Designer
LTR
ع.م<br>علي محمد<br>مصمم منتجات
RTL
Lightning JIT Compiler<br>Scans your templates and generates only the CSS you need on-demand. Ship microscopic stylesheets instantly.
$ npx frontalign build build ./src
⠋ Scanning templates...<br>✓ Found 42 utilities
✔ Build successful in 24ms<br>frontalign.build.css30.4 kB
FrontAlign UI EngineOne engine for utilities, components and runtime behavior.<br>A premium documentation showcase should not only say what FrontAlign does. It should visually prove that one semantic system can power real interface output.
showcase.frontalignlive<br>EngineTokensThemes<br>class="card p-4"><br>class="badge bg-primary rounded-pill"><br>Semantic Layer
class="text-3xlarge font-extrabold"><br>Build once. Align everywhere.
class="text-muted"><br>Utilities, components and interactions inherit<br>the same design decision.
class="is-grid grid-cols-2 gap-3"><br>class="button is-primary">Primary><br>class="button is-primary-outline">Outline>
class="is-flex place-center gap-2 text-small text-muted"><br>>primary><br>>components><br>>runtime>
class="is-grid grid-cols-3 gap-2"><br>class="card transition-transform hover:-translate-x-1">Utilities><br>class="card transition-transform hover:-translate-x-1">Components><br>class="card transition-transform hover:-translate-x-1">Themes>
Live outputChange one token.
Semantic layerBuild once. Align everywhere.<br>Utilities, components and interactions inherit the same design decision.
PrimaryOutline<br>primarycomponentsruntime<br>Utilities Grid, spacing, typography and layout primitives.<br>Components Buttons, badges, collapse, forms and interface blocks.<br>Themes Light and dark modes powered by one semantic token system.
1 semantic token<br>0 dependency chaos<br>3 delivery modes
Zero Install · Instant Start<br>Kickstart your project<br>in seconds<br>Run a single command to scaffold a fully configured FrontAlign project. Choose your template and framework — no setup required.
bash<br>$npx create-frontalign my-project --template agency<br>Copy<br>--template agency--template blog--framework nextjs
FrontAlign