Build Modern Web Interfaces Without Framework Chaos.
A modern UI engine with utility-first CSS, smart components, runtime theming, CSS compiler & JIT builder, modular NPM exports, React support, hooks and a zero-dependency JavaScript runtime.
FrontAlign brings the interface layer together in one clean system.
- Utility-first CSS
- Modern OKLCH color system
- CSS layers
- Smart auto-initialized components
- CSS compiler & JIT builder
- Runtime theming
- Dark mode
- Skeleton loading system
- React package with provider and hooks
- Modular NPM exports
- CDN support
- Zero dependencies
Initialize once. Build freely.
npm i frontalignOr use the CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frontalign/dist/css/frontalign.min.css">
<script src="https://cdn.jsdelivr.net/npm/frontalign/dist/js/frontalign.min.js"></script>import 'frontalign/css';
import { FrontAlign } from 'frontalign';
new FrontAlign();<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frontalign/dist/css/frontalign.min.css">
<script src="https://cdn.jsdelivr.net/npm/frontalign/dist/js/frontalign.min.js"></script>
<script>
new FrontAlign();
</script>That's it.
| Feature | Included |
|---|---|
| Utility-First CSS | ✓ |
| Modern CSS Layers | ✓ |
| Smart Components | ✓ |
| Smart Observer Runtime | ✓ |
| CSS Compiler & JIT Builder | ✓ |
| Runtime Theming | ✓ |
| Dark Mode | ✓ |
| Skeleton System | ✓ |
| React Hooks | ✓ |
| Modular NPM Exports | ✓ |
| SSR Safe Runtime | ✓ |
| CDN Support | ✓ |
| Zero Dependencies | ✓ |
FrontAlign automatically discovers and initializes supported components.
Add new content dynamically?
FrontAlign detects it.
Render components later?
FrontAlign observes them.
Use images with data-src?
FrontAlign lazy-loads them automatically.
<div fa-component="swiper">
...
</div>
```html
<nav fa-component="tabview">
...
</nav>
<img data-src="/image.jpg" alt="Lazy image">new FrontAlign();No manual re-initialization required.
FrontAlign ships with a built-in CSS compiler and JIT Engine for production builds.
It scans your project, detects the classes you actually use, applies your frontalign.config.js configuration, removes unused framework CSS and writes the optimized result into a single production stylesheet.
npx frontalign build// frontalign.config.js
export default {
theme: {
primary: '#2563eb'
},
fonts: [
{
family: 'Inter',
weights: '400,600,700'
}
],
jit: {
scan: ['./app', './components', './pages'],
safelist: ['button', 'is-primary', 'is-active'],
extensions: ['mdx'],
debug: false,
concurrency: 50
},
};The compiler is designed to keep your final CSS clean, small and production-ready.
- Scans source files
- Keeps only used FrontAlign classes
- Applies theme tokens
- Includes configured fonts
- Preserves safelisted runtime classes
- Supports custom utilities
- Outputs a single optimized CSS file
Build-time optimization without shipping unnecessary CSS.
FrontAlign uses a modern breakpoint scale out of the box, tuned for today's screen sizes rather than legacy device widths.
{
sm: "640px",
md: "864px",
lg: "1120px",
xl: "1408px",
"2xl": "1792px",
}These breakpoints power all responsive utilities (sm:, md:, lg:, xl:, 2xl:) and can be fully customized through frontalign.config.js. The JIT compiler picks up your overrides at build time and regenerates the responsive utility set accordingly.
// frontalign.config.js
export default {
theme: {
breakpoints: {
sm: "640px",
md: "864px",
lg: "1120px",
xl: "1408px",
"2xl": "1792px"
}
}
};Need to update your theme without rebuilding?
Use new FrontAlign(config).
new FrontAlign({
theme: {
primary: '#6366f1'
}
});This is for is for runtime configuration.
frontalign.config.js is for build-time CSS compilation.
Import the full runtime:
import { FrontAlign } from 'frontalign';
new FrontAlign();Import only what you need:
import {
Modal,
Toast,
Carousel,
DarkMode,
Skeleton
} from 'frontalign';Import CSS separately:
import 'frontalign/css';FrontAlign includes a dedicated React package with provider-based setup and hooks for React and Next.js applications.
'use client';
import { useNavbar , useDrawer } from 'frontalign/react';
export default function MyReactApp(){
return (
);
}Use hooks when you need component-level control.
FrontAlign continues to work with:
- Vanilla JavaScript
- React
- Next.js
- Vue
- Astro
- Laravel
- WordPress
- Static HTML
FrontAlign ships with production-ready components powered by the smart runtime.
| Component | Description |
|---|---|
| Modal | Dialogs and overlays |
| Drawer | Slide-in panels |
| Dropdown | Accessible menus |
| Collapse | Expandable content |
| Accordion | Collapsible sections |
| Navbar | Responsive navigation |
| Carousel | Advanced slider |
| Swiper | Touch scrolling |
| Toast | Notifications |
| Tooltip | Contextual hints |
| Popover | Detailed contextual information |
| Alert | Dismissible messages |
| Select | Enhanced selects |
| Tabview | Tab interfaces |
| DarkMode | Theme switching |
| Form | Validation helpers |
| Badge | Status indicators |
| Skeleton | Loading placeholders |
| Lazy Image | Automatic data-src image loading |
| Range | Single & dual-mode range slider |
FrontAlign's Form component ships with built-in validation driven directly by user input, requiring no extra JS wiring, plus optional AJAX submission support.
<form fa-component="form" data-ajax="/api/submit"novalidate>
<input type="email" data-rule="email">
<button type="submit">Send</button>
</form>The Range component supports both single-value and dual-mode (min/max) sliders out of the box.
<div class="group-range"fa-component="range">
<input class="form-range"type="range"max="100"min="10"/>
</div>FrontAlign includes a flexible skeleton system for loading states.
Use it in static HTML, CDN projects, React, Next.js, Vue, WordPress or any server-rendered interface.
<div
data-skeleton
data-skeleton-layout="card"
data-skeleton-cols="2"
data-skeleton-rows="3"
>
<!-- Cards rendered here after load -->
</div>Skeletons work everywhere because they are CSS-first and framework-independent.
FrontAlign targets modern browsers supporting:
- CSS Custom Properties
- OKLCH colors
- CSS Layers
- IntersectionObserver
- MutationObserver
- ES Modules
- Modern DOM APIs
| Browser | Version |
|---|---|
| Chrome | 111+ |
| Edge | 111+ |
| Firefox | 113+ |
| Opera | 97+ |
| Safari | 15.4+ |
| iOS Safari | 15.4+ |
| Samsung Internet | 22+ |
- Website → https://frontalign.dev
- Documentation → https://frontalign.dev/docs
MIT © Eyruz Badalzada
If FrontAlign helps you build better products, consider supporting the project.
Your donation helps fund ongoing development, bug fixes, documentation improvements, new components, and future releases. Every contribution—large or small—helps keep FrontAlign open, modern, and actively maintained.
Thank you for supporting FrontAlign and helping grow the ecosystem.
FrontAlign locks body scrolling while drawers and modals are open. If a fixed or sticky element shifts when the scrollbar disappears, add one of the following attributes:
<button data-fixed-lock></button>
<header data-sticky-lock></header>Earlier releases (v1.0.0–v1.0.7) were part of the project's early development phase.
This repository begins with v1.0.8, marking the beginning of the maintained public codebase.
From this point onward, FrontAlign is developed in the open with a public commit history, semantic versioning, and transparent release notes.
Going forward, FrontAlign will continue to evolve through:
- Small, focused commits with clear commit messages.
- Well-documented improvements and refactors.
- Detailed release notes and changelog entries.
- A consistent and transparent public development process.
Thanks for using FrontAlign and for supporting the project through feedback, bug reports, and contributions.