Documentation
Brutal UI - A bold, unapologetic design system for React
v0.1.0TypeScriptReact 19
Getting Started
Installation
npm install @brutal-ui/react
Make sure you have Tailwind CSS installed and configured in your project.
Basic Usage
import { Button, Card, Badge } from '@brutal-ui/react';
function App() {
return (
<Card>
<h2>Welcome to Brutal UI</h2>
<Badge variant="success">Active</Badge>
<Button variant="primary">Get Started</Button>
</Card>
);
}
Components
Alert
Display important messages
Badge
Labels and tags
Button
Interactive buttons with ripple
Card
Containers with header/footer
Checkbox
Binary selection input
Input
Text input fields
Modal
Dialog overlays
Progress
Progress indicators
Radio
Single selection from options
Switch
Toggle switches
Tabs
Tabbed navigation
Toast
Notification system
Design Principles
🎯 Bold & Unapologetic
Thick borders, strong shadows, and high contrast create a powerful visual presence.
🎨 Raw Aesthetics
No subtle gradients or soft edges. Every element is sharp, clear, and intentional.
♿ Accessibility First
All components include proper ARIA attributes and keyboard navigation support.
âš¡ Performance
Tree-shakable components built with TypeScript and optimized for modern bundlers.