Developer Documentation

Internal cheat sheet for installation, deployment, and component references.

Log in Sign Up

Start Here

UI Components

Data & Charts

Installation

Setup instructions for a fresh project.

git clone https://github.com/yourusername/template.git new-project
cd new-project
composer install
npm install
cp .env.example .env
php artisan key:generate
touch database/database.sqlite
php artisan migrate --seed
php artisan storage:link
npm run dev

Hostinger Deployment

Critical fixes for shared hosting environments.

1. SSL / HTTPS Fix

Required to fix 401 Unauthorized errors on image previews. 

// public/.htaccess
RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} https
RewriteRule ^ - [E=HTTPS:on]

2. Symlink Fix

Run this one-liner in Terminal to fix storage permissions. 

php -r "symlink(getcwd() . '/storage/app/public', getcwd() . '/public/storage');"

Inputs & Forms

A complete guide to the form components, including their props and usage.

Input

x-input

Standard text input. Automatically handles validation errors.

This field is required

Prop Type Description
label String Label text displayed above input.
icon String FontAwesome class (e.g., fa-user).
error String Manual error message. Auto-filled by wire:model. 
<x-input label="Email" icon="fa-envelope" wire:model="email" />

Textarea

x-textarea

Multi-line text input with top-aligned icon support.

Prop Type Description
rows Int Height in lines (Default: 4).
label Html Supports HTML content (e.g. bold tags). 
<x-textarea label="Bio" icon="fa-pencil" rows="4" wire:model="bio" />

Select (Custom)

x-select-custom

Native Select element with custom styling. Intelligently parses array options.

Prop Type Description
options Array ['A', 'B'] OR [['id'=>1, 'name'=>'A']].
placeholder String Default disabled option text. 
<x-select-custom label="Role" :options="$options" wire:model="role" />

Select (Searchable)

x-select-search

Alpine.js dropdown with instant client-side filtering.

Prop Requirement
options STRICT: Must have value and label keys. 
// Controller
public $options = [['value' => 'fr', 'label' => 'France']];

// View
<x-select-search label="Country" :options="$options" wire:model="country" />

Toggle Switch

x-toggle

Animated checkbox switch with color support and optional description.

Prop Type Description
label String Main text label.
description String Small subtitle below the label.
color String blue (default), green, red, purple, orange. 
<x-toggle label="Dark Mode" color="purple" wire:model="darkMode" />

Dropdown

x-dropdown

Animated menu with click-outside closing.

Prop Values Description
align left | right Anchor point.
width 48 Tailwind width class. 
<x-dropdown align="right">
    <x-slot name="trigger">
        <button>Menu</button>
    </x-slot>
    <x-slot name="content">
        <x-dropdown-link href="#" icon="fa-user">Profile</x-dropdown-link>
    </x-slot>
</x-dropdown>

Date Picker

x-date-picker

Wrapper for Flatpickr. Syncs with Livewire updates and auto-detects locale.

Prop Type Description
id String Required for Flatpickr initialization.
label String Label above input. 
<x-date-picker id="dob" label="Date" wire:model="date" />

Date (Formatter)

x-date

Converts ISO date to user local format.

Raw ISO: 2024-12-08
Rendered:
Prop Type Description
date String Valid Date String (Y-m-d or ISO).
format String SEO Fallback PHP format (e.g. 'Y-m-d'). 
<x-date date="2024-12-08" />

File Upload

x-file-upload

Drag & Drop upload with progress bar and gallery support.

Prop Description
preview Livewire variable for previewing.
multiple Bool: Enable gallery mode.
removeMethod Method name to remove file from array. 
<x-file-upload label="Avatar" wire:model="photo" :preview="$photo" />

// Gallery Mode
<x-file-upload multiple removeMethod="removePhoto" ... />

Modals & Overlays

Components that sit on top of the UI: Dialogs, Drawers, Notifications, and Loaders.

Modal

x-modal

A centered dialog dialog. It "teleports" to the body to avoid z-index issues and locks the background scroll.

Click to test accessibility and transitions.

Prop Type Description
show Bool Control visibility via Alpine/Livewire.
maxWidth String sm | md | lg | xl | 2xl 
<x-modal wire:model="show" maxWidth="lg">
    <div class="p-6">...</div>
</x-modal>

