React Vite Themes

⚠️ Note: This is a test/experimental package created for learning purposes. It's not intended for production use but serves as a demonstration of React theme system concepts.

A comprehensive React theme system with Vite, featuring atomic design components, SCSS variables, and dark/light theme support.

Features

🎨 Atomic Design Components: Button, Card, Form, Input, Modal, Navbar, SearchBar, Sidebar
🌓 Theme System: Light/Dark theme support with easy switching
🎯 TypeScript: Full type safety for all components
🎨 SCSS Variables: Comprehensive design token system
📱 Responsive: Mobile-first design approach
⚡ Vite: Fast development and build times

Quick Start

npm install react-vite-themes

import { ThemeProvider, Button, Card } from 'react-vite-themes';
import 'react-vite-themes/styles';

function App() {
  return (
    <ThemeProvider>
      <Button variant="primary">Hello World!</Button>
      <Card>Your content here</Card>
    </ThemeProvider>
  );
}

Available Components

Atoms

Alert - Notification components with variants
Button - Interactive buttons with multiple styles
Card - Content containers with elevation
Form - Form wrapper with validation
Input - Text input fields
Icon - Icon system
Modal - Overlay dialogs
Navbar - Navigation header
SearchBar - Search input component
Sidebar - Collapsible sidebar
ThemeToggle - Theme switcher

Hooks

useTheme - Access and modify theme state
useLocalStorage - Persistent storage utility

Theme System

The package includes a complete theme system with:

Design Tokens: Colors, spacing, typography, shadows
Theme Variants: Light and dark themes
SCSS Variables: Easy customization
TypeScript Types: Full type safety

Development

This package was created as a learning exercise to explore:

React component architecture
Theme system design
SCSS organization
TypeScript integration
NPM package publishing

License

MIT License - feel free to use for learning and experimentation!

JSPM

react-vite-themes

Package Exports

Readme