Skip to content

Introducing Fylgja UI

Fylgja CSS has always focused on the layer below components. Good defaults, design tokens, and utilities that let you build whatever you need. But one question kept coming back. How do you actually build a modal, a carousel, or a pagination bar with it?

Fylgja UI is the answer. It is a growing collection of components you can read, copy, and paste into any project.

What it is

This is not another React UI library. There is no package to install, no component API to learn, and no build step to adopt. What you get is markup, which means it works in Astro, Laravel, Svelte, Rails, a single HTML file, and yes, in React too if that is where you happen to be.

All of it is free. Where a lot of component collections keep their better half behind a license, a subscription, or a pro tier, there is no paid version of Fylgja UI, and none is planned. No account, no license key, no blocks that turn out to be locked once you need them.

Every component is plain HTML. No wrapper divs to hold a layout together and no utility class soup. Where the platform already gives you an element, the component uses it. Modals and offcanvas panels are a native <dialog> opened with invoker commands, the accordion is <details>, the progress bar is <progress>, and the rating input is a group of radio buttons. That means focus handling, keyboard support, and assistive technology semantics come from the browser instead of from code we would have to maintain.

The markup is classless wherever Fylgja already styles the bare element, so what you copy stays close to what you would have written by hand. Each component page lists which Fylgja packages it needs and which ones simply make it better, so you know exactly what you are signing up for. A handful of components also ship a vanilla JavaScript or Alpine.js version for the cases where state is genuinely needed.

The first batch covers thirty components across actions, forms, navigation, overlays, feedback, data display, layout, and sliders.

This is only the beginning

That is a start, not a finished library. The gaps are obvious to anyone who goes looking: tabs, tooltips, popovers, date pickers, steppers, and plenty more. Those are coming, along with more variants and more framework versions of the components that are already there.

CLI support is on the list too. Copy and paste works, but pulling a component into your project should be as quick as npx fylgja@latest add already is for the CSS files themselves. Same idea, one command, no dependency added to your project.

What lands next depends a lot on what people actually need. If a component you were looking for is missing, or an existing one does not cover your case, open an issue. Ideas, requests, and “this markup could be simpler” notes are all welcome. That feedback is the most reliable way to keep the collection pointed at real problems instead of hypothetical ones.

A thank you to Anthropic

Fylgja UI exists in this form because Anthropic gave the project six months of Claude Max for free, through the program they run for open source projects. Fylgja is a passion project maintained in evenings and weekends, and writing thirty components with documentation, examples, and previews is a lot of hours. Having Claude work through the drafts, the repetitive parts, and the review passes turned something that would have taken months into something that shipped. Thanks to Anthropic for making that possible.

The direction, the markup decisions, and the standards each component is held to are still ours. The help was in getting there faster.

Go have a look at Fylgja UI, copy what you need, and tell us what is missing.


Back to Blog Overview