Your CSS Companion

Built with modularity in mind, Fylgja CSS allows you to pick exactly what you need and combine it seamlessly with other solutions. Whether you're starting a new project or integrating complex UIs, Fylgja provides a flexible, lightweight foundation to streamline your development.

• 🧩 Modular Design: Include only the components you need, keeping your bundle lean and efficient.
• ⚡ Lightweight Core: Start with a minimal footprint, optimized for performance.
• 🎨 Customization First: Override styles effortlessly with low specificity and extensive CSS variable support.
• 🤝 Seamless Integration: Works in harmony with frameworks like TailwindCSS, UnoCSS, and other tools.

Fylgja offers a suite of packages tailored to your development needs:

A robust foundation that goes beyond basic resets.

• Provides sensible default styles for common HTML elements using classless styling.
• Ensures cross-browser consistency without unnecessary overrides, leveraging :where for zero specificity.
• Includes: Improved browser defaults, form controls, and button styles out of the box.

A centralized system for managing design values (colors, spacing, typography).

• Available as SCSS or CSS variables for easy integration.
• Use Fylgja's build tools to tailor tokens to your specific brand requirements.

A collection of focused CSS utility classes.

• Designed to complement—not replace—utility-first frameworks.
• Seamlessly integrates with Fylgja Tokens and other variable-driven systems.

Ready-to-use, single-class components for building complex UI elements.

• Accelerates development with pre-styled, accessible components.
• Available as individual packages (e.g., @fylgja/card, @fylgja/dialog).

Fylgja's modular architecture puts you in control. For instance, you can use Fylgja Base solely for its form styles without importing the entire library. This granular control ensures optimal performance and eliminates bloat.

We prioritize performance. The minified Fylgja Base Preflight is only ~6kb, significantly smaller than many comparable libraries, ensuring your site loads fast.

Designed for flexibility, Fylgja uses low CSS specificity and CSS variables, enabling you to adapt styles to your unique design system easily. The :where selector in Fylgja Base ensures your custom styles always take precedence without fighting specificity wars.

Install the full Fylgja suite via NPM:

npm install fylgja

Or install individual packages as needed:

npm install @fylgja/base @fylgja/tokens

Import the packages in your CSS:

@import "@fylgja/base";
@import "@fylgja/tokens";
@import "@fylgja/utilities";

Or use via CDN:

<link href="https://cdn.jsdelivr.net/npm/@fylgja/base/index.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fylgja/tokens/css/index.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fylgja/utilities/index.min.css" rel="stylesheet">

Explore the full documentation and component library at fylgja.dev.

This project is licensed under the MIT License.