🍀 Clover CSS

Modern CSS components with advanced visual effects, theming, and accessibility built in

✨ Features

• 🎨 20 handcrafted CSS components
• ⚙️ CSS variable customization
• 🌙 Automatic dark mode support
• ♿ Accessibility-focused design
• 🚀 Modern browser compatibility
• 📦 Single-file distribution
• 🧩 Zero build configuration

📦 Installation

NPM

npm install clover-css-lib

Import CSS

@import 'clover-css-lib/clover.css';

CDN

<link rel="stylesheet" href="https://unpkg.com/clover-css-lib/clover.css">

🚀 Quick Start

<div class="clover-glass-card">
  <h2>Hello Clover 🍀</h2>
  <p>Beautiful UI with a single class.</p>
</div>

<button class="clover-clay-button">
  Click Me
</button>

🧩 Components

• 🪟 Glass Card
• 🔘 Clay Button
• 🟨 Neubrutal Card
• 💻 Cyber Panel
• 🧲 Magnetic Container
• 🫧 Liquid Blob
• ⌨️ Typewriter
• 🌈 Kaleidoscope
• 🔄 Morphing Shape
• 🌀 Rainbow Spinner
• 🌌 Parallax Section
• 🎴 Flip Card 3D
• 🔍 Expand Search
• 🔔 Notification Bell
• 👻 Drag Ghost
• 🔦 Spotlight Card
• 🎚️ Toggle Realm
• 💬 Tooltip Magic
• 📢 Marquee Banner
• 📊 Progress Cosmic

📖 See the documentation for complete examples, customization options, and component-specific settings.

🎨 Theming

Customize components globally using CSS variables.

:root {
  --clover-accent: #6c5ce7;
}

🌙 Dark Mode

Dark mode is supported automatically through prefers-color-scheme.

♿ Accessibility

• ⌨️ Keyboard-friendly interactions
• 🎯 Focus-visible states
• 🏃 Reduced-motion support
• 📱 Responsive layouts
• 🎨 Accessible color contrast

🌐 Browser Support

Supports modern versions of:

• Chrome
• Firefox
• Safari
• Edge

📂 Project Structure

clover-css/
├── clover.css
├── index.html
├── docs.html
├── README.md
└── package.json

🤝 Contributing

Contributions, bug reports, and feature requests are welcome.

1. 🍴 Fork the repository
2. 🌱 Create a feature branch
3. 💻 Make your changes
4. 🚀 Submit a pull request

📄 License

MIT License.

🔗 Links

• 📦 NPM: https://npmjs.com/package/clover-css-lib
• ⭐ GitHub: https://github.com/spideythedev/clover-css
• 🌐 Demo: https://clover-css.vercel.app

---

Built with 🍀 Clover CSS.