--- title: Open sourcing Noora for the web | daily.dev description: Tuist has open sourced Noora for the web, a complete design system for building Phoenix LiveView applications, including Figma design files and ready-to-use,... canonical: https://daily.dev/posts/open-sourcing-noora-for-the-web-ncccvmkvh twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Open sourcing Noora for the web | daily.dev og:description: Tuist has open sourced Noora for the web, a complete design system for building Phoenix LiveView applications, including Figma design files and ready-to-use,... og:url: https://daily.dev/posts/open-sourcing-noora-for-the-web-ncccvmkvh og:image: https://api.daily.dev/og/posts/NCcCVMKVH.png og:image:alt: Open sourcing Noora for the web og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Open sourcing Noora for the web **[ Tuist ](https://daily.dev/sources/tuist-blog)** · 5 min read · 0 upvotes · 0 comments ## Summary Tuist has open sourced Noora for the web, a complete design system for building Phoenix LiveView applications, including Figma design files and ready-to-use, fully accessible components. Built on plain CSS and a custom JavaScript hook system powered by Zag (a framework-agnostic state machine library), the components handle focus management, ARIA attributes, and keyboard interactions out of the box. Installation involves adding the noora Elixir package, importing its CSS, and wiring up the JavaScript hooks. Future plans include expanding documentation, adding more Storybook examples, and exploring web components to make Noora usable beyond LiveView, potentially with frameworks like Vapor. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I add the Noora design system to a Phoenix LiveView project? Add {:noora, "~> 0.1.0"} to the deps in mix.exs, import the styles with @import "noora/noora.css" in app.css, and register the JavaScript hooks by importing Noora and adding hooks: { ...Noora } to the LiveSocket setup in app.js. A use Noora macro is also available to automatically import all components into templates. _daily.dev surfaces setup guides like this for developers wiring accessible components into LiveView apps._ ### What library powers the keyboard and accessibility behavior in Noora's web components? Noora's web components are built on Zag, a framework-agnostic library of state machines for building UI components, combined with plain CSS and a custom JavaScript hook system. This combination provides focus management, ARIA attributes, and full keyboard interaction support without relying on JavaScript component libraries like React Aria or Radix. _Developers comparing headless UI approaches for LiveView can track ecosystem picks like this on daily.dev._ ## Similar posts on daily.dev - [A starter Phoenix LiveView project adapted to Fluxon UI](https://daily.dev/posts/a-starter-phoenix-liveview-project-adapted-to-fluxon-ui-rkmzlvt87) · ElixirStatus · 0 upvotes · 0 comments - [Elixir Programming Language Forum](https://daily.dev/posts/elixir-programming-language-forum-qyfr7vfn8) · Elixir Forum · 0 upvotes · 0 comments - [Accessibility with Interactive Components at React Advanced Conf](https://daily.dev/posts/accessibility-with-interactive-components-at-react-advanced-conf-48bahl3rd) · InfoQ · 2 upvotes · 0 comments - [Why I chose Phoenix LiveView over Rails, Laravel, and Next.js](https://daily.dev/posts/why-i-chose-phoenix-liveview-over-rails-laravel-and-next-js-yi3juefmt) · Hacker News · 3 upvotes · 0 comments - [Under the hood of MDN's new frontend](https://daily.dev/posts/under-the-hood-of-mdn-s-new-frontend-teqgsjvat) · MDN Blog · 104 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#open-source](https://daily.dev/tags/open-source), [#accessibility](https://daily.dev/tags/accessibility), [#elixir](https://daily.dev/tags/elixir), [#liveview](https://daily.dev/tags/liveview) [View this post on daily.dev](https://daily.dev/posts/open-sourcing-noora-for-the-web-ncccvmkvh) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Open sourcing Noora for the web","url":"https://daily.dev/posts/open-sourcing-noora-for-the-web-ncccvmkvh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/open-sourcing-noora-for-the-web-ncccvmkvh"},"datePublished":"2026-08-23T12:19:50.219Z","dateModified":"2026-08-23T12:39:12.005Z","description":"Tuist has open sourced Noora for the web, a complete design system for building Phoenix LiveView applications, including Figma design files and ready-to-use,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/db39ae47ede0fa4e419eba637e039cbd?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/db39ae47ede0fa4e419eba637e039cbd?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"\n Tuist\n ","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"\n Tuist\n ","logo":"https://media.daily.dev/image/upload/s--3AYDH23h--/f_auto,q_auto/v1787487506/logos/tuist-blog?_a=BAMAMicg0","url":"https://daily.dev/sources/tuist-blog"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/open-sourcing-noora-for-the-web-ncccvmkvh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,open-source,accessibility,elixir,liveview","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"\n Tuist\n ","item":"https://daily.dev/sources/tuist-blog"},{"@type":"ListItem","position":3,"name":"Open sourcing Noora for the web"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/open-sourcing-noora-for-the-web-ncccvmkvh#faq","mainEntity":[{"@type":"Question","name":"How do I add the Noora design system to a Phoenix LiveView project?","acceptedAnswer":{"@type":"Answer","text":"Add {:noora, \"~> 0.1.0\"} to the deps in mix.exs, import the styles with @import \"noora/noora.css\" in app.css, and register the JavaScript hooks by importing Noora and adding hooks: { ...Noora } to the LiveSocket setup in app.js. A use Noora macro is also available to automatically import all components into templates. daily.dev surfaces setup guides like this for developers wiring accessible components into LiveView apps."}},{"@type":"Question","name":"What library powers the keyboard and accessibility behavior in Noora's web components?","acceptedAnswer":{"@type":"Answer","text":"Noora's web components are built on Zag, a framework-agnostic library of state machines for building UI components, combined with plain CSS and a custom JavaScript hook system. This combination provides focus management, ARIA attributes, and full keyboard interaction support without relying on JavaScript component libraries like React Aria or Radix. Developers comparing headless UI approaches for LiveView can track ecosystem picks like this on daily.dev."}}]} ```