Starter26 - Frontend Theme for Lara Dashboard

A modern, responsive frontend starter theme for Lara Dashboard. Built with Livewire 3, Alpine.js, and Tailwind CSS v4 for a seamless, SPA-like experience.

Features

• Responsive Design - Mobile-first approach, works beautifully on all devices
• Dark Mode - System preference detection with manual toggle
• Livewire SPA - Full-page Livewire components with wire:navigate
• SEO Ready - Meta tags, Open Graph, and semantic HTML
• Multi-language - All strings use Laravel's translation system
• Filter Hooks - WordPress-like customization via apply_filters/do_action
• Tailwind CSS v4 - Modern styling with st26: prefix to avoid conflicts

Pages Included

Home Page

Hero section with call-to-action buttons, featured posts grid, recent posts section, and newsletter CTA.

About Page

• Company mission section with image
• Statistics/counters display
• Team members grid with photos and bios
• Core values section with icons

Contact Page

• Contact information display (email, phone, address)
• Validated contact form with Livewire
• Success message after submission
• Customizable via hooks

Posts Page

• Filterable posts grid with search
• Category dropdown filter
• Sort options (latest, oldest, title)
• Pagination support
• Empty state handling

Single Post Page

• Full article content with prose styling
• Featured image header
• Breadcrumb navigation
• Category and tag display
• Social sharing buttons (Twitter, Facebook, LinkedIn, Copy Link)
• Previous/Next post navigation
• Related posts section

Category & Tag Archives

• Dedicated pages for browsing by category or tag
• Post count display
• Consistent grid layout with pagination

Search Page

• Real-time search with debounce
• Live results as you type
• Result count display
• Empty and initial states

Generic Page

• For custom static pages (Terms, Privacy, etc.)
• Clean prose styling
• Breadcrumb navigation

Components

Navbar

• Sticky header with blur background
• Responsive mobile menu with slide-in animation
• Dark mode toggle (light/dark/system)
• Search link
• Customizable navigation items via hooks

Footer

• Multi-column layout
• Quick links and category links
• Social media icons
• Newsletter subscription form
• Copyright and powered-by attribution

Technology Stack

Customization

Filter Hooks

Customize the theme without modifying core files:

// Customize navigation items
add_filter('starter26_nav_items', function ($items) {
    $items[] = ['label' => 'Custom', 'route' => 'custom.route', 'icon' => 'lucide:star'];
    return $items;
});

// Customize footer links
add_filter('starter26_footer_links', function ($links) {
    // Modify $links array
    return $links;
});

// Customize social links
add_filter('starter26_social_links', function ($links) {
    return [
        ['icon' => 'mdi:twitter', 'url' => 'https://twitter.com/yourhandle', 'label' => 'Twitter'],
        // Add more...
    ];
});

// Customize team members on About page
add_filter('starter26_team_members', function ($members) {
    return $members;
});

// Customize contact info
add_filter('starter26_contact_info', function ($info) {
    return $info;
});

Action Hooks

// Handle contact form submission
add_action('starter26_contact_form_submitted', function ($data) {
    // Send email, save to database, etc.
    Mail::to('admin@example.com')->send(new ContactFormMail($data));
});

Configuration

Edit config/config.php:

return [
    // URL prefix (empty = root, 'blog' = /blog/...)
    'route_prefix' => env('STARTER26_ROUTE_PREFIX', ''),

    'theme' => [
        'dark_mode' => true,        // Enable dark mode toggle
        'posts_per_page' => 12,     // Posts per page
        'newsletter' => true,       // Show newsletter form
    ],

    'seo' => [
        'site_name' => env('APP_NAME'),
        'separator' => ' - ',
    ],
];

Routes

Installation

1. Enable the module in Lara Dashboard
2. Build the assets:

cd modules/starter26
npm install
npm run build

3. Clear caches:

php artisan config:clear
php artisan view:clear
php artisan route:clear

4. Visit your site to see the theme in action!

Styling

All Tailwind classes use the st26: prefix to avoid conflicts with other modules:

<div class="st26:bg-white st26:p-4 st26:rounded-lg dark:st26:bg-gray-800">
    <h1 class="st26:text-2xl st26:font-bold st26:text-gray-900 dark:st26:text-white">
        Hello World
    </h1>
</div>

Custom component classes are also available:

• st26-btn, st26-btn-primary, st26-btn-secondary, st26-btn-outline
• st26-card, st26-card-body, st26-card-title
• st26-input, st26-label, st26-textarea
• st26-hero, st26-hero-title, st26-hero-subtitle
• st26-section, st26-section-title
• st26-post-card, st26-post-title, st26-post-excerpt
• st26-tag, st26-category
• st26-pagination, st26-pagination-link
• st26-breadcrumb
• st26-prose

Requirements

• Lara Dashboard 0.9+
• PHP 8.1+
• Node.js 18+ (for building assets)

License

MIT License - Free to use and modify.