brutalist-ui-components

A brutalist UI component library with bold borders, offset shadows, and a striking blue and white color scheme.

Installation

npm install brutalist-ui-components
# or
yarn add brutalist-ui-components
# or
pnpm add brutalist-ui-components

Setup

This library uses Tailwind CSS classes. Make sure your project has Tailwind CSS configured.

Add the package path to your tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/brutalist-ui-components/**/*.{js,ts,jsx,tsx}',
  ],
  // ... rest of config
}

Usage

import { Button, Card, CardBody, Input, Badge, Modal, Tabs } from 'brutalist-ui-components';

function App() {
  return (
    <Card>
      <CardBody>
        <Input label="Email" type="email" />
        <Button variant="primary">Submit</Button>
        <Badge variant="success">New</Badge>
      </CardBody>
    </Card>
  );
}

Components

Button

<Button variant="primary" size="md">Click Me</Button>

• Variants: primary, secondary, outline, ghost
• Sizes: sm, md, lg

Card

<Card hover>
  <CardHeader>Header</CardHeader>
  <CardBody>Content</CardBody>
  <CardFooter>Footer</CardFooter>
</Card>

Input

<Input label="Email" error="Required field" />

Badge

<Badge variant="info">New</Badge>

• Variants: default, success, warning, info

Modal

<Modal isOpen={open} onClose={() => setOpen(false)} title="Title">
  Content
</Modal>

Tabs

<Tabs tabs={[
  { label: 'Tab 1', content: <div>Content 1</div> },
  { label: 'Tab 2', content: <div>Content 2</div> }
]} />

Design Philosophy

Bold, brutalist design with:

• Thick 4px borders
• Offset box shadows
• Sharp edges (no rounded corners)
• Uppercase typography
• High contrast colors

License

MIT