A minimalist design framework inspired by Ada Lovelace, the first computer programmer. AdaUI provides clean, intuitive, and elegant UI components for modern web applications.
- 🎨 Minimalist Design: Clean and elegant components inspired by Ada Lovelace's mathematical precision
- 📱 Responsive: Fully responsive design system that works across all devices
- 🎯 Modern: Built with modern CSS features and best practices
- 🔧 Customizable: Easy to customize using CSS variables
- 🌓 Dark Mode Ready: Built-in support for light and dark themes
- 🚀 Performance: Lightweight and optimized for performance
- Add the CSS file to your HTML:
<link rel="stylesheet" href="css/AdaUI.css">- Add the required Google Fonts:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">- Start using AdaUI components in your HTML!
AdaUI includes a variety of components:
- Typography
- Buttons
- Cards
- Alerts
- Form Elements
- Navigation
- Headers
- Footers
- Feature Icons
- Section Highlights
- And more!
The framework is organized into modular components:
css/
├── core/
│ ├── variables.css # Design tokens and variables
│ ├── base.css # Base styles and typography
│ └── layout.css # Layout and grid system
├── component/
│ ├── header.css # Header and navigation styles
│ └── components.css # UI component styles
└── AdaUI.css # Main entry point
AdaUI uses CSS variables for easy customization. Override these variables in your own CSS to customize colors, spacing, and more:
:root {
--primary-purple: #8b5cf6;
--primary-dark-purple: #7c3aed;
--spacing-4: 16px;
--radius-md: 10px;
}AdaUI supports all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
We welcome contributions! Please feel free to submit a Pull Request.
MIT License - feel free to use this in your projects!