Introduction

An implementation of GitHub's Primer Design System for Phoenix LiveView.

50+ components

The Primer Design System provides a strong base for creating data driven applications such as rich CRUD applications with interactive forms.

All PrimerLive components accept the class attribute for customisations (and often the classes struct to address inner elements). Primer's utility classes allow a wide range of customisations without having to write custom styles.

PrimerLive components can be used in Phoenix LiveView pages and regular (non-LiveView) views in Phoenix applications.

Enhancements

In comparison to Primer Design, PrimerLive has a couple of extra features.

Dialogs

Dialog with attributes for custom showing and hiding, backdrop, modal behaviour, escape key, focus first and focus wrap.

Drawer

A drawer component with attributes for custom showing and hiding, backdrop, modal behaviour, escape key, focus first and focus wrap.

Theme

Components and functions to work with themes to offer light and dark modes, with support for color blindness.

Menus

Menu components that can easily be connected to application state with Phoenix Forms and Ecto Changesets.

Forms

Form elements that integrate with Phoenix Forms.

CSS improvements

Many improvements to improve consistency. See CSS overrides.