Noora - design system and fully accessible component system for LiveView

Your Libraries & OS Mentoring Libraries
, ,
1

Hi! It’s been a while.

After a lot of pixel peeping, we at Tuist are ready to release Noora, our design system, for LiveView. We’ve been using Noora internally for a few months now while building our new dashboard and now reached a point where it’s ready to be out in the open.

Because for design systems, images speak louder than words, here’s a :sparkles:collection​:sparkles: of components:

Noora components overview
Noora components overview1200×821 48.7 KB

Even better than a static image, though, is something to play with, so I have three of those for you as well:

Getting started is super easy:

  1. Add the dependency to your mix.exs file:
defp deps do
  [
    {:noora, "~> 0.1.0"}
  ]
end
  1. Import the styles in your app.css file:
@import "noora/noora.css";
  1. Add the JavaScript hook to your app.js file:
import Noora from "noora";

let liveSocket = new LiveSocket("/live", Socket, {
  // Your existing socket setup
  hooks: { ...Noora },
});

That’s it. You can now use all of Noora’s components.
Obviously, check out HexDocs as well for which components are available. Have I mentioned the Storybook already?

You can find the code on GitHub. We’re excited to evolve Noora as we build more features for our product. We are due an update for our landing pages, so there might be an influx of landing page components soon.

For some technical details, we also just published a blog post that goes into a requirement or three that we had while building this, so I’m recommending giving that a read!

That’s it for our initial post - thanks for checking in and if you or someone you know needs to speed up their mobile development workflow, give us a visit.

20 Likes