✨ New: Pro v1.0.0 - Initial Set up: Layout bundles, Chart wrappers, and form wizards.
TimelyUI TimelyUI
Feedback - Toasts & Modals Charts - Analytics Kit Textareas - Editors & Rich Text
Dashboards Pricing FAQ Docs Get Pro

TimelyUI — Laravel Livewire + Tailwind UI Toolkit

Build beautiful, production-ready dashboards and app UIs faster. TimelyUI ships polished components, patterns, and docs engineered for Laravel 11, Livewire 3, Alpine.js, and Tailwind CSS.

Quickstart Browse Components

Stack

Laravel 11, Livewire 3

Styling

Tailwind CSS

JS

Alpine.js

Charts

ApexCharts

Getting Started

TimelyUI is distributed as a set of Blade + Livewire components, Alpine interactions, and Tailwind-first design tokens. It plays nicely with new and existing Laravel apps.

Requirements

  • Laravel 11+
  • Livewire 3+
  • PHP 8.2+
  • Node 18+ / Bun / PNPM (for building assets)

Folder Conventions

Project Structure 
// resources/
                        /*   views/components/timelyui/... */
                        /*   css/timelyui.css */
                        /* app/Livewire/TimelyUI/... */
                        /* public/vendor/timelyui/ (assets) */

Install

  1. Install dependencies

    Terminal 
    composer require livewire/livewire
                                npm install -D tailwindcss @tailwindcss/forms @tailwindcss/typography

  2. Tailwind config

    tailwind.config.js 
    // tailwind.config.js
                                export default {
                                  darkMode: 'class',
                                  content: [
                                    './resources/views/**/*.blade.php',
                                    './app/Livewire/**/*.php',
                                    './vendor/livewire/**/*.blade.php',
                                  ],
                                  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')]
                                }

  3. Add TimelyUI styles

    resources/css/app.css 
    /* resources/css/app.css */
                                @tailwind base;
                                @tailwind components;
                                @tailwind utilities;

                                /* TimelyUI tokens */
                                :root { --brand: 91 106 245 }

  4. Enable Livewire (Blade layout example)

    blade-layout.blade.php 
    <!DOCTYPE html>
                                      <html lang="en" x-data="{ dark:false }" :class="{ 'dark': dark }">
                                      <head>
                                        ©vite(['resources/css/app.css', 'resources/js/app.js'])
                                        
                                      </head>
                                      <body>
                                                                                
                                      </body>
                                      </html>

Project Structure

TimelyUI ships a component-first structure. Keep UI pieces co-located:

Project Structure 
resources/
                  views/components/timelyui/
                    button.blade.php
                    card.blade.php
                    modal.blade.php
                    navbar.blade.php
                  views/pages/
                    dashboard.blade.php
                    users/index.blade.php
                app/Livewire/TimelyUI/
                  Modal.php
                  Dropdown.php

Suggested naming conventions:

  • <x-timelyui-button/> — atoms
  • <x-timelyui-card/> — molecules
  • <x-timelyui-table /> — organisms
  • <livewire:timelyui.modal /> — interactive patterns

Theming & Dark Mode

Use Tailwind's extend.colors and CSS variables for easy brand skins. Dark mode is class-based.

Color Tokens

CSS Variables 
:root { 
                  --brand-hex: #5b6af5; 
                  --brand-rgb: 91 106 245; 
                }

                .btn-brand { 
                  background: rgb(var(--brand-rgb)); 
                  color: #fff; 
                }

Dark Toggle (Alpine)

HTML with Alpine.js 
<html x-data="{ dark: false }" :class="{ 'dark': dark }">
                  <button @click="dark = !dark">Toggle</button>
                </html>

Core Components

Production-ready, accessible, keyboard-friendly. Below are representative samples. Copy & adapt.

Buttons

Blade Component 
<x-timelyui-button variant="primary" icon="fa-check">
            Save
          </x-timelyui-button>

Card

Use cards to group content.

Stats

Revenue
$84,200
▲ 12%
Users
12,409
▼ 3%
Orders
1,294
▲ 8%

Table

User Role Status Actions
Liam Smith Admin Active
Edit View Delete
Ava Jones Editor Pending
Promote Suspend
Blade Component 
<x-timelyui-table :rows="$users" with-actions />

Modal

Create Project

Tabs

Clean tabbed interfaces using minimal Alpine state.
Bring your own data and slots.
Keyboard accessible and responsive.

Table Filters (Alpine) — long expression safe:

Alpine.js Component 
<div x-data="{ q: '', role: 'all' }">
        <input x-model="q" placeholder="Search" class="input" />
        <select x-model="role" class="input">
          <option value="all">All</option>
          <option>Admin</option>
        </select>

        <template x-for="u in users.filter(u => (role === 'all' || u.role === role) && u.name.toLowerCase().includes(q.toLowerCase()))">
          <div>...</div>
        </template>
      </div>

Charts

Blade Component 
<x-timelyui-chart 
      type="area" 
      :series="[['name' => 'Revenue', 'data' => [31,40,28,51,42,109,100]]]" 
    />

Patterns & Recipes

Form + Validation

app/Livewire/UserCreate.php 
// app/Livewire/UserCreate.php
  use Livewire\Attributes\Validate;

  class UserCreate extends Component {
    #[Validate('required|min:3')] 
    public $name;

    #[Validate('required|email')] 
    public $email;

    public function save() { 
      $this->validate(); 
      /* persist */ 
    }
  }

Table Filters (Alpine)

Alpine.js Component 
<div x-data="{ q: '', role: 'all' }">
    <input x-model="q" placeholder="Search" class="input" />
    <select x-model="role" class="input">
      <option value="all">All</option>
      <option>Admin</option>
    </select>
    <template x-for="u in users.filter(u => (role === 'all' || u.role === role) && u.name.toLowerCase().includes(q.toLowerCase()))">
      ...
    </template>
  </div>

Accessibility

  • Keyboard reachable menus and modals (Tab, Esc support).
  • Sufficient color contrast in both light and dark themes.
  • Semantic HTML: <button> for actions, aria-* where needed.
  • Focus outlines preserved for interactive elements.

Performance

  • Use defer for heavy scripts; load charts only where needed.
  • Tree-shake with Vite; split vendor bundles.
  • Server-side pagination for large tables (Livewire paginate).
  • Prefer CSS utilities over runtime JS for transitions.

Deployment

  1. Build: vite build
  2. Cache: php artisan config:cache route:cache view:cache
  3. Queues: php artisan queue:work --daemon (Supervisor on VPS)
  4. Assets: Use CDN or versioned mix-manifest.json/vite build.

FAQ

Does TimelyUI require Livewire?

Most interactive patterns assume Livewire or Alpine. Pure Blade/Alpine is possible for static pieces.

Can I use it with Inertia or Vue?

Yes, the styling and HTML work anywhere. Replace Livewire interactions with your framework’s bindings.

License?

Commercial license for use in unlimited projects you build. Resale of the kit as-is is not permitted.

Changelog

  • 1.0.0 — Initial public docs, core components, patterns, dark mode, charts demo.