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

PF6.Button — 7 variants (primary, secondary, tertiary, danger, warning, link, plain), 3 sizes, icon support
PF6.Badge — numeric count badge with overflow cap and unread variant
PF6.Label — 8 color variants, outline, compact, closable, icon support
PF6.Avatar — user avatar image, 3 sizes, optional border
PF6.Icon — semantic icon wrapper with status colors and 4 sizes
PF6.Title — heading levels H1–H6 with PF6 sizing
PF6.Divider — horizontal rule with inset variants

Feedback & Status

PF6.Alert — inline alerts — default, success, danger, warning, info; optional close
PF6.Banner — full-width site banners with optional link
PF6.Spinner — animated loading indicator, 4 sizes
PF6.Skeleton — loading placeholder — text lines, circle, and square variants
PF6.EmptyState — empty state with icon, title, body, and actions
PF6.Progress — progress bar with status colors and size variants
PF6.HelperText — form field helper text — default, error, warning, success, indeterminate

Forms

PF6.TextInput — text field with label, placeholder, validation states, disabled
PF6.Checkbox — checkbox with label and optional description
PF6.Radio — radio button with label and optional description
PF6.Switch — toggle switch with on/off labels
PF6.NumberInput — numeric input with increment/decrement, min/max/step, unit suffix
PF6.SearchInput — search field with clear, submit, and typeahead hints
PF6.Select — single-select dropdown with option groups
PF6.Form — form layout with labeled groups, required markers, and helper text

PF6.Breadcrumb — breadcrumb trail with linked and current-page items
PF6.Tabs — tab navigation — default, box, vertical, and filled variants
PF6.Pagination — page navigation with item count and compact variant

Layout

PF6.Card — content card with title, footer, flat, compact, and selectable variants
PF6.Page — page shell with masthead, sidebar, and main content area
PF6.Drawer — sliding panel — right, left, or bottom; inline or overlay mode

Overlays

PF6.Modal — full-viewport modal dialog with title, body, footer, and size variants
PF6.Tooltip — hover tooltip — top, bottom, left, right positioning
PF6.Popover — click-triggered overlay with title, body, footer, and close button
PF6.Dropdown — action dropdown with dividers, headers, and position control
PF6.Accordion — expandable content sections with bordered and large-display variants
PF6.ExpandableSection — single toggle-show/hide content block

Content

PF6.CodeBlock — read-only code display with expandable variant
PF6.ClipboardCopy — copy-to-clipboard with inline and block variants
PF6.List — bulleted, ordered, plain, and inline list variants
PF6.DescriptionList — term/value pairs — vertical and horizontal layouts
PF6.ActionList — spaced group of action buttons

Data

PF6.Table — data table with sortable columns, striped rows, compact, and bordered variants
PF6.DataList — flexible list with checkable rows and expandable content
PF6.Toolbar — filter/sort toolbar with item groups, separator, and item count

Additional

PF6.BackToTop — floating scroll-to-top button
PF6.Backdrop — semi-transparent overlay background
PF6.Brand — logo/brand image with responsive sizing
PF6.Hint — contextual hint with lighter styling than Alert
PF6.InputGroup — groups form controls with shared borders
PF6.JumpLinks — in-page anchor navigation with subsections
PF6.Masthead — top header bar with brand, content, and toolbar slots
PF6.Menu — generic menu with items, dividers, headers, and search
PF6.Navigation — vertical/horizontal application navigation
PF6.NotificationBadge — bell icon with unread count overlay
PF6.NotificationDrawer — slide-out notification panel with variant icons
PF6.Panel — simple bordered container with header/body/footer
PF6.ProgressStepper — multi-step progress indicator
PF6.Sidebar — layout container with sidebar panel and content area
PF6.SimpleList — clickable list with selection state
PF6.SkipToContent — accessibility skip-nav link, hidden until focused
PF6.Slider — range slider input with PF6 styling
PF6.TextArea — multi-line text input with validation and resize
PF6.TextInputGroup — input with prefix/suffix elements
PF6.Tile — selectable card-like option tiles
PF6.Timestamp — formatted date/time display with optional icon
PF6.ToggleGroup — button group with toggle selection
PF6.Truncate — text truncation with tooltip
PF6.Wizard — multi-step form wizard with sidebar navigation

Layouts

PF6.Bullseye — centers content vertically and horizontally
PF6.Flex — configurable flex layout with direction, alignment, gap
PF6.Gallery — responsive grid of uniform items with min/max widths
PF6.Grid — 12-column grid system with percentage-based spans
PF6.Level — even horizontal distribution of items
PF6.Split — horizontal layout with fill items and wrapping
PF6.Stack — vertical layout with fill items

Theming

PF6.Theme — light and dark mode color token system
PF6.Tokens — static design tokens (light mode defaults)

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.

lenards/elm-ui-patternfly/4.0.2