@spark99/ui

React UI components for e-commerce applications with dynamic theming and Tailwind CSS support.

Features

• 🎨 Dynamic Theming: Runtime theme switching with CSS custom properties
• 🛒 E-commerce Ready: Components built for online stores (ProductCard, Cart, etc.)
• 🎯 TypeScript: Fully typed with excellent IDE support
• ⚡ Performance: Built with modern bundling and tree-shaking
• 🎭 Accessible: Built on Radix UI primitives
• 🌊 Tailwind: Styled with Tailwind CSS utilities

Installation

npm install @spark99/ui

Usage

import { Button, Card, ProductCard } from '@spark99/ui'
import '@spark99/ui/globals.css'

function App() {
  return (
    <div>
      <Button variant="primary">Hello World</Button>
      <Card className="p-4">
        <h2>Welcome to Spark99 UI</h2>
      </Card>
    </div>
  )
}

Tailwind Configuration

Add the preset to your tailwind.config.js:

import { preset } from '@spark99/ui/preset'

export default {
  presets: [preset],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@spark99/ui/dist/**/*.{js,mjs}'
  ]
}

Theming

import { applyTheme } from '@spark99/ui'

// Apply custom theme
applyTheme({
  hue: 280,        // Purple theme
  saturation: 0.8,
  brightness: 0.9,
  radius: 0.5,
  dark: false
})

Components

• Primitives: Button, Card, Badge
• Interactive: Dialog, Sheet, Popover, Select
• E-commerce: ProductCard, ProductGrid, Cart, Header
• Sections: Hero, Newsletter, Testimonials

License

MIT