PrimerLive

Function components to create Phoenix applications, based on GitHub's Primer Design System.

50+ components

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

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

Since this implementation closely adheres to the Primer CSS documentation, extending components with Primer's utility classes should be simple.

Enhancements

In comparison to Primer CSS, 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.

Menus

• Action menu: implemented Primer React's Action menu to show Action list in a menu .
• Select menu: improved animations, a touch layer and optional backdrop.

Form validation styles

Form validation styles are updated to the latest guidelines documented in view-component textfield.

CSS improvements

See CSS overrides.

Status

The list of components is almost complete, with a couple of components on the backlog:

• AvatarStack
• Diffstat
• Popover
• Toasts
• Tooltips