Slide Over

x-slide-over

An off-canvas drawer that slides in from the right. Ideal for settings panels or detailed views.

Prop Type Description
title String Header text.
footer Slot Pinned bottom area for actions. 
<x-slide-over wire:model="show" title="Settings">
    Content...
    <x-slot name="footer">...</x-slot>
</x-slide-over>

Toast Notifications

x-toast

Event-driven notification system. Triggered globally via Alpine or Livewire.

Event Detail Values
message The text to display.
type success | error | info | warning 
// Alpine / JS
$dispatch('notify', { message: 'Saved!', type: 'success' })

// Livewire Component
$this->dispatch('notify', message: 'Saved!', type: 'success');

Global Loader

x-loading

Smart loading overlay that automatically intercepts Livewire requests. It features a 450ms debounce to prevent flashing on fast requests.

Usually triggered automatically by Livewire. 

<!-- To disable the loader for a specific element: -->
<div data-skip-loader>
   <input wire:model.live="search" />
</div>

Data & Visualization

Components for displaying data: Charts, Tabs, and Date Formatters.

Charts

x-chart

A wrapper around Chart.js that handles dark mode switching and resizing automatically.

Line Chart
Donut Chart
Prop Type Description
type String line | bar | pie | doughnut
data Array Standard Chart.js data object (labels + datasets).
height String CSS height (default: 300px). 
<x-chart type="bar" :data="$chartData" height="300px" />

Tabs

x-tabs

Switchable content areas with smooth transitions. Uses named slots matching the configuration keys.

This is the Overview content.
Here are the detailed stats.
Prop Structure
tabs ['key' => ['label' => 'Name', 'icon' => 'fa-icon']] 
<x-tabs :tabs="['home' => 'Home', 'profile' => 'Profile']">
    <x-slot name="home">...</x-slot>
    <x-slot name="profile">...</x-slot>
</x-tabs>

Livewire Modules

Full-featured starter kits. These are not "drop-in" components but "copy-paste" foundations for your business logic.

Event Calendar

Starter Kit

A complete monthly calendar with event management. Features drag-and-drop logic (ready to implement), modal editing, and category coloring.

April 2026

Events Schedule

Sun
Mon
Tue
Wed
Thu
Fri
Sat

Data Structure (Array/Model)

[
    'id' => 1,
    'title' => 'Meeting',
    'start' => '2024-12-25',
    'end' => '2024-12-26',
    'color' => 'info', // danger, success, warning
    'is_background' => false
]
Implementation Guide
  • Copy the component to `app/Livewire/Calendar.php`.
  • Replace the `$events` array with your Eloquent model query.
  • Update `saveEvent()` to create/update database records.

Simple Table

Layout

A lightweight table optimized for logs or simple lists. Features horizontal scrolling for mobile safety and manual pagination controls.

System Logs

Recent system activity

Action User IP Address Time
User Login
Alice 192.168.1.1 2 mins ago
File Upload
Bob 192.168.1.4 15 mins ago
Password Change
Charlie 10.0.0.5 1 hour ago
Failed Attempt
Unknown 45.33.22.11 2 hours ago
User Logout
Alice 192.168.1.1 3 hours ago
Page 1 
// Manual Pagination Control (when using WithPagination)
$rows->links(data: ['scrollTo' => false])

// Or custom buttons:
<button wire:click="previousPage">Prev</button>

Advanced Data Table

Full Module

The ultimate CRUD table. Includes Search, Advanced Filters, Date Range, Bulk Actions (Select All), Export, and a dedicated Mobile Card View.

User Management

View and manage platform users

Selected

Advanced Search

k

kids stories by nana

kidsstoriesbynana@gmail.com

User 08 Dec
Active
R

RidaXD

ridanafia03@gmail.com

User 08 Dec
Active
R

Rida_ XD

ridanafia93@gmail.com

User 08 Dec
Active
Feature Description
Mobile Layout Switches to a "Card" layout on screens smaller than md.
Bulk Actions Uses entangle to sync checkbox selection for mass deletion.
Edit Panel Integrated x-slide-over to edit records without leaving the page.
How to Use

This component is designed to be the basis for UsersTable, OrdersTable, etc. Copy the file, change the User::query() to your model, and update the table columns. The responsive card view must be updated manually to match your new columns.