PrimerLive (PrimerLive v0.1.1)

PrimerLive is a collection of function components that implements GitHub's Primer Design System. It is intended for usage in Phoenix LiveView pages and regular (non-LiveView) views in Phoenix applications.

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

source-code

Source code

PrimerLive at GitHub

versioning

Versioning

Included dependencies:

Included libraries:

installation

Installation

install-dependencies

Install dependencies

  • Edit mix.exs and add dependency primer_live
  • Run mix.deps get

set-up-javascript-css

Set up JavaScript / CSS

Install primer-live

Inside your assets folder, do:

npm install primer-live --save

Add to your app.js:

import { Prompt } from "primer-live";
import "primer-live/primer-live.css";

In app.js, add Prompt to the hooks:

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: {
    Prompt,
    // existing hooks ...
  },
});

usage-in-liveview-pages

Usage in LiveView pages

To use components, use module PrimerLive:

defmodule MyAppWeb.MyLiveView do
  use MyAppWeb, :live_view
  use PrimerLive

  def render(assigns) do
    ~H"""
    <.button>Click me</.button>
    """
  end

end

usage-in-regular-views

Usage in regular views

In view files, for example in page_view.ex, use module PrimerLive:

defmodule MyAppWeb.PageView do
  use MyAppWeb, :view
  use PrimerLive
end

Then call the component on a page, for example in templates/page/index.html.heex:

<.button>Click me</.button>

list-of-components

List of components

PrimerLive.Component