📦 Digidaw Brutalist UI

Digidaw Brutalist UI is a React 19-based UI component library with a bold Neo-Brutalism style.

With extra-thick borders, high-contrast neon colors, and solid block shadows (no blur), this library is designed to make your frontend app stand out with sharp, responsive, and interactive behavior via Framer Motion.

⚡ Key Features

• Complete & Comprehensive: Delivers 40+ modern UI components—from atomic core (Button, Input) to complex structures (DataGrid, KanbanBoard, Rich Editor, and Charts).
• Consistent Design System: Implemented with Tailwind V4 utility classes and plain CSS variables.
• Punchy Animations: Satisfying micro-interactions (hover, tap, enter) with a physical feel powered by Framer Motion.
• Production-Ready: Bundled in ES and UMD formats using Vite, and SSR-friendly.

🛠️ Installation

Use npm, yarn, pnpm, or bun to install:

npm install digidaw-brutalist-ui

Install peer dependencies as required:

npm install react react-dom lucide-react motion

Note: React 19+ is required.

🚀 Basic Usage

Include the style sheet in your app entry file (e.g., main.tsx or App.tsx):

import 'digidaw-brutalist-ui/dist/style.css';

Then import and use the components:

import { Button, Card, Heading, Badge } from 'digidaw-brutalist-ui';
import { Rocket } from 'lucide-react';

export default function LandingExample() {
  return (
    <div className="p-12 space-y-6">
      <Heading level={1} uppercase className="text-brand-sage">
        Welcome to the <Badge variant="warning">Wild</Badge> Web!
      </Heading>

      <Card hoverEffect padding="lg" className="bg-brand-yellow">
        <h3 className="font-black text-2xl mb-4">Start Your Journey</h3>
        <p className="font-bold text-gray-800 mb-6">
          Click the button below when you are ready to embrace the loudest design ever drawn on browser canvas.
        </p>

        <Button
          variant="primary"
          size="lg"
          icon={<Rocket />}
          onClick={() => alert('Launch!')}
        >
          Launch Rocket
        </Button>
      </Card>
    </div>
  );
}

🧩 Available Components

The library includes:

1. Foundations: Button, Card, Badge, Heading, TextGradient, Section, Container, ThemeContext, Divider.
2. Forms & Input: Input, Textarea, Checkbox, RadioGroup, Select, Switch, Slider, UploadForm.
3. Navigation & Layout: Tabs, Accordion, Dialog, Modal, Alert, Toast.
4. Data & Table: Table, DataGrid, Pagination, Avatar, Skeleton, ProgressBar, Timeline, BrutalistCharts.
5. Interactive & Advanced: SortableItem, SortableList, DatePicker, Calendar, Editor, KanbanBoard.

For detailed prop docs, run local Storybook from the repository or use the generated static Storybook docs.