README

A professional Laravel starter kit package featuring Livewire 4, TailwindCSS 4, and a comprehensive set of pre-built UI components.

Features

Livewire 4: Modern reactive components
TailwindCSS 4: Latest CSS framework with utility-first approach
Pre-built Components: Ready-to-use UI components (buttons, inputs, forms, etc.)
Authentication: Complete auth system with Livewire components
Admin Panel: Basic admin interface
Responsive Design: Mobile-first responsive components
Dark Mode Support: Built-in dark mode theming

Installation

1. Install the Package

composer require knnguler/starter

2. Run the Installation Command

php artisan starter-kit:install

This command will:

Install required Composer dependencies (Livewire, Sluggable, etc.)
Update your package.json with TailwindCSS 4 and other frontend dependencies
Publish all necessary stubs and scaffolding files
Compile frontend assets
Run database migrations

3. Configure Environment

Make sure your .env file has the necessary database and other configurations.

4. Serve the Application

php artisan serve

Usage

After installation, your Laravel application will have:

Authentication system with login/register pages
Admin panel at /admin
Home page with Livewire components
Pre-built UI components available in your views

Using Components

The package provides a comprehensive set of Blade components. Here are some examples:

Button Component

{{-- Basic button --}}
<x-button>Click me</x-button>

{{-- Button with variant --}}
<x-button variant="destructive">Delete</x-button>

{{-- Button with icon --}}
<x-button icon="trash">Delete</x-button>

{{-- Button with size --}}
<x-button size="lg">Large Button</x-button>

{{-- Link button --}}
<x-button href="/some-link">Link Button</x-button>

Input Component

{{-- Basic input --}}
<x-input name="email" type="email" placeholder="Enter your email" />

{{-- Input with icon --}}
<x-input name="search" icon="search" placeholder="Search..." />

{{-- Input with trailing icon --}}
<x-input name="password" type="password" iconTrailing="eye" viewable />

{{-- Clearable input --}}
<x-input name="name" clearable placeholder="Enter name" />

Card Component

<x-card>
    <x-card.header>
        <x-card.title>Card Title</x-card.title>
        <x-card.description>Card description</x-card.description>
    </x-card.header>
    <x-card.content>
        <p>Card content goes here.</p>
    </x-card.content>
    <x-card.footer>
        <x-button>Action</x-button>
    </x-card.footer>
</x-card>

Form Components

<x-field>
    <x-label for="name">Name</x-label>
    <x-input name="name" />
    <x-field.error name="name" />
</x-field>

<x-field>
    <x-label for="message">Message</x-label>
    <x-textarea name="message" rows="4" />
</x-field>

<x-field>
    <x-checkbox name="agree" label="I agree to terms" />
</x-field>

Select Component

<x-select name="country">
    <x-select.trigger>
        <x-select.value placeholder="Select a country" />
    </x-select.trigger>
    <x-select.content>
        <x-select.group>
            <x-select.label>Countries</x-select.label>
            <x-select.item value="us">United States</x-select.item>
            <x-select.item value="ca">Canada</x-select.item>
            <x-select.item value="uk">United Kingdom</x-select.item>
        </x-select.group>
    </x-select.content>
</x-select>

Table Component

<x-table>
    <x-table.header>
        <x-table.row>
            <x-table.head>Name</x-table.head>
            <x-table.head>Email</x-table.head>
            <x-table.head>Actions</x-table.head>
        </x-table.row>
    </x-table.header>
    <x-table.body>
        <x-table.row>
            <x-table.cell>John Doe</x-table.cell>
            <x-table.cell>john@example.com</x-table.cell>
            <x-table.cell>
                <x-button size="sm">Edit</x-button>
            </x-table.cell>
        </x-table.row>
    </x-table.body>
</x-table>

Dialog/Modal

<x-dialog>
    <x-dialog.trigger>
        <x-button>Open Dialog</x-button>
    </x-dialog.trigger>
    <x-dialog.content>
        <x-dialog.header>
            <x-dialog.title>Dialog Title</x-dialog.title>
            <x-dialog.description>Dialog description</x-dialog.description>
        </x-dialog.header>
        <x-dialog.body>
            <p>Dialog content here.</p>
        </x-dialog.body>
        <x-dialog.footer>
            <x-button variant="outline">Cancel</x-button>
            <x-button>Save</x-button>
        </x-dialog.footer>
    </x-dialog.content>
</x-dialog>

Livewire Components

The package includes several Livewire components for authentication and admin functionality:

App\Livewire\Auth\Login
App\Livewire\Auth\Register
App\Livewire\Home\Index
App\Livewire\Admin\Dashboard

Customization

All components are highly customizable through props and CSS classes. You can override styles by modifying the published CSS files in resources/css/app.css.

Available Components

Avatar: User avatars with fallback
Button: Various button styles and sizes
Card: Content containers
Checkbox: Form checkboxes
Dialog: Modal dialogs
Dropdown: Dropdown menus
Editor: Rich text editor
Field: Form field wrapper
File: File upload component
Icon: Icon component
Image Picker: Image selection
Input: Text inputs with various features
Label: Form labels
Link: Styled links
Logo: Logo component
Pagination: Pagination controls
Select: Dropdown selects
Sidebar: Navigation sidebar
Switch: Toggle switches
Table: Data tables
Textarea: Text areas

Requirements

PHP 8.2+
Laravel 10+
Node.js & npm

License

This package is open-sourced software licensed under the MIT license.

knnguler / starter

Maintainers

Package info

Statistics

Security