Pinex

A beautiful, modern component library for Laravel Livewire applications, styled with Tailwind CSS.

Features

🎨 Beautiful, customizable components
⚡ Built for Livewire 3
🎯 Tailwind CSS styling
♿ Accessible and responsive
🔧 Easy to customize

Requirements

PHP 8.1+
Laravel 11.0+
Livewire 3.0+
Tailwind CSS 4.0+

Installation

Install the package via Composer:

composer require ujnana/pinex

Tailwind CSS Configuration

For Tailwind CSS v4, update your CSS file (e.g., resources/css/app.css):

@import "tailwindcss";

@source "../../vendor/ujnana/pinex/src/Views";

Note: Tailwind CSS v4 uses CSS-based configuration. The traditional tailwind.config.js is optional. Visit Tailwind CSS v4 documentation for more details.

Available Components

Button - Versatile button component with variants and states
Modal - Accessible modal dialogs
Input - Form input fields with validation
Card - Content container cards
Table - Data tables with shadcn/ui styling

Usage

Button Component

<livewire:pinex.button variant="primary" size="md">
    Click Me
</livewire:pinex.button>

{{-- With icon and loading state --}}
<livewire:pinex.button 
    variant="success" 
    icon="check"
    wire:loading.attr="disabled">
    Save
</livewire:pinex.button>

Available variants: primary, secondary, success, danger, warning
Available sizes: sm, md, lg

Modal Component

<livewire:pinex.modal name="my-modal" title="Modal Title">
    <p>Modal content goes here...</p>
    
    <x-slot:footer>
        <livewire:pinex.button wire:click="$dispatch('close-modal', { name: 'my-modal' })">
            Close
        </livewire:pinex.button>
    </x-slot:footer>
</livewire:pinex.modal>

{{-- Open modal from anywhere --}}
<button wire:click="$dispatch('open-modal', { name: 'my-modal' })">
    Open Modal
</button>

Input Component

<livewire:pinex.input 
    name="email"
    type="email"
    label="Email Address"
    placeholder="Enter your email"
    wire:model="email"
    required />

{{-- With error message --}}
@error('email')
    <livewire:pinex.input 
        name="email"
        label="Email"
        wire:model="email"
        error="{{ $message }}" />
@enderror

Card Component

<livewire:pinex.card>
    <x-slot:header>
        <h3>Card Title</h3>
    </x-slot:header>
    
    <p>Card content...</p>
    
    <x-slot:footer>
        <livewire:pinex.button variant="primary">Action</livewire:pinex.button>
    </x-slot:footer>
</livewire:pinex.card>

Table Component

{{-- Basic Table --}}
<livewire:pinex.table caption="User List">
    <x-slot:header>
        <tr>
            <x-pinex::table-head>Name</x-pinex::table-head>
            <x-pinex::table-head>Email</x-pinex::table-head>
            <x-pinex::table-head>Role</x-pinex::table-head>
        </tr>
    </x-slot:header>

    <x-pinex::table-row>
        <x-pinex::table-cell>John Doe</x-pinex::table-cell>
        <x-pinex::table-cell>john@example.com</x-pinex::table-cell>
        <x-pinex::table-cell>Admin</x-pinex::table-cell>
    </x-pinex::table-row>
    
    <x-pinex::table-row>
        <x-pinex::table-cell>Jane Smith</x-pinex::table-cell>
        <x-pinex::table-cell>jane@example.com</x-pinex::table-cell>
        <x-pinex::table-cell>User</x-pinex::table-cell>
    </x-pinex::table-row>
</livewire:pinex.table>

{{-- Bordered Table with Footer --}}
<livewire:pinex.table :bordered="true">
    <x-slot:header>
        <tr>
            <x-pinex::table-head>Item</x-pinex::table-head>
            <x-pinex::table-head class="text-right">Price</x-pinex::table-head>
        </tr>
    </x-slot:header>

    <x-pinex::table-row>
        <x-pinex::table-cell>Product A</x-pinex::table-cell>
        <x-pinex::table-cell class="text-right">$100</x-pinex::table-cell>
    </x-pinex::table-row>

    <x-slot:footer>
        <tr>
            <th class="px-4 py-3 text-right font-bold">Total</th>
            <td class="px-4 py-3 text-right font-bold">$100</td>
        </tr>
    </x-slot:footer>
</livewire:pinex.table>

Table props: size (sm, md, lg), bordered (true/false), hoverable (true/false), caption (optional)

Publishing Assets

Publish the configuration file:

php artisan vendor:publish --tag=pinex-config

Publish the views:

php artisan vendor:publish --tag=pinex-views

Configuration

After publishing, you can customize the default component styles in config/pinex.php:

return [
    'prefix' => 'pinex',
    
    'defaults' => [
        'button' => [
            'variant' => 'primary',
            'size' => 'md',
        ],
        // ... more defaults
    ],
];

Customization

Extending Views

After publishing views, you can customize any component template in resources/views/vendor/pinex/components/.

Custom Variants

You can add custom color variants by extending Tailwind's configuration and using them in your components.

License

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

Pinex Laravel Package