Noora is Tuist's comprehensive design system that provides consistent UI components and patterns across the web and the CLI.
Note
The project is currently in an early stage of development. Our plan is to create a basic set of components and then iterate on them based on the feedback we receive from the community.
Noora is implemented for CLIs and the web to achieve cohesive design across different environments. Noora for CLI is implemented as a Swift package whereas we chose Elixir and Phoenix for the web.
📱 CLI
Command Line Interfaces (CLIs), though graphically limited due to terminal capabilities, can still benefit significantly from well-designed and consistent aesthetics across various commands. This is a role traditionally filled by design systems in Graphical User Interfaces (GUIs), but it remains largely unexplored in the context of terminals.
Noora is a Swift package providing terminal UI components for building beautiful command-line interfaces. Learn more →
A component library for building web applications with Phoenix LiveView — bringing Noora's design consistency to the web. Learn more →
The Noora CLI package provides Swift components for building beautiful terminal interfaces. It includes components for:
- Prompts: Interactive user input (yes/no choices, text input, single choice selection)
- Alerts: Status messages (success, warning, error notifications)
- Progress: Visual progress indicators (progress bars, step indicators)
- Text Styling: Consistent typography and formatting
Installation:
.package(url: "https://github.com/tuist/Noora", .upToNextMajor(from: "0.15.0"))
Usage:
import Noora
Noora().yesOrNoChoicePrompt(
title: "Authentication",
question: "Would you like to authenticate?",
defaultAnswer: true,
description: "Authentication is required to use some CLI features."
)
The Noora web package provides Phoenix LiveView components for building beautiful web interfaces.
Installation:
Add to your mix.exs
:
{:noora, "~> 0.1.0"}
Import styles in assets/css/app.css
:
@import "noora/noora.css";
Configure hooks in assets/js/app.js
:
import Noora from "noora";
let liveSocket = new LiveSocket("/live", Socket, {
hooks: { ...Noora },
});
- mise for tool management
# Install tools
mise install
# Build all packages
mise run build
# Test all packages
mise run test
# Lint all packages
mise run lint
Thanks goes to these wonderful people (emoji key):
Finn Voorhees 💻 |
Vaishali Desai 💻 |
Nikita Vasilev 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
This project is licensed under the MIT License - see the LICENSE file for details.