Skip to content

Repository files navigation

Design System

English | 简体中文

Aurora is a design specification with an interactive React reference preview for modern SaaS products. It defines semantic tokens, reusable interaction patterns, and installable shadcn registry components.

This pnpm monorepo uses Turborepo to build every app and registry package. The root assembler discovers systems/<design-system>/component/registry.json, so multiple design systems can share one Cloudflare Pages project.

Highlights

  • A refined visual system with layered gradients, depth, and accessible contrast
  • Clear documentation for design principles, styles, and components
  • An interactive static preview that demonstrates the specification in context
  • Published as a shadcn registry at https://design-system.yinxulai.com

Live site

The design system registry and visual previews are deployed to https://design-system.yinxulai.com:

Install components from the live registry:

npx shadcn add https://design-system.yinxulai.com/aurora/r/button.json

See systems/aurora/README.md for the full install and usage guide.

Project Structure

Registry build

pnpm install
pnpm build

The generated output/registries.json lists all design systems. Each registry is published under its own namespace, for example /aurora/r/button.json. See DEPLOYMENT.md for the Cloudflare Git integration settings.

Preview

View the live Aurora preview at https://design-system.yinxulai.com/aurora/preview/.

To run all frontend workspaces locally:

pnpm dev

Turbo prints the Vite development URLs for the catalog and Aurora preview.

Effect Preview

Aurora preview Aurora preview

Documentation

About

A polished, modern design system demo centered on an Aurora-inspired dashboard experience. The project combines semantic design tokens, reusable UI patterns, and a rich preview page to showcase how the visual language feels in real interfaces.

Topics

Resources

Stars

3 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages