Skyroc UI is a comprehensive monorepo containing a modern React UI component library along with its supporting toolchain. The monorepo structure allows for better development experience, shared configurations, and seamless integration between packages.

• Unified Development - All packages share the same development environment and tooling
• Seamless Integration - Components, plugins, and utilities work together out of the box
• Consistent Quality - Shared ESLint, TypeScript, and testing configurations
• Simplified Maintenance - Single repository for issues, PRs, and releases
• Better DX - Easy cross-package development and testing

Package	Description	npm
skyroc-ui	Core UI component library with 50+ components
@skyroc/tailwind-plugin	Tailwind CSS plugin for theming and design tokens
@skyroc/color	Color system utilities for palette generation

Package	Description	npm
@skyroc/form	Advanced form handling with type-safe field management
@skyroc/utils	Utility functions and helpers
@skyroc/type-utils	Advanced TypeScript utility types
@skyroc/virtualizer	Headless virtualizer for large lists and grids

Package	Description	npm
@skyroc/cli	CLI for git commits, changelog, and releases
create-skyroc	Project scaffolding tool
@skyroc/eslint-config	ESLint flat config for React, Vue, Next.js

This monorepo includes two essential development projects for working with and showcasing the component library:

An interactive component showcase and testing environment built with Next.js. The playground allows you to:

• Browse all components - Explore 50+ components with live examples
• Test interactions - Try different component states and variants
• View source code - See implementation details for each demo
• Develop new components - Test components in isolation during development

Quick start:

cd playground
pnpm dev
# Open http://localhost:3000

📖 View Playground README

A comprehensive documentation website built with Next.js and MDX, featuring:

• Complete API documentation - Detailed component APIs and props
• Usage guides - Step-by-step tutorials and best practices
• Live code previews - Interactive examples with editable code
• Search functionality - Quick access to any component or guide

Quick start:

cd docs
pnpm dev
# Open http://localhost:3000

📖 View Docs README

• Modern Design - Beautiful and clean design with light/dark theme support
• 50+ Components - Comprehensive collection of high-quality React components
• Highly Customizable - Built with Tailwind CSS, supports theme customization
• Responsive - Mobile-first design that works on all devices
• Accessible - Built on Radix UI, follows WAI-ARIA standards
• TypeScript - Full TypeScript support with excellent DX
• Powerful Forms - Built-in form system with validation and state management
• Tree Shaking - Optimized bundle size with tree-shaking support
• SSR Ready - Perfect support for Next.js and other SSR frameworks

npx create-skyroc my-app
cd my-app
npm run dev

# Install the UI library
npm install skyroc-ui

# Install the Tailwind plugin
npm install @skyroc/tailwind-plugin

Configure Tailwind CSS:

// tailwind.config.js
import { skyrocUIPlugin } from '@skyroc/tailwind-plugin'

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/skyroc-ui/dist/**/*.{js,ts,jsx,tsx}'
  ],
  plugins: [skyrocUIPlugin()]
}

Use components:

import { Button, Card, Input } from 'skyroc-ui'

function App() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Welcome to Skyroc UI</Card.Title>
      </Card.Header>
      <Card.Content className="space-y-4">
        <Input placeholder="Enter text" />
        <Button>Submit</Button>
      </Card.Content>
    </Card>
  )
}

skyroc-ui/
├── packages/                 # Published packages
│   ├── ui/                  # Core UI component library
│   ├── tailwind-plugin/     # Tailwind CSS plugin
│   ├── color/               # Color system utilities
│   ├── eslint-config/       # ESLint configuration
│   ├── next-docs-plugin/    # Documentation MDX plugin
│   └── next-docs-themes/    # Documentation themes
├── primitives/              # Low-level primitives
│   ├── filed-form/          # Form handling system
│   ├── utils/               # Utility functions
│   ├── type-utils/          # TypeScript utilities
│   └── virtualizer/         # Virtual scrolling
├── internal/                # Internal tools
│   ├── cli/                 # CLI tool
│   └── create-skyroc/       # Project scaffolding
├── playground/              # Component demos and testing
└── docs/                    # Documentation site

• Node.js >= 18
• pnpm >= 9.0.0

# Clone the repository
git clone https://github.com/Ohh-889/skyroc-ui.git
cd skyroc-ui

# Install dependencies
pnpm install

# Start development
pnpm dev

# Build all packages
pnpm build

# Run linting
pnpm lint

Contributions are welcome! Please read our contributing guidelines before submitting a PR.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Radix UI - Headless UI components
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Design inspiration
• Lucide React - Beautiful icons

• Author: Ohh
• Email: 1509326266@qq.com
• GitHub: https://github.com/Ohh-889/skyroc-ui