Introduction

SolarUI is an open-source UI component library designed to help you build beautiful, accessible, and consistent interfaces faster.

Built on top of shadcn/ui , Tailwind CSS , and Radix UI , SolarUI provides a set of copy-paste-ready components that you own and can customize to fit your design system.

Tech Stack

Philosophy

SolarUI is built on a few intentional principles. Not arbitrary conventions — each one addresses a real visual or interaction problem.

Open code, no lock-in

SolarUI is built on shadcn/ui, and that choice is as philosophical as it is technical. shadcn/ui is not a component library in the traditional sense: you get the source code directly in your project. You own it, you can read it, modify it, adapt it — no workarounds, no wrappers, no lock-in.

“This is not a component library. It is how you build your component library.”

Controls share a single height

Buttons and inputs must always have the same height. When a button sits next to an input, they form a single visual unit — if their heights differ, that unit breaks.

This is enforced at the token level via h-control, which maps to --height-control. Changing one automatically changes both.

Sizing system: default, compact, and responsive

Every component in SolarUI is designed around two intentional size modes:

Default is the baseline. It gives each component breathing room — comfortable padding, readable text, and touch targets large enough to be usable. This is what you get out of the box.

Compact is a denser variant. Every component becomes narrower and tighter, without losing legibility or accessibility. It is designed for power-user interfaces, data-heavy dashboards, or any context where screen real estate matters more than comfort.

These two modes are not just stylistic — they are structural. Switching from default to compact adjusts spacing, height, and typography tokens across all components at once. Nothing needs to be overridden individually.

Beyond those two modes, the system is also responsive by nature. Components adapt their size depending on the screen they are rendered on. A button on mobile is larger — its hit area needs to be accessible to a finger. The same button on desktop is slightly smaller and more refined, because a cursor is precise and space is less constrained.

This is not done through arbitrary breakpoint overrides. It is built into the token system: each size token resolves to a different value depending on the viewport, so all components scale together consistently.

Group, categorize, order

At Solar, we pay careful attention to how components and icons are sorted and grouped. This is not an aesthetic concern — it is a structural decision.

Elements that are close together are perceived as related: grouping components that share a role creates an implicit visual grammar. A well-defined category says not only what it contains, but also what it does not accept — which prevents drift and keeps the system manageable as it grows. And when components are well organized, gaps become visible: a sparsely populated category immediately signals what is missing.