Introducing FrontAlign: A Modern Tailwind and Bootstrap Alternative

If you've built anything on the web in the last few years, you've probably had to choose a side.

Tailwind CSS gives you utilities — total control, but no components. You end up rebuilding a modal, a dropdown, and a carousel from scratch, every single project.

Bootstrap gives you components — fast to ship, but heavy, opinionated, and hard to make feel like your product instead of a template.

Neither one gives you both. So teams end up gluing a utility framework to a component library, wiring up two build systems, and hoping the CSS specificity wars don't start.

We got tired of that. So we built FrontAlign.

What FrontAlign Actually Is

FrontAlign is a UI engine, not just a stylesheet. It combines:

• A utility-first CSS system, built on modern CSS Layers and the OKLCH color model
• Smart, auto-initialized components — modals, drawers, carousels, tabs, and more
• A built-in CSS compiler and JIT builder that ships only the classes you actually use
• Runtime theming and dark mode, without a rebuild
• A zero-dependency JavaScript runtime
• First-class React support, with a provider and hooks

You initialize it once, and it takes care of the rest.

npm install frontalign

import 'frontalign/css';
import { FrontAlign } from 'frontalign';

new FrontAlign();

Prefer no build step at all? The CDN works exactly the same way.

<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>

Why Not Just Use Tailwind and a Component Library?

Because you shouldn't have to.

Combining a utility framework with a separate component kit means two APIs to learn, two design languages to reconcile, and two places for bugs to hide. FrontAlign's components are built directly on top of its own utility classes, so everything — spacing, color, breakpoints, theming — stays consistent by default.

Add new content dynamically, or render a component after the page has loaded? FrontAlign's Smart Observer Runtime detects it and initializes it automatically. No manual re-init calls scattered through your app.

<div fa-component="swiper">
    ...
</div>

<nav fa-component="tabview">
    ...
</nav>

<img data-src="/image.jpg" alt="Lazy image">

Smaller Than Bootstrap, Smarter Than Plain Tailwind

Bootstrap ships CSS for every component whether you use it or not. FrontAlign takes the opposite approach: a built-in JIT compiler scans your project, keeps only the classes you're actually using, applies your theme tokens, and writes a single optimized production stylesheet.

npx frontalign build

// frontalign.config.js

export default {
    theme: {
        primary: '#2563eb'
    },
    fonts: [
        { family: 'Inter', weights: '400,600,700' }
    ],
    scan: [
        './app',
        './components',
        './pages',
        './src'
    ],
    safelist: [
        'dark-mode'
    ]
};

The result: production CSS that scales with what you build, not with how many components the framework ships.

Built for React, Comfortable Everywhere Else

If you're working in React or Next.js, FrontAlign ships a dedicated package with hooks for component-level control.

'use client';

import { useNavbar, useDrawer } from 'frontalign/react';

export default function MyReactApp() {
    return (
        // your app
    );
}

And if you're not on React, that's fine too — FrontAlign works the same way with Vue, Astro, Laravel, WordPress, or plain static HTML, because the runtime doesn't depend on any framework to function.

What's Inside

Modals, drawers, dropdowns, accordions, carousels, toasts, tooltips, form validation, skeleton loading — the components you'd normally reach for a second library to get are already here, built on the same design tokens as your utilities.

Try It Today

FrontAlign isn't trying to be a bigger Tailwind or a lighter Bootstrap. It's what happens when the utility layer and the component layer are designed together from the start, instead of stitched together after the fact.

npm install frontalign

Initialize once. Build freely.

Read the full documentation at frontalign.dev/docs, or check out the project on frontalign.dev.