0.2.0 • Published 4 months ago
anti-ui v0.2.0
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 colorsboringCorporate
: Inconsistent grays, random margins, broken alignmentoverloaded
: Too many borders, exaggerated shadows, dizzying animationsheavyMinimalism
: Excessive spacing, tiny text, insufficient contrastdigitalGlitch
: Glitchy effects, corrupted-looking text, screen artifactsretroBrutalism
: Bold borders, offset shadows, geometric patterns
Intensity Options
subtle
: Barely perceptible, just small annoyancesmoderate
: Noticeably bad but usablemaximum
: Completely horribleforbidden
: May God have mercy on your users
License
MIT