Cosmic UI is a set of beautifully-crafted, customizable UI components with a sci-fi aesthetic. Built to empower you to create interfaces with futuristic designs using SVG shapes as the foundation, while leveraging zag.js for interactive components.
This is not a traditional component library. It is a system to build your own sci-fi component library.
You know how most component libraries work: you install a package, import the components, and use them as they are. But when you want a UI with a distinctive sci-fi style – sharp edges, frames, holographic panels – you often end up writing complex custom SVG or CSS code from scratch.
This is what Cosmic UI aims to solve. It is built around the following principles:
Cosmic UI focuses on building components with SVG shapes at their core. This means:
Not all components require complex state management. For components that do (such as menus, dialogs, tabs), Cosmic UI leverages zag.js to provide:
Cosmic UI comes with a collection of components styled with a sci-fi aesthetic:
These components look good out-of-the-box but are also easy to customize for your specific project needs.
Unlike traditional libraries, you are not locked into predefined styles or markup. You can:
Extend Freely: Build new components using the same SVG-based approach to grow your sci-fi UI system.