TapTools

A modern UI component library focused on micro-interactions and novel UI components. Built with vanilla JavaScript and designed to be wrapped for React, with an emphasis on smooth animations and performance.

✨ Features

• 🎯 Vanilla JS First - Pure JavaScript components that work anywhere
• ⚛️ React Ready - Easy-to-use React wrappers included
• 🎨 Animation Focused - Smooth, performant micro-interactions
• 📱 Responsive - Mobile-first design approach
• ♿ Accessible - WCAG compliant with keyboard navigation
• 🎭 Themeable - CSS custom properties for easy customization
• 📦 Tree-shakeable - Import only what you need

🚀 Quick Start

npm install taptools

Vanilla JavaScript

import { Button } from 'taptools';

const button = new Button({
  element: document.querySelector('#my-button'),
  variant: 'primary',
  onClick: () => console.log('Clicked!')
});

React

import { Button } from 'taptools/react';

function App() {
  return (
    <Button variant="primary" onClick={() => console.log('Clicked!')}>
      Click me
    </Button>
  );
}

📚 Documentation

• Component Documentation
• Animation Guidelines
• Contributing Guide
• Examples

🛠️ Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build

# Run tests
npm test

🎨 Inspiration

This library draws inspiration from:

• animate-ui.com - Smooth animation patterns
• magicui.design - Modern component designs
• shadcn/ui - Developer experience and architecture

📄 License

MIT

🤝 Contributing

We welcome contributions! Please read our Contributing Guide for details on our development process and coding standards.