Storybook
  • Theme

  • Light
  • Dark
  • System
  • Dark tone

  • Dark
  • Dark dimmed
  • Dark high contrast
  • Dark colorblind
  • Dark Tritanopia
  • Light tone

  • Light
  • Light high contrast
  • Light colorblind
  • Light Tritanopia
  • Reset to default

PrimerLive

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

Info
Success
Warning
Error

This is a blank slate

Use it to provide information when no dynamic content exists.

4 of 16
  • Option
  • Option
  • Option
Message
Message
Message

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