ArthurClemens
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!
- Source code: GitHub - ArthurClemens/primer_live: An implementation of GitHub's Primer Design System using Phoenix LiveView · GitHub
- Documentation: PrimerLive — PrimerLive v0.11.0
- Storybook and examples: https://quiet-dew-5768.fly.dev/
Where Next?
Trending in Announcing
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Phoenix, LiveView, multimedia pipelines, distributed systems. 400 engineers, Elixir since 2017. Available for hire.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Bringing learning, work and compliance together since 1987.
**Building the future of software with AI, trust, and human connection.**
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 8- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
zorn
Thanks for sharing. Anxious to check it out.
For my current project, I’m trying to break things out into a proper component system, and having projects like this to reference can be really helpful.
ArthurClemens
New URL for the storybook: https://primer-live.org/
mekusigjinn
Wow this is amazing. What drives the storybook? Is it LIveView Storybook?
samaaron
Amazing work - it looks fab!
Is there by any chance a way to incorporate it into a project without requiring npm?
Sebb
At least some of the components require JS. The easiest way to get that into your project is NPM. (like you use mix to get Elixir dependencies). You could do that by hand, but that will be messy.
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.ArthurClemens
I’ve updated the documentation: https://primer-live.org/installation
elnovice
Kudos for the effort.
It is a great work and an inspiration for everyone wants to build a component library.
Kind Regards,
Carlo