Introduction

Welcome to SpiralUI

A scalable design system built to help you design faster, stay consistent, and ship with confidence. Spiral brings together components, tokens, and guidelines into a single, unified system so you can focus on building great products without starting from scratch.

What's included

Spiral provides:

Foundations: Color, typography, iconography, spacing, radius, and effects.
Components: Reusable interface components built for production.
Assets: Shared brand assets such as logos and flags.
Documentation: Usage guidelines and implementation references.
Platform implementations: Dedicated packages for Next.js/React.

The design system connects the design language in Figma with production-ready implementations, giving designers and engineers a common source of truth.

Requirements

Here's what you need to get started with Spiral.

React: Version 18 or higher.
Tailwind CSS: Version 4.
TypeScript: Optional, but recommended for a better development experience.
Module System: ESM (ECMAScript Modules) is preferred over CJS for efficiency and modern standards.
Node.js: Version 18.7 or higher.

Where to start

If you're new to Spiral UI, start with the installation guide for your platform.