⚡ Introduction

Neo Brutalism UI is a lightweight, zero-dependency (other than Tailwind) UI library designed to give your application an edgy, modern Neo Brutalism design instantly.

This package provides two ways to use it:

1. A Tailwind CSS Plugin (neo-brutalism-tailwind) that injects beautiful brutalist utility classes (.btn, .card, .input, etc.). This can be used in ANY project (HTML, PHP, Vue, React, etc.).
2. A Laravel Blade Component Library (vr/laravel-neo-ui) for seamless integration specifically in Laravel views (<x-neo::button>).

✨ Features

• Framework Agnostic (CSS): The Tailwind plugin works anywhere you use Tailwind.
• Zero CSS to Write: Everything is handled by the Tailwind plugin.
• 100% Tailwind Compatible: Mix and match with standard Tailwind utilities.
• Dynamic Prefixing: Don't want to pollute your global CSS classes? Prefix everything with neo- via a simple config file.
• 13+ Premium Components: Buttons, Modals, Toasts, Avatars, Data Tables, Tabs, Accordions, and Full Forms.

📦 Installation

1. Install Tailwind CSS Plugin (NPM) - For All Projects

Install the Tailwind plugin via NPM:

npm install neo-brutalism-tailwind

Method A: Tailwind CSS v4 (New Standard)

If you are using the new Tailwind v4, you don't need a tailwind.config.js file. 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, open your tailwind.config.js and add the plugin:

module.exports = {
    content: [
        "./*.html", // If using pure HTML
        "./resources/**/*.blade.php", // If using Laravel
        "./vendor/vr/laravel-neo-ui/resources/views/**/*.blade.php", 
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require('neo-brutalism-tailwind')({
            prefix: '' // Optional: e.g., 'neo-' if you want your classes to be .neo-btn
        })
    ],
}

2. Install Laravel Package (Composer) - Optional, for Laravel only

Require the package via Composer to get the Blade components:

composer require vr/laravel-neo-ui

⚙️ Configuration (Laravel Only)

By default, the Blade components will output un-prefixed classes (e.g., class="btn"). If you set a prefix in your tailwind.config.js (e.g., prefix: 'neo-'), you must tell the Laravel package to use the same prefix.

Publish the config file:

php artisan vendor:publish --tag=neo-ui-config

Then edit config/neo-ui.php:

return [
    'prefix' => 'neo-', // If you use 'neo-' in tailwind config
];

🚀 Usage

You can use the native HTML class syntax anywhere, or use the Blade components if you are in Laravel.

Native HTML / PHP Usage:

<button class="btn btn-primary">Submit Data</button>

<div class="card max-w-md mx-auto">
    <label class="font-bold">Username</label>
    <input type="text" class="input mb-4" placeholder="johndoe" />
</div>

Laravel Blade Usage:

<x-neo::button variant="primary">Submit Data</x-neo::button>

<x-neo::card class="max-w-md mx-auto">
    <label class="font-bold">Username</label>
    <x-neo::input type="text" placeholder="johndoe" class="mb-4" />
</x-neo::card>

Alpine.js Integration (Modals & Toasts)

For interactive elements like Modals, Tabs, and Toasts, we recommend including Alpine.js:

<!-- Head -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<!-- Triggering a Toast -->
<button @click="$dispatch('show-toast', { type: 'success', message: 'Saved!' })">
    Save
</button>

📚 Documentation & Examples

For a full list of components, interactive live demos, copy-pasteable HTML snippets, and advanced usage, please visit our Official Documentation:

👉 Laravel Neo UI Official Documentation

Standalone Sample Project

We have also included a fully working, standalone example in the sample/ directory of the repository. It uses the real NPM package and Tailwind CSS build process. To test it out locally:

1. Clone the repository and navigate to the sample folder.
2. Run npm install to install Tailwind CSS and the Neo Brutalism plugin.
3. Run npm run build to compile the CSS.
4. Open index.html in your browser.

📜 License

The MIT License (MIT). Please see License File for more information.