Summit
Summit is Solstice’s design system, a registry of components and one theme that every Solstice product shares.
Summit has two parts. The shadcn CLI copies each component of the registry into a product as source code that the product then owns. The theme is one stylesheet, tokens.css, in the @bysolstice/tokens package.
Stack
Summit’s components are React 19 components styled with Tailwind CSS v4.
| Library | Role |
|---|---|
| Tailwind CSS | Its utility classes style every component, and tokens.css is its theme |
| shadcn/ui | Its base-nova style is the starting point, and its CLI installs every item |
| Base UI | The unstyled primitives under most components |
| Phosphor | The icons |
| Hanken Grotesk Variable | The one typeface. tokens.css imports its font files. |
Most items start from a shadcn item, and registry.json records how each one differs from it.
Built-In Support
| Subject | Mechanism | Page |
|---|---|---|
| Dark mode | A dark class on html sets every color variable to its dark value | Theming |
| Right-to-Left | Components are written with logical properties, so dir="rtl" mirrors their layout | Right-to-Left |
| Translation | One provider supplies the labels built into the components and the Calendar’s date locale | Summit Provider |
| Accessibility | Summit is built to WCAG 2.2 Level AA | Accessibility |
Sections
Start with Setup. The components read their colors from tokens.css, and bg-success and bg-warning exist only after you import it.