Anti-UI

Anti-UI is a humorous library designed to instantly transform your beautiful Tailwind CSS projects into UI monstrosities.

Features

• Transform your elegant designs into horrible ones without changing the code
• Compatible with React, Next.js and any project using Tailwind CSS
• Easy to integrate and disable when you're done laughing
• Themed collections of UI anti-patterns (garish colors, impossible typography, inconsistent alignments...)

Installation

npm install anti-ui
# or
yarn add anti-ui

Usage

In React/Next.js

import { AntiUIProvider } from 'anti-ui';

function MyApp({ Component, pageProps }) {
  return (
    <AntiUIProvider intensity="maximum" theme="nightmare90s">
      <Component {...pageProps} />
    </AntiUIProvider>
  );
}

export default MyApp;

At component level

import { AntiUI } from 'anti-ui';

function MyComponent() {
  return (
    <AntiUI>
      <div className="p-4 bg-blue-500 text-white rounded">
        This content will look horrible!
      </div>
    </AntiUI>
  );
}

Available Themes

• nightmare90s: Comic Sans fonts, animated GIFs, neon colors
• boringCorporate: Inconsistent grays, random margins, broken alignment
• overloaded: Too many borders, exaggerated shadows, dizzying animations
• heavyMinimalism: Excessive spacing, tiny text, insufficient contrast
• digitalGlitch: Glitchy effects, corrupted-looking text, screen artifacts
• retroBrutalism: Bold borders, offset shadows, geometric patterns

Intensity Options

• subtle: Barely perceptible, just small annoyances
• moderate: Noticeably bad but usable
• maximum: Completely horrible
• forbidden: May God have mercy on your users

License

MIT