Fylgja UI

Copy-paste UI components built on plain, accessible HTML. Filter by category and drop them into any project.

  • Link button

    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.

    Read more

    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.

  • Welcome to Fylgja

    Fylgja is a lightweight CSS library built on modern web standards, with no build step required.

    Modal

    A simple modal dialog for presenting content or a message, built on the native HTML <dialog> element and opened declaratively with invoker commands.

  • A deer in a misty forest An orange fox in the grass A cat lounging in the sun

    Carousel

    A horizontal scroll-snap slider built from Fylgja utilities, optionally enhanced with the Snap Slider for a pager and keyboard control.

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

  • A cat lounging in the sun 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.

  • Your rating

    Review Stars

    A star rating input built from radio buttons and the input-group --steps modifier, with no JavaScript.

  • A deer standing in a misty forest

    Exploring Fylgja in the Wilds

    Group an image and text into one surface. On wider screens the card lays out side by side.

    Read more

    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.

  • Accept cookies?

    We use cookies to improve your experience and analyze site traffic.

    Decline Accept

    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.

  • Trusted by

    • Aurora
    • Basalt
    • Cinder
    • Driftwood
    • Ember
    • Fathom

    Marquee

    A continuously scrolling strip of brand logos or text, pausing on hover and standing still under reduced motion.

  • Icon Button

    A button whose content is an icon, squared automatically and given an accessible name with aria-label.

  • Jamie Fox JD

    Avatar

    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.

    • A cat lounging in the sun

      Sunny Cat Wallpaper

      €18.99

    • An orange fox in the grass

      Orange Fox Wallpaper

      €6.00

    • A dog keeping watch

      Watchful Dog Wallpaper

      €112.56

    Product Grid

    A responsive grid of product cards that reflows by available width, with no media queries.

  • Menu

    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.

  • Pro plan

    Everything in Starter, plus priority support and unlimited projects.

    Choose Pro

    Gradient Bordered Card

    A card whose border is a gradient, for singling out one option in a row without changing its size.

  • Progress

    A native progress bar for how far a task has run, determinate or indeterminate.

  • Input Switch

    A toggle switch for an on/off setting, built on a native checkbox with role=switch.

  • Into the misty woods

    Stories from the quiet edges of the forest, gathered over one season.

    Read the series

    Image Banner

    A full-width image with a heading and call to action laid over it, darkened just enough to stay readable.

  • Your fylgja, in code

    Modern defaults, native elements, and nothing you did not ask for.

    Get started

    An orange fox standing in tall grass

    Split Banner

    A banner split into an image half and a text half, stacking into one column on small screens.

  • Build the web you want

    Fylgja gives you modern defaults and stops there, so the rest of the page stays yours.

    Get started Read the docs

    CTA Banner

    A text banner with a heading and an action, for closing a page with one clear next step.