News>Announcing

PrimerLive - a collection of LiveView components that implements GitHub's Primer Design System

/phoenix#library#liveview#livecomponents#ui-components
ArthurClemens

ArthurClemens

PrimerLive - a collection of LiveView components that implements GitHub's Primer Design System

The last couple of months I’ve been working on a LiveView UI library based on @storybook/cli - Storybook (the LiveView 0.18 update caused a bit of a rewrite, but made the code a lot easier to work with).

With around 40 components in all, the result is almost at parity with Primer CSS.

It’s been a fun learning experience. Coming from SPA frontend applications, I had several occasions I needed to rethink my approach to make things work the “LiveView way”, but I think I get the hang of it now…

Let me know what you think!

8 comments
/phoenix#library#liveview#livecomponents#ui-components
51 2408 8

Most Liked

ArthurClemens

ArthurClemens

I’ve updated the documentation: https://primer-live.org/installation

6
Post #8
ArthurClemens

ArthurClemens

New URL for the storybook: https://primer-live.org/

4
Post #3
ArthurClemens

ArthurClemens

You can do without JavaScript if you don’t need menus, dialogs or drawers. You’ll still need to include the CSS from primer-live, but you could opt to use a content delivery service such as unpkg: https://unpkg.com/primer-live/dist/primer-live.css or download it and import.

3
Post #7

Where Next?

View thread on forum (has 8 responses!)
phoenix
library
liveview
livecomponents
ui-components
Home News>Announcing
/phoenix#library#liveview#livecomponents#ui-components
51 2408 8
Last post

Popular in Announcing Top

wmnnd
News>Announcing

Belt - A Flexible File-Storage Library
Hi there, for my project DBLSQD, I needed a file storage solution that is a bit more flexible than Arc. Because I thought others might f...
#library#genstage#file-uploading#belt
74 9408 51
New
tmbb
News>Announcing

Makeup - A syntax highlighter for Elixir
I’ve published the first version of my Makeup library. It’s a syntax highlighter for Elixir in the spirit of Pygments, Currently it highl...
#library#syntax-highlight#makeup
93 9747 49
New
seancribbs
News>Announcing

Dialyzex - an alternative Mix task for dialyzer
Today I released a new dialyzer Mix task as the dialyzex package! At the time we started writing this task, the existing dialyzer integra...
#library#dialyzer#dialyzex
93 6649 28
New
mischov
News>Announcing

Meeseeks - A library for extracting data from HTML and XML with CSS or XPath selectors
import Meeseeks.CSS html = HTTPoison.get!("https://news.ycombinator.com/").body for story <- Meeseeks.all(html, css("tr.athing")) do...
#library#meeseeks
242 12339 86
New
dominicletz
News>Announcing

Elixir-desktop - Android, Window, macOS, Linux LiveView Apps with Elixir
Hi, I thought I had posted my library before but seems I hadn’t. The project is still in early stages but it’s growing and so I think it...
/elixir-desktop#library#linux#windows#android#liveview#macos
238 11595 48
New
Crowdhailer
News>Announcing

OK: Elegant error handling for elixir pipelines. Version 1.0 released
I have been updating a library that allows you to pipe between functions that use the erlang result tuple convention. Assuming you have ...
#macros#library#pipeline#syntax
34 6585 16
New
Flo0807
News>Announcing

Backpex - a highly customizable admin panel for Phoenix LiveView applications
Hello everyone! I am excited to share our heart project Backpex with you. After building several Phoenix applications, we realized that...
/phoenix#library#liveview#admin-tools#phoenix-live-view#phoenix_live_view#live-view#phoenix-liveview#backpex
291 10528 90
New
fuelen
News>Announcing

Owl - A toolkit for writing command-line user interfaces
Hey folks! Want to present a toolkit for writing command-line user interfaces. It provides a convenient interface for colorizing text...
#library#cli#tui#progress-bar#io-device
181 7413 25
New
Qqwy
News>Announcing

TypeCheck - Fast and flexible runtime type-checking for your Elixir projects
TypeCheck: Fast and flexible runtime type-checking for your Elixir projects. Core ideas Type- and function specifications are const...
#library#dialyzer#validation#typespecs#property-testing#type-checking#types#type_check
336 14482 100
New
pkrawat1
News>Announcing

Gringotts: A complete payment library for Elixir and Phoenix Framework
Hey guyz We at @aviabird are working on a payment library in elixir/phoenix. We are targeting March 2018 to add 56 Gateways to it. Have...
#library#gringotts#payments#payment-gateways
193 12758 51
New

Other popular topics Top

sen
Questions & Help>Questions

How to set environment variables in dev.exs?
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
/phoenix
31 22048 15
New
albydarned
Questions & Help>Questions

Erlang and Elixir on Apple Silicon/M1 Chip
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
#erlang#troubleshooting
121 25150 65
New
skosch
Questions & Help>Questions

Put/update deep inside nested maps (and auto-create intermediate keys)
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
#data-structures#maps#immutability
52 20442 11
New
greenz1
Questions & Help>Questions

Best way to send multiple files as HTTP response
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
/phoenix#api
3 19039 3
New
stefanchrobot
Questions & Help>Questions

How to decode a JSON into a struct safely?
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
#structs#json
29 21253 26
New
jason.o
Questions & Help>Questions

No such input `xxxxx` for action ResourceName1.create
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
/ash
3 78654 2
New
dblack
Questions & Help>Questions

WebSocket is closed before the connection is established
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
/phoenix#troubleshooting#liveview
13 27704 22
New
nsuchy
Questions & Help>Questions

IEX in Windows Powershell?
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
#iex#microsoft-windows#windows#powershell
15 30503 4
New
JakeBecker
Chat & Discussions>Discussions

ElixirLS - the Elixir Language Server
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
#elixir-ls
1144 54120 245
New
lanycrost
Questions & Help>Questions

How To Implement if...else if...else condition
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
#how-to-question
40 52356 6
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

News>Announcing

News Announcing ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Software Mansion

Phoenix, LiveView, multimedia pipelines, distributed systems. 400 engineers, Elixir since 2017. Available for hire.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking for Elixir devs who love to ship. Start your free account.

Manning

Develop your skills with books, videos, and courses.

WyewWorks

Enabling companies to succeed by building software people love.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking for Elixir devs who love to ship. Start your free account.

Manning

Develop your skills with books, videos, and courses.

WyewWorks

Enabling companies to succeed by building software people love.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement