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.