React Vite Themes

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

Features

• 🎨 Atomic Design System - Organized components from atoms to organisms
• 🌙 Dark/Light Themes - Seamless theme switching with context
• 🎯 TypeScript Support - Full type safety and IntelliSense
• 📱 Responsive Design - Mobile-first approach with breakpoints
• 🎨 SCSS Variables - Consistent design tokens and theming
• ⚡ Vite Optimized - Fast development and builds
• 📚 Storybook Integration - Component documentation and testing

Installation

npm install @react-vite-themes/core

Quick Start

1. Import the Theme Provider

import { ThemeProvider } from '@react-vite-themes/core';

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

2. Import the CSS

import '@react-vite-themes/core/styles';

3. Use Components

import { Button, Card, Input } from '@react-vite-themes/core';

function MyComponent() {
  return (
    <Card variant="elevated">
      <Input placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Available Components

Atoms

• Alert - Notification messages
• Button - Interactive buttons with variants
• Card - Content containers
• Form - Form wrappers
• Icon - Icon components
• Input - Form inputs and textareas
• Modal - Overlay dialogs
• Navbar - Navigation bars
• SearchBar - Search inputs
• Sidebar - Side navigation

Utilities

• ThemeToggle - Theme switching component
• useTheme - Theme context hook
• useLocalStorage - Local storage hook
• classNames - CSS class utility

Theme System

Using the Theme Hook

import { useTheme } from '@react-vite-themes/core';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

Custom Themes

The theme system uses CSS custom properties that you can override:

:root {
  --color-primary-500: #3b82f6;
  --color-background: #ffffff;
  --color-text-primary: #1f2937;
}

[data-theme='dark'] {
  --color-background: #1f2937;
  --color-text-primary: #f9fafb;
}

Component Variants

Button Variants

• default - Standard button
• primary - Primary action
• secondary - Secondary action
• outline - Bordered style
• ghost - Minimal style

Card Variants

• elevated - With shadow
• outline - Bordered
• filled - Background filled
• glass - Glassmorphism
• bordered - Primary border

Form Variants

• default - Standard form
• elevated - With shadow
• glass - Glassmorphism
• bordered - Bordered style

Development

Local Development

# Install dependencies
npm install

# Start development server
npm run dev

# Start Storybook
npm run storybook

# Build for production
npm run build

Building the Package

# Build all assets
npm run build

# Build types only
npm run build:types

# Build styles only
npm run build:styles

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

• 📖 Documentation
• 🐛 Issues
• 💬 Discussions