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.

    Html

  • Accordion

    A stack of collapsible sections built on native <details> and <summary>, with single-open behavior handled by the browser.

    Html

  • Badge

    A small pill for labels, statuses, and counts, recolored through CSS variables.

    Html

  • Select

    A native <select> dropdown styled by Fylgja, with a custom arrow and consistent control sizing.

    Html

  • Card

    A surface that groups related content into one contained block, with optional shadow modifiers.

    Html

  • Breadcrumbs

    A trail of links showing where the current page sits in the site hierarchy.

    Html

  • Modal

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

    HtmlAlpine

  • Button Group

    A segmented control: a group of joined buttons where one option is selected, built from radios styled as buttons.

    Html

  • Table

    A native HTML table styled by Fylgja, for presenting rows and columns of data.

    Html

  • Product Label

    A badge pinned over a product image to flag a sale, a new arrival or any other status.

    Html

  • Toast

    A short notification message, with default, info, warning, and error styles.

    Html

  • Review Stars

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

    Html

  • Media Card

    A card that pairs an image with text, laying out side by side on wider screens.

    Html

  • Pagination

    Numbered page links with previous and next controls for navigating paged content.

    Html

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

    HtmlAlpine

  • Icon Button

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

    Html

  • Avatar

    A round image representing a user, with an initials fallback and a stacked group.

    Html

  • Range

    A styled native range slider with a CSS-only value fill, customized through CSS variables.

    Html

  • Product Grid

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

    Html

  • Offcanvas

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

    HtmlAlpine

  • Meter

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

    Html

  • Search Box

    A search field and its submit button joined into one control, wrapped in the native search landmark.

    Html

  • Carousel

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

    HtmlJsAlpine

  • Progress

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

    Html