SpaceRun UI Library

A modern, accessible, and space-themed React component library built with TypeScript, Tailwind CSS, and Radix UI.

🚀 Features

• Space-themed Design: Beautiful components with cosmic and space-inspired visual effects
• Fully Accessible: Built on Radix UI primitives for excellent accessibility
• TypeScript Support: Full type safety and IntelliSense support
• Customizable: Easy to customize with Tailwind CSS classes
• Storybook Integration: Comprehensive documentation and examples
• AI-Ready Documentation: Structured documentation for AI tools like Lovable

📦 Installation

npm install @spacerun/ui

🎯 Quick Start

import { Badge, Button, SpaceCard, PriceTag } from '@spacerun/ui'

function App() {
  return (
    <div className="p-6">
      <Button variant="default">Click me</Button>
      <Badge variant="success">Active</Badge>
      <PriceTag price="10M" currency="M" />
      <SpaceCard>
        <h3>Welcome to SpaceRun</h3>
        <p>Explore the cosmos with our components</p>
      </SpaceCard>
    </div>
  )
}

🧩 Components

Interactive Components

• Button: Versatile button with multiple variants and sizes
• Badge: Status indicators and labels

Display Components

• PriceTag: Space-themed price display with discount support and cosmic animations

Layout Components

• SpaceCard: Content containers with space-themed effects
• SpaceFrame: Aspect ratio containers for media content
• SpaceLayout: Complete application layout system

🤖 AI-Ready Documentation System

This library includes a comprehensive documentation system designed for AI tools like Lovable. The documentation is machine-readable and provides detailed guidance for component selection and usage.

Features

• Structured Documentation: Each component has detailed documentation including props, variants, examples, and usage guidance
• "When to Use" Scenarios: Specific guidance on when and how to use each component
• Alternative Suggestions: Recommendations for alternative components when appropriate
• Code Examples: Ready-to-use code snippets for each use case
• Type Safety: Full TypeScript support for all documentation

Usage with AI Tools

import {
  BadgeDocs,
  ButtonDocs,
  SpaceCardDocs,
  SpaceFrameDocs,
  SpaceLayoutDocs,
  PriceTagDocs,
} from '@spacerun/ui'

// Access component information
console.log(ButtonDocs.name) // "Button"
console.log(ButtonDocs.description) // Component description
console.log(ButtonDocs.whenToUse) // Array of usage scenarios

// Get specific usage guidance
const deleteButtonGuidance = ButtonDocs.whenToUse.find(scenario =>
  scenario.scenario.includes('Dangerous'),
)

Testing the Documentation

Run the test script to verify the documentation system:

node scripts/test-docs.js

This will:

• Build the library
• Import all documentation objects
• Display component information
• Show "When to Use" scenarios
• Test AI integration functions
• Validate type exports

Example AI Integration

See examples/lovable-integration.ts for a complete example of how AI tools can use the documentation system for:

• Component selection based on use cases
• Code generation with appropriate variants
• Prop validation
• Alternative component suggestions
• Usage guidance

📚 Storybook

View all components and their documentation in Storybook:

npm run storybook

Each component includes:

• Interactive examples
• Variant demonstrations
• Props documentation
• "When to Use" guidance
• Code examples

🛠️ Development

Setup

npm install

Build

npm run build

Storybook

npm run storybook

Testing

npm run test

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

🎨 Design System

This library follows a space-themed design system with:

• Cosmic color palette
• Glass morphism effects
• Animated elements
• Consistent spacing and typography
• Accessibility-first approach

Built with ❤️ and 🌌 for the developer community