arctis/ui

The library has two main surfaces. Components provide the primitives used throughout modern applications, including buttons, selects, dialogs, navigation menus, tables, toasts, forms, and overlays. Blocks combine those primitives into complete sections for marketing and product interfaces, including heroes, bento layouts, pricing, authentication, empty states, and more.

The site is part of the product. The home page presents the system through a dense grid of real interface scenes. Documentation covers installation, theming, composition, variants, and component APIs through live previews and practical examples.

Installation stays intentionally close to the source. Add only what you need, keep the generated files inside your project, and shape them around your own tokens and requirements. Styling is driven by CSS variables so light and dark themes share one coherent system.

I treated the component library, registry, command line workflow, and documentation site as one product.

Next.js powers the documentation experience. React and TypeScript define the component APIs. Tailwind CSS handles styling and token driven customization. Base UI supports complex interactive behavior such as overlays, selects, menus, and positioning.

Each component follows the same product grammar: clear composition, practical usage, meaningful variants, live examples, and an API that remains readable. Blocks reuse those primitives rather than introducing isolated visual patterns.

The main challenge was restraint. A library of this size can quickly become inconsistent or noisy. Every component needed a clear purpose, a predictable interface, and a reason to exist within the wider system.

Most component libraries either impose a finished brand or provide foundations that still require substantial design work. arctis/ui aims for a more useful middle ground: calm defaults, thoughtful composition, readable documentation, and enough flexibility for teams to make the system their own.

Typography stays quiet. Navigation and documentation chrome stay light. Previews place components inside believable product scenes rather than empty playgrounds.

The home grid expresses the central idea in one view. Buttons, alerts, sheets, messages, tables, forms, and media all share the same visual rhythm. If the system only works when each component is shown alone, it is not finished.

The result is a live open source UI library with a complete documentation site, public source repository, npm package, registry, and clear installation workflow.

Building arctis/ui gave me a complete design systems project spanning component architecture, interaction design, theming, documentation, distribution, and the details that make reusable code feel considered from the first install.