Fylgja UI
Copy-paste UI components built on plain, accessible HTML. Filter by category and drop them into any project.
Button
The button styles Fylgja applies to native <button> elements and .btn links, driven by CSS variables.
What is Fylgja?
A lightweight, classless-friendly CSS library built on modern standards.
Does it require a build step?
No. Fylgja works buildless straight from a CDN, or with your bundler.
Is it accessible?
Yes. It builds on native elements, so semantics and keyboard support come for free.
Accordion
A stack of collapsible sections built on native <details> and <summary>, with single-open behavior handled by the browser.
- New Beta 8
Badge
A small pill for labels, statuses, and counts, recolored through CSS variables.
Select
A native <select> dropdown styled by Fylgja, with a custom arrow and consistent control sizing.
Card title
A card groups related content into a single, contained surface, ideal for posts, products, or any self-contained block.
Card
A surface that groups related content into one contained block, with optional shadow modifiers.
Breadcrumbs
A trail of links showing where the current page sits in the site hierarchy.
Modal
A simple modal dialog for presenting content or a message, built on the native HTML <dialog> element and opened declaratively with invoker commands.
Button Group
A segmented control: a group of joined buttons where one option is selected, built from radios styled as buttons.
Fylgja core packages Package Purpose Gzipped @fylgja/base Element defaults and typography 2.1 kB @fylgja/utilities Dynamic utility classes 3.4 kB @fylgja/tokens Design tokens 1.2 kB Table
A native HTML table styled by Fylgja, for presenting rows and columns of data.
Sale
Sunny Cat Wallpaper
€18.99
Product Label
A badge pinned over a product image to flag a sale, a new arrival or any other status.
- Your changes have been saved.A new version is available.Your session expires soon.Something went wrong. Try again.
Toast
A short notification message, with default, info, warning, and error styles.
Review Stars
A star rating input built from radio buttons and the input-group --steps modifier, with no JavaScript.
Exploring Fylgja in the Wilds
Group an image and text into one surface. On wider screens the card lays out side by side.
Media Card
A card that pairs an image with text, laying out side by side on wider screens.
Pagination
Numbered page links with previous and next controls for navigating paged content.
Confirmation Modal
A modal that asks the reader to make a yes or no choice before continuing, built on <dialog> with a form that reports the choice.
Icon Button
A button whose content is an icon, squared automatically and given an accessible name with aria-label.
JDAvatar
A round image representing a user, with an initials fallback and a stacked group.
Range
A styled native range slider with a CSS-only value fill, customized through CSS variables.
-
Sunny Cat Wallpaper
€18.99
-
Orange Fox Wallpaper
€6.00
-
Watchful Dog Wallpaper
€112.56
Product Grid
A responsive grid of product cards that reflows by available width, with no media queries.
-
Offcanvas
A panel that slides in from a screen edge, built on the native <dialog> element with Fylgja's small .offcanvas rule.
Meter
A native meter for a measurement in a known range, coloring itself good, average or poor from its own value.
Search Box
A search field and its submit button joined into one control, wrapped in the native search landmark.
-
Carousel
A horizontal scroll-snap slider built from Fylgja utilities, optionally enhanced with the Snap Slider for a pager and keyboard control.
Progress
A native progress bar for how far a task has run, determinate or indeterminate.
No components match your filters.