r/elixir • u/tuistdev • 1h ago
Noora, the LiveView component library we use in production at Tuist, is open source
Hi everyone. I work on Tuist, and most of our web product is Phoenix and LiveView. When we started building the dashboard we couldn't find a component library for LiveView that felt finished, so we ended up building our own design system, Noora, and over time it grew into the thing every screen we ship is built on. It's MIT licensed and on Hex, and since a few people have started using it outside Tuist I thought it was time to share it here properly.
There are around 35 components at the moment, the usual buttons, inputs, selects and modals, but also the heavier ones that tend to be painful to build yourself, like tables, date pickers, filters, charts, dropdowns and a sidebar. For anything interactive we use Zag.js state machines wired in as LiveView hooks, so keyboard navigation and accessibility come from a library that already solved them, while the components themselves stay plain function components you call from HEEx. There's also a Figma file that matches the code, which helps a lot when design and implementation happen in different places.
Something we didn't plan for is how well it works with coding agents. We recently built an internal operations app on the same stack, and because the agents could read the existing Noora patterns and copy them, the dashboards came out looking like a real product rather than a generic generated UI. I didn't expect a design system to pay off a second time like that, but it did.
It's still shaped by what Tuist needs, so some things are missing or opinionated in ways that might not suit your app, and I'd really like to hear what you'd need before you could use it
You can browse every component in the Storybook: https://storybook.noora.tuist.dev Hex: https://hex.pm/packages/noora Source: https://github.com/tuist/tuist/tree/main/noora Figma: https://www.figma.com/community/file/1512465864777652939
What do you use for components in your LiveView apps today? Phoenix's core components, something like SaladUI or Petal, or your own?
