Introduction

An implementation of GitHub's Primer Design System for Phoenix LiveView and regular (non-LiveView) views in Phoenix applications.

50+ components

PrimerLive provides a strong base for creating data driven applications such as rich CRUD applications with interactive forms that integrate with Phoenix Forms, Ash Forms and Ecto Changesets.

Menus and dialogs allow for in-page viewing and editing of data, without leaving the current page. Alternatively, menus and dialogs can be invoked when visiting a specific route.

Components (and their inner elements) can be styled with custom CSS, or by passing pre-made utility classes.

Enhancements

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

RTL

Right-to-left languages are supported.

CSS Scope rule

Using @scope, PrimerLive can be used alongside other CSS libraries.