noir-ui

noir-ui is a component system designed for teams seeking to build product interfaces with a focus on strong visual hierarchy, accessibility, and rapid deployment. The platform offers 85 components organized into categories such as App Surfaces, Data/Workflow, Overlays/Advanced, and Core System, supporting a variety of interface needs. Its primary intent is to facilitate the creation of high-trust product surfaces with disciplined structure and premium legibility, achieved through features like high-contrast typographic systems that use serif headlines and monospaced metadata.

The library emphasizes a framework-agnostic approach, allowing users to implement components using vanilla HTML, CSS, and JavaScript without being tied to a specific frontend framework. Components are accessible via a registry, where users can browse and filter by design family or function, then copy implementation-ready markup directly from the Snippet or Integration tabs. This copy-paste deployment model is intended to streamline integration into existing projects and enable fast implementation.

noir-ui incorporates a strong accessibility baseline, supporting keyboard-first workflows with standardized focus order and dismiss patterns managed through shared runtime hooks. Advanced interaction patterns, such as command palettes, context menus, date range selectors, and toast stacks, are unified under a shared initialization API. Layout primitives like shells, rails, drawers, and resizable panels provide structural scaffolding for complex product workflows.

The tool is positioned for teams who prioritize disciplined interface hierarchy and need reliable, elegant UI components for product surfaces.