A modern, minimalist CSS library that embraces bold design principles, high-contrast aesthetics, and a no-nonsense approach to web design. Inspired by the Brutalist architecture movement, this library focuses on raw, honest, and functional design.
Get started in seconds with the CDN:
<!-- Add to your HTML head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OshekharO/Neubrutalism@main/neubrutalism.css">
<!-- Optional: For interactive components (toasts, dark mode toggle) -->
<script src="https://cdn.jsdelivr.net/gh/OshekharO/Neubrutalism@main/neubrutalism.js"></script>- Full Documentation - Comprehensive guide with all components and utilities
- Starter Template - Ready-to-use landing page template
- Dashboard Example - Admin dashboard layout example
- 🎨 High-contrast design - Bold black and white with striking shadows
- ⚡ Lightweight - ~70KB unminified, no dependencies
- 🌙 Dark mode - Automatic (system preference) or manual toggle
- ♿ Accessible - Focus-visible states, reduced motion support, screen reader friendly
- 📱 Responsive - Mobile-first design with flexible components
- 🔧 Customizable - Easy theming with CSS custom properties
- 🧩 40+ Components - Everything you need to build modern UIs
| Category | Components |
|---|---|
| Typography | Headings, Display text, Blockquotes, Code blocks |
| Buttons | Standard, Animated, Icon buttons, Button groups |
| Cards | Content cards, Headers, Footers, Images |
| Forms | Inputs, Checkboxes, Radio, Switches, Range sliders, Input groups |
| Navigation | Navbar, Breadcrumbs, Pagination, Tabs |
| Feedback | Alerts, Toasts, Badges, Progress bars, Spinners |
| Data Display | Tables, Lists, Avatars, Tags, Timeline, Rating |
| Overlays | Modals, Dropdowns, Tooltips, Accordion |
| Layout | Grid system (1-6 columns), Containers, Masonry |
| Utilities | Colors, Spacing, Display, Text alignment |
// Toggle dark mode
toggleDarkMode(true); // Enable
toggleDarkMode(false); // Disable
// Check current state
if (isDarkMode()) {
console.log("Dark mode is active");
}Or add the class manually:
<html class="nb-dark">Override CSS custom properties to match your brand:
:root {
--nb-primary: #000;
--nb-secondary: #fff;
--nb-accent: #3498db;
--nb-success: #2ecc71;
--nb-danger: #e74c3c;
--nb-warning: #f39c12;
--nb-border-width: 2px;
--nb-shadow-offset: 4px;
}- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Comprehensive documentation
- ✅ 5 new components (Skeleton, Timeline, Stepper, Rating, Empty State)
- ✅ Improved responsive design across all screen sizes
- ✅ Mobile navigation with slide-out menu
- ✅ Dark mode support
- ✅ Example templates
Contributions are welcome! Please read our Contributing Guidelines before submitting a pull request.
MIT License - see LICENSE for details.
Created by Saksham Shekher