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.

  • Note

    Useful information that users should know, even when skimming the page.

    Callout

    A highlighted block for a note, tip, warning, or caution, built from a paragraph title and plain content.

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

  • Release notes

    Fylgja 3.0 is here

    Smaller, faster, and built on native CSS features.

    Heading Group

    A heading with an eyebrow above it and a subtitle below it, grouped in a native <hgroup>.

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

  • Already expanded

    Add the open attribute to a callout that should start unfolded.

    Callout Collapse

    A callout the reader can fold away, built on native details and summary with no JavaScript.

  • 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.
    Your order has been placed.

    Toast

    A short message that confirms what the user just did, with default, info, warning, error, and success 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.

  • Our services

    Heading Underline

    A heading with a short brand colored bar below it, drawn in CSS so the markup stays a plain heading.

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

  • Loading article

    Skeleton

    Gray placeholder shapes that hold the layout while content loads, with a shimmer that stops under reduced motion.

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

  • Fylgja is a lightweight CSS library built on modern web standards.

    Tabs

    Switch between related panels of content in one place, with a scrollable strip of tab buttons and a small script.

  • Menu

    Offcanvas

    A panel that slides in from a screen edge, built on the native <dialog> element with Fylgja's small .offcanvas rule.

  • Featured work

    Heading HR

    A heading set between horizontal lines, with variants for a line on one side only.

  • Speed Dial

    A floating action button that reveals a small set of related actions, built on the Popover API and opened with invoker commands.

  • Meter

    A native meter for a measurement in a known range, coloring itself good, average or poor from its own value.

  • Alert

    A toast style message in the top corner of the viewport for problems that need attention, built on a manual popover.

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

    1. Cart (completed)
    2. Shipping (completed)
    3. Payment
    4. Review

    Stepper

    A progress indicator for multi-step flows, built on an ordered list with the current step marked by aria-current.

  • Shortcut: Ctrl + S

    Tooltip

    A short text hint that appears on hover or keyboard focus, built on a hint popover opened with interestfor and placed with CSS anchor positioning.

  • Button Corner Shape

    Buttons with beveled, notched, scooped, or squircle corners, made with the CSS corner-shape property on top of the button radius.

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

  • Acme
    • Home
    • Products
    • About

    Navbar

    A site header with a brand, the main navigation links, and a drawer menu on small screens.

  • File options
  • Copy link
  • Rename
  • Download
    •

    Menu

    A dropdown of actions opened from a button, built on the native Popover API and CSS anchor positioning.

    • An orange fox sitting in dry grass
    • A red deer stag with wide antlers in a dark forest
    • A hare sitting upright at the edge of a wood
    • A falcon in flight over open ground
    • A brown bear looking up
    • A frog resting among lily pads

    Gallery

    A responsive grid of images, with an optional lightbox that opens each one larger in a native dialog.

  • Enter an email address, like me@example.com.

    Form Field

    A labeled form control with an error message that appears only when native validation fails.

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

    Action List

    A vertical list of actions or links, with optional icons, descriptions, and dividers.

    1. Version 2.0 released

      A new token set, container query utilities, and a smaller base.

    2. Public beta

      The first builds go out to early adopters for feedback.

    3. Project kickoff

      The idea takes shape as a set of small, independent CSS packages.

    Timeline

    An ordered list of dated events along a vertical line, for changelogs, project history, and order tracking.

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

  • Inline Footer

    A single row footer with the copyright and a few links, set off from the page by a thin border.

  • Classic Footer

    A footer with columns of grouped links above a subfooter holding the copyright and social icons.

  • Brand Footer

    A footer with a wide branding column on the left and the link groups pushed to the right, above a shared subfooter.

    • A deer standing in a misty forest

      Classless base

      Native elements look right out of the box, so most markup needs no classes at all.

    • Design tokens

      Colors, shadows, and easings as CSS variables you can pick from.

    • Utilities

      Layout helpers driven by variables.

    • No build step

      Import the CSS and go.

    • Pick what you need

      Every package works on its own, so you only ship the parts your project uses.

    Bento Grid

    A grid of cards in mixed sizes for feature overviews and landing pages, stacking to one column on small screens.