elm-ui-patternfly

An elm-ui implementation of the PatternFly 6 design system.

74 components · 7 layouts · Dark mode · Elm 0.19.1 · Builder pattern

Live Demo — Browse all components interactively (with dark mode toggle).

About

elm-ui-patternfly brings PatternFly 6's component library to Elm applications built with elm-ui. Every component follows the same builder pattern — construct a base value, pipe modifiers through it, and call toMarkup to get an Element msg. No HTML, no CSS, no class names.

elm install lenards/elm-ui-patternfly

Quick start

Every component follows the same pattern:

import PF6.Button as Button
import PF6.Badge as Badge

-- Construct → modify → render
Button.primary { label = "Save", onPress = Just Saved }
    |> Button.withLargeSize
    |> Button.withIcon myIcon
    |> Button.toMarkup

Badge.badge 7
    |> Badge.withOverflowAt 99
    |> Badge.toMarkup

All components produce Element msg values compatible with any elm-ui layout.

Design tokens

PF6.Tokens is the foundation of the component library — all colors, spacing, radii, and font sizes come from it. You can use tokens directly in your own layouts for visual consistency:

import PF6.Tokens as Tokens

Element.el
    [ Element.padding Tokens.spacerMd
    , Bg.color Tokens.colorBackgroundDefault
    , Font.color Tokens.colorText
    , Border.rounded Tokens.radiusMd
    ]
    content

Key token groups: color*, spacer*, fontSize*, radius*, fontWeight*.

Dark mode

PF6.Theme provides a theme system with light and dark palettes:

import PF6.Theme as Theme exposing (Mode(..), Theme)

theme = Theme.fromMode model.themeMode  -- Light or Dark

Element.el
    [ Bg.color (Theme.backgroundDefault theme)
    , Font.color (Theme.text theme)
    ]
    content

The pf6-guide live demo includes a dark mode toggle in the masthead.

Components

Primitives

Feedback & Status

Forms

Navigation

Layout

Overlays

Content

Data

Additional

Layouts

Theming

Example app — pf6-guide

The examples/pf6-guide/ directory contains a full interactive TEA application that demonstrates all 74 components with live state. A live version is deployed automatically to lenards.github.io/elm-ui-patternfly on every push to main.

cd examples/pf6-guide
npm install           # install dev tools (first time only)
npm run build         # compile Elm → main.js
npm run serve         # serve on http://localhost:8001

Or if you just want to compile and open directly without a server:

cd examples/pf6-guide
elm make src/Main.elm --output=main.js
open index.html

Note: elm reactor will show a blank page because it doesn't pre-compile main.js. Use npm run serve or open index.html after running elm make.

The guide is organized into 9 sections matching the component groups above. Every component is shown with multiple variants and real interactive state (forms you can type in, modals you can open, accordions you can expand, etc.).

To run the Playwright tests:

cd examples/pf6-guide
npm test

The test suite compiles the app automatically before running.

Contributing

Issues and pull requests are welcome. If you find a bug, have a component request, or want to suggest an improvement, please open an issue.

Resources

• PatternFly 6 components
• elm-ui documentation
• elm-ui guide — Paul Korban
• Builder pattern in Elm