Installation
Bring the aggressive, bold Neo Brutalism aesthetic to any web project. Fully framework-agnostic!
1. The CSS Plugin (For HTML, Vue, React, PHP)
Install the core Tailwind CSS plugin via NPM. This works everywhere Tailwind works.
npm install neo-brutalism-tailwind
Method A: Tailwind CSS v4 (New Standard)
If you are using Tailwind v4, simply import the plugin in your main CSS file (e.g., input.css or app.css):
@import "tailwindcss";
@plugin "neo-brutalism-tailwind";
Method B: Tailwind CSS v3 (Legacy / Typical Laravel)
If you are using Tailwind v3, add the plugin to your tailwind.config.js:
module.exports = {
content: [
"./**/*.html",
"./**/*.php",
"./src/**/*.{vue,js,ts,jsx,tsx}"
],
plugins: [
require('neo-brutalism-tailwind')()
],
}
2. Laravel Blade Integration (Optional)
If you are using Laravel, we provide a specialized Blade component package for a better developer experience.
composer require vr/laravel-neo-ui
3. Real Project Sample
Want to see a fully working, standalone project with a real build step? Check out the sample folder in our repository!
View Sample Project on GitHub
Configuration
Learn how to customize prefixes to prevent CSS conflicts.
Adding a Custom Prefix
If you don't want our classes (like .btn) to conflict with Bootstrap or other libraries, you can add a prefix.
1. In tailwind.config.js:
plugins: [
require('neo-brutalism-tailwind')({ prefix: 'neo-' })
]
Now all components will be prefixed (e.g., class="neo-btn").
2. In Laravel (Optional):
Publish the config and update it so Blade components match your Tailwind prefix.
php artisan vendor:publish --tag=neo-ui-config
// config/neo-ui.php
return [
'prefix' => 'neo-',
];
Button
The primary action element with click and hover states.
Pure HTML Usage:
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-info">Info</button>
<button class="btn" disabled>Disabled</button>
Laravel Blade Usage:
<x-neo::button class="btn-sm">Small</x-neo::button>
<x-neo::button>Default</x-neo::button>
<x-neo::button class="btn-lg">Large</x-neo::button>
<x-neo::button variant="primary">Primary</x-neo::button>
<x-neo::button variant="secondary">Secondary</x-neo::button>
<x-neo::button variant="danger">Danger</x-neo::button>
<x-neo::button variant="info">Info</x-neo::button>
<x-neo::button disabled>Disabled</x-neo::button>
Forms & Inputs
Text inputs, textareas, selects, toggles, checkboxes, and more.
Pure HTML Usage:
<input type="email" class="input" placeholder="Email" />
<textarea class="textarea" placeholder="Message"></textarea>
<select class="select">
<option>Option 1</option>
</select>
<input type="file" class="file-input" />
<input type="range" class="range" min="0" max="100" />
<input type="checkbox" class="toggle" checked />
<input type="checkbox" class="checkbox" checked />
<input type="radio" class="radio" />
Laravel Blade Usage:
<x-neo::input type="email" placeholder="Email" />
<x-neo::textarea placeholder="Message"></x-neo::textarea>
<x-neo::select>
<option>Option 1</option>
</x-neo::select>
<x-neo::file-input />
<x-neo::range min="0" max="100" />
<x-neo::toggle checked />
<x-neo::checkbox checked />
<x-neo::radio />