0.2.0 • Published 4 months ago

anti-ui v0.2.0

Weekly downloads
-
License
MIT
Repository
-
Last release
4 months ago

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

0.2.0

4 months ago

0.1.1

4 months ago

0.1.0

4 months ago