neo-brutalism-ui-mates

v0.3.1

Published

a month ago

Neo-brutalism React component library — bold borders, hard shadows, Tailwind CSS v4 & Radix UI

0High
0Medium
0Low

react react-components ui ui-kit components tailwind tailwindcss neo-brutalism neobrutalism design-system radix-ui shadcn

NeoBrutalismUI mates

A React component library with a neo-brutalism aesthetic — thick borders, hard shadows without blur, high-contrast colors, and press effects on interaction. Built with Tailwind CSS v4, shadcn/ui patterns, and Radix UI primitives.

49+ components · Dark mode · TypeScript · Tree-shakeable ESM

Features

Hard offset shadows and thick borders (theme-aware via --border tokens)
Press effects on buttons, inputs, and interactive components
Theming via CSS variables with built-in dark mode
Radix UI–powered accessibility
shadcn-compatible composable API

Installation

pnpm add neo-brutalism-ui-mates
# or
npm install neo-brutalism-ui-mates
# or
yarn add neo-brutalism-ui-mates

Prerequisites

React 18 or 19
Tailwind CSS v4
TypeScript (recommended)

Quick Start

1. Import the stylesheet

// Next.js — app/layout.tsx
import "neo-brutalism-ui-mates/styles.css";

2. Use components

import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "neo-brutalism-ui-mates";

export function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello NeoBrutalismUI mates</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get started</Button>
      </CardContent>
    </Card>
  );
}

3. Toast notifications (Sonner)

import { Toaster } from "neo-brutalism-ui-mates";
import { toast } from "sonner";

// In your root layout
<Toaster />

// Anywhere in your app
toast("Event created");

Next.js Setup

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["neo-brutalism-ui-mates"],
};

export default nextConfig;

Load the recommended fonts:

import { DM_Sans, Space_Grotesk } from "next/font/google";

const spaceGrotesk = Space_Grotesk({
  variable: "--nb-font-heading",
  subsets: ["latin"],
});

const dmSans = DM_Sans({
  variable: "--nb-font-body",
  subsets: ["latin"],
});

Tailwind CSS v4

For npm consumers:

@import "neo-brutalism-ui-mates/styles.css";

For monorepo development:

@import "neo-brutalism-ui-mates/src/styles/globals.css";
@source "../../packages/ui/src";

Theming

Color theme presets

Ten bold palettes ship with the library. Set data-theme on your root element:

<html data-theme="ocean">
<html data-theme="candy" class="dark">

Available presets: classic · sunset · ocean · forest · candy · retro · grape · neon · berry · citrus

Presets are included in styles.css. To load them separately:

@import "neo-brutalism-ui-mates/themes.css";

Custom overrides

Override tokens in your global stylesheet:

:root {
  --nb-primary: #7c3aed;
  --nb-secondary: #22d3ee;
  --nb-accent: #fde047;
  --nb-shadow: 6px 6px 0 0 #000000;
}

Dark mode

<html class="dark">

Dark mode automatically switches borders, shadows, and background colors per active preset.

| Token | Light | Dark | |-------|-------|------| | --nb-bg | #fffdf5 | #1a1a2e | | --nb-border-color | #000000 | #ffffff | | --nb-shadow | 4px 4px 0 #000 | 4px 4px 0 #fff | | --nb-card | #ffffff | #16213e |

Components

Core

Alert, Avatar, Badge, Button, Card

<Button variant="secondary" size="lg">Large</Button>
<Button variant="outline" asChild>
  <a href="/docs">Link</a>
</Button>

Button variants: default, secondary, accent, outline, destructive, ghost, link

Form

Calendar, Checkbox, Combobox, DatePicker, Form, Input, InputOTP, Label, RadioGroup, Select, Slider, Switch, Textarea, Toggle

import { Form, FormField, FormItem, FormLabel, FormControl, Input } from "neo-brutalism-ui-mates";
import { useForm } from "react-hook-form";

const form = useForm();

<Form {...form}>
  <FormField name="email" render={({ field }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
    </FormItem>
  )} />
</Form>

Overlay

Accordion, AlertDialog, Collapsible, Command, ContextMenu, Dialog, Drawer, DropdownMenu, HoverCard, Menubar, NavigationMenu, Popover, Sheet, Sonner, Tabs, Tooltip

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "neo-brutalism-ui-mates";

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog title</DialogTitle>
    </DialogHeader>
  </DialogContent>
</Dialog>

Layout & Data

Breadcrumb, Carousel, Chart, DataTable, ImageCard, Marquee, Pagination, Progress, Resizable, ScrollArea, Separator, Sidebar, Skeleton, Table

import { ChartContainer, ChartTooltip, ChartTooltipContent } from "neo-brutalism-ui-mates";
import { Bar, BarChart } from "recharts";

<ChartContainer config={{ value: { label: "Value", color: "hsl(var(--primary))" } }}>
  <BarChart data={data}>
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="value" fill="var(--color-value)" />
  </BarChart>
</ChartContainer>

Utility

import { cn } from "neo-brutalism-ui-mates";

<div className={cn("p-4", isActive && "bg-primary")} />

Changelog

v0.3.1

Added 10 color theme presets with light/dark variants (themes.css export)
Fixed useFormField guard when used outside <FormField>
Added Vitest test suite for Button, Input, Card, Badge, Checkbox, Dialog, and Form

v0.3.0

Added 25 components: Accordion, Alert Dialog, Breadcrumb, Calendar, Carousel, Chart, Collapsible, Combobox, Command, Context Menu, Data Table, Date Picker, Drawer, Form, Hover Card, Image Card, Input OTP, Marquee, Menubar, Navigation Menu, Pagination, Resizable, Scroll Area, Sidebar, Sonner
Improved dark mode with semantic border tokens (border-border)
Added overlay token --nb-overlay for dialogs and sheets
Full interactive documentation for all components

v0.2.x

Initial npm publish with 24 core components
English documentation and README

Troubleshooting

Styles not appearing — Import neo-brutalism-ui-mates/styles.css in your root layout.

Module not found in Next.js — Add transpilePackages: ["neo-brutalism-ui-mates"] in next.config.ts.

Fonts look wrong — Set --nb-font-heading and --nb-font-body CSS variables, or load fonts via next/font.

Development

git clone https://github.com/rahmatez/NeoBrutalismUI-mates.git
cd NeoBrutalismUI-mates
pnpm install
pnpm --filter neo-brutalism-ui-mates build
pnpm --filter neo-brutalism-ui-mates test
pnpm dev

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

NeoBrutalismUI mates

Features

Installation

Prerequisites

Quick Start

1. Import the stylesheet

2. Use components

3. Toast notifications (Sonner)

Next.js Setup

Tailwind CSS v4

Theming

Color theme presets

Custom overrides

Dark mode

Components

Core

Form

Overlay

Layout & Data

Utility

Changelog

v0.3.1

v0.3.0

v0.2.x

Troubleshooting

Development

Links

License