⚡ Spark Design System

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

✨ Features

• 🎨 40+ Components - Comprehensive set of UI components
• 🔒 Type Safe - Built with TypeScript for better developer experience
• 🎯 Accessible - WCAG compliant components built on Radix UI
• 🌙 Dark Mode - Built-in theme switching support
• 📱 Responsive - Mobile-first design approach
• 🎨 Customizable - Easy theming with CSS variables
• 📦 Tree Shakable - Import only what you need
• ⚡ Fast - Optimized for performance

🚀 Quick Start

Installation

npm install @alanssant0s/spark-ds
# or
yarn add @alanssant0s/spark-ds
# or
pnpm add @alanssant0s/spark-ds

Setup

1. Import styles in your main CSS file:

@import '@alanssant0s/spark-ds/dist/style.css';

2. Configure Tailwind (optional, for custom styling):

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@alanssant0s/spark-ds/dist/**/*.{js,ts,jsx,tsx}"
  ],
  // ... rest of config
}

Basic Usage

import { Button, Card, CardContent, CardHeader, CardTitle } from '@alanssant0s/spark-ds';

function App() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>Welcome to Spark DS</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  );
}

📚 Components

Core Components

• Button - Multiple variants and sizes
• Card - Flexible content containers
• Input - Form input fields with validation
• Label - Accessible form labels
• Badge - Status and category indicators
• Avatar - User profile images with fallbacks

Form Components

• Checkbox - Selection controls
• RadioGroup - Single selection from options
• Select - Dropdown selection
• Switch - Toggle controls
• Slider - Range input controls
• Textarea - Multi-line text input

Layout Components

• Accordion - Collapsible content sections
• Tabs - Tabbed navigation
• Table - Data tables with sorting
• Separator - Visual content dividers

Overlay Components

• Sheet - Slide-out panels
• Popover - Contextual overlays
• Tooltip - Helpful hints and information

Modal Components

• Dialog - Base modal component
• FormModal - Specialized modal for forms with scroll
• LargeInfoModal - Large modal for displaying information
• LargeFormModal - Large modal for complex forms
• AlertModal - Compact alert modals (Info, Success, Warning, Error)
• MobileModalWrapper - Mobile swipe-to-close functionality

Feedback Components

• Toast - Temporary notifications
• Alert - Important messages
• Progress - Progress indicators
• Skeleton - Loading placeholders

🎨 Theming

Customize the design system using CSS variables:

:root {
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  /* ... more variables */
}

.dark {
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  /* ... dark mode variables */
}

🌙 Dark Mode

Dark mode is supported out of the box. Simply add the dark class to your root element:

// Toggle dark mode
document.documentElement.classList.toggle('dark');

📖 Documentation & Examples

• Live Playground: Run npm run dev and visit /playground
• Component Showcase: Visit /showcase for detailed examples
• Modal Examples: Visit /components/modals for modal demonstrations
• API Reference: TypeScript definitions included

Modal Example

import { FormModal, Button, Input, Label } from '@alanssant0s/spark-ds';

function MyForm() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <FormModal
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      onSubmit={(e) => {
        e.preventDefault();
        // Handle form submission
        setIsOpen(false);
      }}
      title="Create New Item"
      submitText="Create"
    >
      <div className="space-y-4">
        <div>
          <Label htmlFor="name">Name</Label>
          <Input id="name" placeholder="Enter name" required />
        </div>
        <div>
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="[email protected]" required />
        </div>
      </div>
    </FormModal>
  );
}

🛠️ Development

# Clone the repository
git clone https://github.com/alansantos/spark-design-system.git
cd spark-design-system

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build

# Run tests
npm test

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

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

📄 License

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

🙏 Acknowledgments

Built with these amazing technologies:

• React - UI Library
• TypeScript - Type Safety
• Tailwind CSS - Styling
• Radix UI - Accessible Primitives
• Vite - Build Tool

📊 Stats