Livewire | Laravel Livewire

<!DOCTYPE html> <html lang="en"> <head>  <title>Livewire | Laravel Livewire</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="description" content="A full-stack framework for Laravel that takes the pain out of building dynamic UIs."> <link rel="home" href="https://livewire.laravel.com">  <meta property="og:site_name" content="Laravel"/> <meta property="og:title" content="Livewire | Laravel"/> <meta property="og:description" content="A full-stack framework for Laravel that takes the pain out of building dynamic UIs."/> <meta property="og:url" content="https://livewire.laravel.com"/> <meta property="og:image" content="https://livewire.laravel.com/meta.png"/> <meta property="og:type" content="website"/> <meta name="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://livewire.laravel.com" /> <meta property="twitter:title" content="Livewire | Laravel" /> <meta property="twitter:description" content="A full-stack framework for Laravel that takes the pain out of building dynamic UIs." /> <meta property="twitter:image" content="https://livewire.laravel.com/meta.png" />  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest">  <script src="https://cdn.usefathom.com/script.js" data-site="UGOOHZKF" data-spa="auto" defer></script>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />  <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>  <link rel="preload" as="style" href="https://livewire.laravel.com/build/assets/app-bd4829cc.css" /><link rel="modulepreload" href="https://livewire.laravel.com/build/assets/app-403468a4.js" /><link rel="stylesheet" href="https://livewire.laravel.com/build/assets/app-bd4829cc.css" data-navigate-track="reload" /><script type="module" src="https://livewire.laravel.com/build/assets/app-403468a4.js" data-navigate-track="reload"></script> <style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #FB71A9;}[x-cloak] {display: none !important;}</style> </head> <body class="min-h-screen bg-gray-900 font-sans text-gray-100 antialiased"> <div x-data="{ navIsOpen: false }" class="sticky top-0 z-10"> <header class="bg-gray-900/50 backdrop-blur-2xl border-gray-800 border-b"> <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between gap-6"> <div class="-mx-2 flex items-center gap-2 xl:gap-10 xl:flex-1 xl:shrink-0"> <a wire:navigate href="/" aria-label="Laravel home" title="Laravel home" class="inline-flex items-center rounded-md px-2 py-1 transition hover:opacity-75 focus:outline-none focus-visible:ring focus-visible:ring-pink-400/50"> <svg width="159" height="30" viewBox="0 0 159 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M54.76 23V9h3.4v11h6.24v3h-9.64Zm11.508 0v-2.86h2.36v-8.28h-2.36V9h8.14v2.86h-2.38v8.28h2.38V23h-8.14Zm14.893 0-5.6-14h3.54l2.7 7.14c.16.413.294.773.4 1.08.12.307.22.593.3.86.094.267.174.54.24.82.08.267.167.573.26.92h-.62a20.93 20.93 0 0 1 .68-2.3c.134-.387.3-.847.5-1.38l2.6-7.14h3.48l-5.64 14h-2.84Zm9.918 0V9h9.761v2.9h-6.46v8.2h6.66V23h-9.96Zm1.6-5.74V14.5h7.26v2.76h-7.26ZM106.09 23l-4.2-14h3.46l2.1 7.36c.093.333.173.673.24 1.02.08.333.14.653.18.96.053.307.093.593.12.86.027.253.053.467.08.64h-.44c.08-.493.147-.933.2-1.32.067-.387.14-.747.22-1.08.08-.347.18-.707.3-1.08l2.08-5.54h2.72l2.04 5.54c.16.44.293.853.4 1.24.107.387.187.76.24 1.12.067.347.12.693.16 1.04l-.4.06c.027-.24.047-.46.06-.66.013-.213.027-.413.04-.6.027-.2.053-.407.08-.62.027-.213.067-.447.12-.7.053-.267.127-.567.22-.9L118.19 9h3.38l-4.2 14h-2.6l-3.32-8.06.38.04-3.06 8.02h-2.68Zm16.663 0v-2.86h2.36v-8.28h-2.36V9h8.14v2.86h-2.38v8.28h2.38V23h-8.14Zm10.974 0V9h6.3c.894 0 1.7.193 2.42.58.734.387 1.307.92 1.72 1.6.414.667.62 1.427.62 2.28 0 .88-.206 1.673-.62 2.38a4.463 4.463 0 0 1-1.7 1.64c-.72.4-1.533.6-2.44.6h-3.06V23h-3.24Zm7.76 0-3.56-6.32 3.48-.5 3.96 6.82h-3.88Zm-4.52-7.52h2.76c.347 0 .647-.073.9-.22.267-.16.467-.38.6-.66.147-.28.22-.6.22-.96s-.08-.673-.24-.94a1.555 1.555 0 0 0-.7-.64c-.293-.147-.653-.22-1.08-.22h-2.46v3.64ZM147.37 23V9h9.76v2.9h-6.46v8.2h6.66V23h-9.96Zm1.6-5.74V14.5h7.26v2.76h-7.26Z" fill="#F1F5F9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M34.8 27.706C34.12 28.734 33.605 30 32.223 30c-2.326 0-2.452-3.587-4.78-3.587-2.327 0-2.201 3.587-4.527 3.587s-2.452-3.587-4.78-3.587c-2.327 0-2.201 3.587-4.528 3.587-2.326 0-2.452-3.587-4.78-3.587C6.5 26.413 6.628 30 4.3 30c-.731 0-1.245-.354-1.678-.84A19.866 19.866 0 0 1 0 19.24C0 8.613 8.208 0 18.333 0 28.46 0 36.667 8.614 36.667 19.24c0 3.037-.671 5.91-1.866 8.466Z" fill="#FB70A9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M34.8 27.706C34.12 28.734 33.605 30 32.223 30c-2.326 0-2.452-3.587-4.78-3.587-2.327 0-2.201 3.587-4.527 3.587s-2.452-3.587-4.78-3.587c-2.327 0-2.201 3.587-4.528 3.587-2.326 0-2.452-3.587-4.78-3.587C6.5 26.413 6.628 30 4.3 30c-.731 0-1.245-.354-1.678-.84A19.866 19.866 0 0 1 0 19.24C0 8.613 8.208 0 18.333 0 28.46 0 36.667 8.614 36.667 19.24c0 3.037-.671 5.91-1.866 8.466Z" fill="#FB70A9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M30.834 29.617c4.804-7.147 4.929-15.075.372-23.784a19.19 19.19 0 0 1 5.461 13.447c0 3.026-.695 5.89-1.934 8.434C34.028 28.738 33.493 30 32.06 30c-.49 0-.886-.148-1.226-.383Z" fill="#E24CA6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17.35 24.038c6.376 0 9.06-3.698 9.06-8.95C26.41 9.834 22.355 5 17.35 5c-5.003 0-9.059 4.835-9.059 10.087 0 5.253 2.684 8.951 9.06 8.951Z" fill="#fff"/><path d="M14.915 15.385c1.876 0 3.397-1.68 3.397-3.75 0-2.071-1.52-3.75-3.397-3.75-1.876 0-3.397 1.679-3.397 3.75 0 2.07 1.52 3.75 3.397 3.75Z" fill="#030776"/><path d="M14.35 12.5c.937 0 1.698-.775 1.698-1.73 0-.957-.76-1.731-1.699-1.731-.938 0-1.699.774-1.699 1.73s.76 1.731 1.7 1.731Z" fill="#fff"/></svg> </a> <div class="flex items-center gap-1"> <a wire:navigate href="/docs" class="hidden lg:inline-flex gap-2.5 items-center rounded-full whitespace-nowrap px-4 py-2 font-medium text-sm transition-colors xl:text-base focus:outline-none focus-visible:ring focus-visible:ring-pink-400/50 text-gray-400 hover:text-gray-300 hover:bg-gray-400/10" > <svg class="mt-0.25 w-4 h-4 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 12c1.618-1.04 2.843-1.323 4.533-1.4.78-.035 1.171-.053 1.443-.203.247-.136.429-.326.553-.579.138-.278.138-.646.138-1.38V1.333c-2.963 0-4.445 0-6.667 1.429M8 12c-1.618-1.04-2.843-1.323-4.533-1.4-.78-.035-1.171-.053-1.443-.203a1.295 1.295 0 0 1-.554-.579c-.137-.278-.137-.646-.137-1.38V1.333c2.963 0 4.445 0 6.667 1.429M8 12V2.762M14 13c-2.667 0-4 .333-6 1.667C6 13.333 4.667 13 2 13"/></svg> <span>Documentation</span> </a> <a wire:navigate href="/screencasts" class="hidden lg:inline-flex gap-2.5 items-center rounded-full whitespace-nowrap px-4 py-2 font-medium text-sm transition-colors xl:text-base focus:outline-none focus-visible:ring focus-visible:ring-pink-400/50 text-gray-400 hover:text-gray-300 hover:bg-gray-400/10" > <svg class="mt-0.25 w-4 h-4 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.667 4.667h12.666m-3.466-3 1.8 3M7 1.333l2 3.334m-5.333-3 1.666 3M5 11.333a.333.333 0 0 1-.667 0m.667 0a.333.333 0 0 0-.667 0m.667 0h-.667m2.334 3.334h2.666c1.867 0 2.8 0 3.514-.364a3.333 3.333 0 0 0 1.456-1.456c.364-.713.364-1.647.364-3.514V6.667c0-1.867 0-2.8-.364-3.514a3.333 3.333 0 0 0-1.456-1.456c-.713-.364-1.647-.364-3.514-.364H6.667c-1.867 0-2.8 0-3.514.364-.627.32-1.137.83-1.456 1.456-.364.713-.364 1.647-.364 3.514v2.666c0 1.867 0 2.8.364 3.514.32.627.83 1.137 1.456 1.456.713.364 1.647.364 3.514.364Z"/></svg> <span>Screencasts</span> </a> <a wire:navigate href="/partners" class="hidden lg:inline-flex gap-2.5 items-center rounded-full whitespace-nowrap px-4 py-2 font-medium text-sm transition-colors xl:text-base focus:outline-none focus-visible:ring focus-visible:ring-pink-400/50 text-gray-400 hover:text-gray-300 hover:bg-gray-400/10" > <svg class="mt-0.25 w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg> <span>Premium Support</span> </a> </div> </div> <div class="flex items-center justify-end gap-6"> <div id="js-search-input" class="docsearch-input__wrapper relative hidden md:block" x-data="{ init() { docsearch({ appId: '418WMK58D6', apiKey: '4c5d415abd4c0c167f4368e679076c09', indexName: 'livewire-framework-3', inputSelector: '#docsearch-input', debug: true, // Set debug to true if you want to inspect the dropdown }) }, handleKeydown(e) { // '/' if (e.keyCode == 191) { document.getElementById('docsearch-input').focus(); e.preventDefault() } // 'cmd+k' if (e.keyCode == 75 && (e.metaKey == true || e.ctrlKey == true)) { document.getElementById('docsearch-input').focus(); e.preventDefault() } // 'esc' if (e.keyCode == 27) { document.getElementById('docsearch-input').blur(); e.preventDefault() } }, }" > <label for="search" class="sr-only">Search</label> <input id="docsearch-input" class="docsearch-input border-gray-900/60 block w-full rounded-[10px] border bg-gray-850 pl-10 pr-4 py-2.5 text-sm text-gray-300 placeholder-gray-600 outline-none transition-color focus-visible:border-gray-900 focus-visible:ring-1 focus-visible:ring-pink-400/50" name="docsearch" type="text" placeholder="Search" @keydown.window="handleKeydown" > <div class="pointer-events-none absolute inset-0 left-3 flex items-center" aria-hidden="true"> <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 9.167a5.917 5.917 0 1 1 11.833 0 5.917 5.917 0 0 1-11.833 0ZM9.167 1.75a7.417 7.417 0 1 0 4.687 13.165l2.282 2.282a.75.75 0 0 0 1.061-1.06l-2.282-2.283A7.417 7.417 0 0 0 9.167 1.75Z" fill="#475569" opacity=".8"/></svg> </div> </div> <div class="flex gap-2 items-center"> <a href="https://github.com/livewire/livewire" class="rounded-md p-1 text-gray-400 transition-colors hover:text-gray-300 focus:outline-none focus-visible:ring focus-visible:ring-pink-400/50"> <svg class="w-6" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16 0 0 7.16 0 16c0 7.08 4.58 13.06 10.94 15.18.8.14 1.1-.34 1.1-.76 0-.38-.02-1.64-.02-2.98-4.02.74-5.06-.98-5.38-1.88-.18-.46-.96-1.88-1.64-2.26-.56-.3-1.36-1.04-.02-1.06 1.26-.02 2.16 1.16 2.46 1.64 1.44 2.42 3.74 1.74 4.66 1.32.14-1.04.56-1.74 1.02-2.14-3.56-.4-7.28-1.78-7.28-7.9 0-1.74.62-3.18 1.64-4.3-.16-.4-.72-2.04.16-4.24 0 0 1.34-.42 4.4 1.64 1.28-.36 2.64-.54 4-.54 1.36 0 2.72.18 4 .54 3.06-2.08 4.4-1.64 4.4-1.64.88 2.2.32 3.84.16 4.24 1.02 1.12 1.64 2.54 1.64 4.3 0 6.14-3.74 7.5-7.3 7.9.58.5 1.08 1.46 1.08 2.96 0 2.14-.02 3.86-.02 4.4 0 .42.3.92 1.1.76A16.026 16.026 0 0 0 32 16c0-8.84-7.16-16-16-16Z" fill="currentColor"/></svg> </a> <a href="/login/github" class="hidden lg:inline-flex gap-2.5 items-center rounded-full whitespace-nowrap px-4 py-2 font-medium text-sm transition-colors xl:text-base focus:outline-none focus-visible:ring focus-visible:ring-pink-400/50 text-gray-400 hover:text-gray-300 hover:bg-gray-400/10" > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /> </svg> <span>Log in</span> </a> </div> <button class="inline-flex rounded-md p-1 text-gray-400 transition-colors hover:text-gray-300 focus:outline-none focus-visible:ring focus-visible:ring-pink-400/50 lg:hidden" @click.prevent="navIsOpen = ! navIsOpen"> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" /> </svg> </button> </div> </div> </header> <nav x-dialog x-model="navIsOpen" style="display: none" class="fixed inset-0 z-20 overflow-hidden lg:hidden" > <div x-dialog:overlay x-transition.opacity class="fixed inset-0 bg-gray-900/50"></div> <div class="fixed inset-y-0 right-0 w-full max-w-sm"> <div x-dialog:panel x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="h-full w-full" > <div class="bg-gray-850 flex h-full flex-col justify-between overflow-y-auto shadow-lg">  <div class="absolute top-0 right-0 pt-4 pr-4"> <button type="button" @click="$dialog.close()" class="rounded-md p-2 text-gray-400 transition hover:text-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400/50"> <span class="sr-only">Close nav</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6"> <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd" /> </svg> </button> </div>  <div class="flex flex-col gap-3 py-16 px-12"> <a wire:navigate href="/docs" class="flex items-center gap-3 rounded-md p-2 text-gray-400 transition-colors hover:text-gray-300 focus:outline-none focus-visible:ring focus-visible:ring-pink-400/50"> <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /></svg> <span>Documentation</span> </a> <a wire:navigate href="/screencasts" class="flex items-center gap-3 rounded-md p-2 text-gray-400 transition-colors hover:text-gray-300 focus:outline-none focus-visible:ring focus-visible:ring-pink-400/50"> <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.667 4.667h12.666m-3.466-3 1.8 3M7 1.333l2 3.334m-5.333-3 1.666 3M5 11.333a.333.333 0 0 1-.667 0m.667 0a.333.333 0 0 0-.667 0m.667 0h-.667m2.334 3.334h2.666c1.867 0 2.8 0 3.514-.364a3.333 3.333 0 0 0 1.456-1.456c.364-.713.364-1.647.364-3.514V6.667c0-1.867 0-2.8-.364-3.514a3.333 3.333 0 0 0-1.456-1.456c-.713-.364-1.647-.364-3.514-.364H6.667c-1.867 0-2.8 0-3.514.364-.627.32-1.137.83-1.456 1.456-.364.713-.364 1.647-.364 3.514v2.666c0 1.867 0 2.8.364 3.514.32.627.83 1.137 1.456 1.456.713.364 1.647.364 3.514.364Z"/></svg> <span>Screencasts</span> </a> <a wire:navigate href="/partners" class="flex items-center gap-3 rounded-md p-2 text-gray-400 transition-colors hover:text-gray-300 focus:outline-none focus-visible:ring focus-visible:ring-pink-400/50" > <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg> <span>Premium Support</span> </a> <a href="/login/github" class="flex items-center gap-3 rounded-md p-2 text-gray-400 transition-colors hover:text-gray-300 focus:outline-none focus-visible:ring focus-visible:ring-pink-400/50"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /> </svg> <span>Log in</span> </a> </div> </div> </div> </div> </nav> </div> <main role="main" class="1 lg:flex lg:flex-1 lg:flex-col"> <div class="pointer-events-none absolute inset-0 h-[2400px] w-full overflow-hidden pb-64"> <script data-navigate-once> // Every 150ms we'll generate a new "woosh" vertical line, place it randomly, and animate it. setInterval(() => { let root = document.querySelector('#woosh') if (! root) return let el = root.content.cloneNode(true).firstElementChild; root.after(el) setTimeout(() => woosh(el), 10) }, 150) function woosh(el) { let random = max => Math.floor(Math.random() * max); let parent = el; let child = el.firstElementChild parent.style.setProperty('left', random(100)+'%') parent.style.setProperty('top', (random(1000)-500)+'px') parent.classList.remove('translate-y-0') setTimeout(() => parent.classList.add('translate-y-[500px]'), 50) child.classList.remove('opacity-0') setTimeout(() => { child.classList.add('opacity-0') setTimeout(() => { el.remove() }, 1000); }, 650) } </script> <template id="woosh"> <div class="absolute translate-y-0 transition-transform duration-[1000ms]"> <div class="duration-350 h-[500px] w-[1px] bg-gradient-to-b from-transparent via-[#6A1F3Faa] opacity-0 transition-opacity"></div> </div> </template> </div> <div class="pointer-events-none absolute inset-0 h-[2400px] w-full overflow-hidden pb-64"> <img style=" position: absolute; width: 700px; height: 700px; left: 10%; top: 516px; animation-delay: 1s; animation-duration: 4.25s; " src="/img/blur.svg" class="animate-pulse-slow" /> <img style=" position: absolute; width: 700px; height: 700px; right: 5%; top: 320px; " src="/img/blur.svg" class="animate-pulse-slow" /> <img style=" position: absolute; width: 400px; height: 400px; left: 35%; top: 1156px; opacity: .6s; " src="/img/blur.svg" class="animate-pulse-slow" /> </div> <div class="relative"> <div class="pt-12 text-center sm:pt-20"> <h1 class="mx-auto max-w-4xl px-16 text-center text-5xl font-semibold leading-tight sm:text-6xl">The most productive way to build your next web app</h1> <p class="mx-auto mt-8 max-w-xl text-xl font-normal text-gray-400">Powerful, dynamic, <span class="whitespace-nowrap">front-end</span> UIs without leaving PHP.</p> <a href="/docs" class="mt-8 inline-flex px-8 py-2.5 rounded-[10px] bg-pink-400 text-white uppercase font-medium transition hover:opacity-90 focus-visible:outline-none focus-visible:!ring-1 focus-visible:!ring-white" style=" background: linear-gradient(109.48deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%), #EE5D99; box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1); " > Start Here </a> </div> <div wire:snapshot="{"data":{"term":null},"memo":{"id":"V6R5wpqLS0vlYhNJyNjo","name":"landing.example","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"a7fca5dd060c0c29796ca0b6a3479d0325616782256611ad09e5059035e6b4b8"}" wire:effects="[]" wire:id="V6R5wpqLS0vlYhNJyNjo" class="mx-auto mt-20 max-w-xl px-6 lg:max-w-4xl"> <div class="w-full bg-gray-850 rounded-xl overflow-hidden grid lg:grid-cols-5" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <div class="border-r border-gray-800 p-8 pb-12 lg:col-span-2"> <div class="relative w-full"> <input wire:model.live="term" type="text" placeholder="Search users" class="transition-color block w-full max-w-[16rem] rounded-[10px] border-0 bg-gray-800 py-2.5 pl-10 pr-4 text-sm text-gray-300 placeholder-gray-600 outline-none focus-visible:ring-1 focus-visible:ring-pink-400/50 sm:max-w-none" > <div class="pointer-events-none absolute inset-0 left-3 flex items-center" aria-hidden="true"> <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 9.167a5.917 5.917 0 1 1 11.833 0 5.917 5.917 0 0 1-11.833 0ZM9.167 1.75a7.417 7.417 0 1 0 4.687 13.165l2.282 2.282a.75.75 0 0 0 1.061-1.06l-2.282-2.283A7.417 7.417 0 0 0 9.167 1.75Z" fill="#475569" opacity=".8"/></svg> </div> </div>  <ul class="mt-8 space-y-6">  <li class="flex items-center gap-4 text-sm text-white"> <img class="h-10 w-10 overflow-hidden rounded-full" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFsZSUyMGhlYWRzaG90fGVufDB8fDB8fA%3D%3D&auto=format&w=80&h=80&q=60&fit=facearea&facepad=3"> <span>Nicholas North</span> </li> <li class="flex items-center gap-4 text-sm text-white"> <img class="h-10 w-10 overflow-hidden rounded-full" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGZlbWFsZSUyMGhlYWRzaG90fGVufDB8fDB8fA%3D%3D&auto=format&fit=facearea&w=80&h=80&q=60&facepad=3"> <span>Cameron Watson</span> </li> <li class="flex items-center gap-4 text-sm text-white"> <img class="h-10 w-10 overflow-hidden rounded-full" src="https://images.unsplash.com/photo-1607569708758-0270aa4651bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8ZmVtYWxlJTIwaGVhZHNob3R8ZW58MHx8MHx8&auto=format&fit=facearea&w=80&h=80&q=60&facepad=3"> <span>Jane Lambert</span> </li> <li class="flex items-center gap-4 text-sm text-white"> <img class="h-10 w-10 overflow-hidden rounded-full" src="https://images.unsplash.com/photo-1530785602389-07594beb8b73?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGZlbWFsZSUyMGhlYWRzaG90fGVufDB8fDB8fA%3D%3D&auto=format&fit=facearea&w=80&h=80&q=60&facepad=3"> <span>Gabrielle Mills</span> </li> <li class="flex items-center gap-4 text-sm text-white"> <img class="h-10 w-10 overflow-hidden rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8bWFsZSUyMGhlYWRzaG90fGVufDB8fDB8fA%3D%3D&auto=format&fit=facearea&w=80&h=80&q=60&facepad=4"> <span>Luke Arnold</span> </li>  </ul>  </div> <div class="overflow-x-auto text-sm lg:col-span-3"> <div class="border-b border-gray-800" wire:ignore> <pre class="w-full overflow-x-auto px-5 py-8"><code data-theme="material-theme-palenight" data-lang="blade" class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;"><div class='line'><span style="color: #89DDFF;"><</span><span style="color: #F07178;">input</span><span style="color: #89DDFF;"> </span><span style="color: #C792EA;">wire:model.live</span><span style="color: #89DDFF;">=</span><span style="color: #89DDFF;">"</span><span style="color: #C3E88D;">search</span><span style="color: #89DDFF;">"</span><span style="color: #89DDFF;">></span></div><div class='line'> </div><div class='line'> </div><div class='line'><span style="color: #89DDFF;">@foreach </span><span style="color: #A6ACCD;">(</span><span style="color: #89DDFF;">$this-></span><span style="color: #A6ACCD;">users </span><span style="color: #89DDFF;">as</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">user)</span></div><div class='line'><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;"><</span><span style="color: #F07178;">div</span><span style="color: #89DDFF;">></span><span style="color: #82AAFF;">{{</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">user</span><span style="color: #89DDFF;">-></span><span style="color: #A6ACCD;">name </span><span style="color: #82AAFF;">}}</span><span style="color: #89DDFF;"></</span><span style="color: #F07178;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color: #89DDFF;">@endforeach</span></div></code></pre> </div> <div class="flex-1" wire:ignore> <pre class="w-full overflow-x-auto px-5 py-8"><code data-theme="material-theme-palenight" data-lang="php" class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;"><div class='line'><span style="color: #C792EA;">class</span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">SearchUsers</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">extends</span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">Component</span></div><div class='line'><span style="color: #89DDFF;">{</span></div><div class='line'><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">public</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">search </span><span style="color: #89DDFF;">=</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">''</span><span style="color: #89DDFF;">;</span></div><div class='line'> </div><div class='line'><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">public</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #82AAFF;">render</span><span style="color: #89DDFF;">()</span></div><div class='line'><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class='line'><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">return</span><span style="color: #A6ACCD;"> </span><span style="color: #82AAFF;">view</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">search-users</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">,</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">[</span></div><div class='line'><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">users</span><span style="color: #89DDFF;">'</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">=></span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">search</span><span style="color: #89DDFF;">($this-></span><span style="color: #A6ACCD;">search</span><span style="color: #89DDFF;">),</span></div><div class='line'><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">]);</span></div><div class='line'><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">}</span></div><div class='line'><span style="color: #89DDFF;">}</span></div></code></pre> </div> </div> </div> </div> <div class="py-24 md:pt-32 md:pb-48"> <blockquote class="mx-auto max-w-4xl px-6"> <p class="text-center text-3xl font-semibold text-white sm:text-4xl md:text-5xl"> <span class="text-gray-500">“</span>IMO Livewire takes Blade to the next level. It's basically what Blade should be by default. 🔥<span class="text-gray-500">”</span> </p> <div class="mt-8 flex items-center justify-center gap-6"> <img class="w-[73px] shrink-0" src="/img/taylor.png"> <div> <cite class="font-medium not-italic text-white"> Taylor Otwell </cite> <p class="mt-1 text-sm text-gray-400">Creator of Laravel</p> </div> </div> </blockquote> </div> <div class="relative overflow-x-clip"> <img style=" position: absolute; width: 700px; height: 700px; right: -5%; bottom: -240px; animation-duration: 4s; " src="/img/blur.svg" class="animate-pulse-slow" /> <img style=" position: absolute; width: 700px; height: 700px; right: 200px; bottom: -120px; animation-duration: 5s; animation-delay: 1.5s; " src="/img/blur.svg" class="animate-pulse-slow" /> <div class="relative mx-auto max-w-7xl px-6"> <div class="mx-auto max-w-xl lg:mx-0 lg:max-w-2xl"> <h2 class="text-4xl font-semibold text-white">Livewire has everything.</h2> <p class="mt-8 text-xl text-gray-400">Livewire's mission is to build on the efficiency and joy of building web apps with Laravel and push it to the max. Any part of web development that can be made easier, we have tried or are planning to do.</p> </div> <div class="mt-16 grid gap-5 lg:grid-cols-2"> <div class="w-full bg-gray-850 rounded-xl mx-auto max-w-xl px-12 py-8" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <h3 class="text-xl font-semibold text-gray-100">Forms</h3> <p class="mt-3 max-w-md text-sm text-gray-400">Building powerful forms is one of Livewire's greatest strengths. Otherwise difficult tasks, like real-time validation and file uploads, are made dead simple.</p> <svg class="mt-8 w-full max-w-[472px]" viewBox="0 0 472 220" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="472" height="220" rx="8" fill="#1E293B"/><rect x="95.5" y="51.5" width="281" height="33" rx="8.5" fill="#162131" stroke="#334155"/><rect x="95.5" y="127.5" width="281" height="33" rx="8.5" fill="#162131" stroke="#334155"/><rect x="96" y="32" width="100" height="10" rx="5" fill="#334155"/><rect x="96" y="108" width="78" height="10" rx="5" fill="#334155"/><rect x="96" y="170" width="150" height="6" rx="3" fill="#334155"/></svg> </div> <div class="w-full bg-gray-850 rounded-xl mx-auto max-w-xl px-12 py-8" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <h3 class="text-xl font-semibold text-gray-100">Tables</h3> <p class="mt-3 max-w-md text-sm text-gray-400">Displaying application data inside tables is possibly the most common need when building web apps. Livewire is perfectly suited for this task. Displaying data, paginating, filtering, and sorting are all a breeze with Livewire.</p> <svg class="mt-8 w-full max-w-[472px]" viewBox="0 0 472 220" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="472" height="220" rx="8" fill="#1E293B"/><path opacity=".3" d="M0 8a8 8 0 0 1 8-8h456a8 8 0 0 1 8 8v34H0V8Z" fill="#334155"/><rect x="20" y="16" width="100" height="10" rx="5" fill="#475569"/><rect x="20" y="57" width="74" height="10" rx="5" fill="#334155"/><rect x="170" y="57" width="74" height="10" rx="5" fill="#334155"/><rect x="340" y="57" width="74" height="10" rx="5" fill="#334155"/><rect x="170" y="97" width="95" height="10" rx="5" fill="#334155"/><rect x="20" y="97" width="95" height="10" rx="5" fill="#334155"/><rect x="170" y="137" width="46" height="10" rx="5" fill="#334155"/><rect x="340" y="97" width="95" height="10" rx="5" fill="#334155"/><rect x="170" y="177" width="74" height="10" rx="5" fill="#334155"/><rect x="20" y="137" width="46" height="10" rx="5" fill="#334155"/><rect x="340" y="137" width="46" height="10" rx="5" fill="#334155"/><rect x="20" y="177" width="74" height="10" rx="5" fill="#334155"/><rect x="340" y="177" width="74" height="10" rx="5" fill="#334155"/><rect x="170" y="16" width="100" height="10" rx="5" fill="#475569"/><rect x="340" y="16" width="100" height="10" rx="5" fill="#475569"/><path stroke="#334155" d="M0 41.5h472"/><path opacity=".5" stroke="#334155" d="M0 81.5h472M0 121.5h472M0 161.5h472M0 201.5h472"/><path opacity=".3" stroke="#334155" d="M150.5 0v220M320.5 0v220"/></svg> </div> <div class="w-full bg-gray-850 rounded-xl mx-auto max-w-xl px-12 py-8" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <h3 class="text-xl font-semibold text-gray-100">Charts</h3> <p class="mt-3 max-w-md text-sm text-gray-400">Displaying charts of real-time data feeds becomes trivial in Livewire. Hook up a data source to your favorite charting library and let Livewire keep it live on the page.</p> <svg class="mt-8 w-full max-w-[472px]" viewBox="0 0 472 220" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="472" height="220" rx="8" fill="#1E293B"/><circle cx="394" cy="165" r="29" fill="#475569"/><path d="M394 136a29.004 29.004 0 0 0-24.113 12.888 29.003 29.003 0 0 0 18.455 44.555 28.997 28.997 0 0 0 26.164-7.937L394 165v-29Z" fill="#94A3B8"/><circle cx="79" cy="55" r="32" fill="#64748B"/><path d="M111 55a31.999 31.999 0 1 0-59.713 16L79 55h32Z" fill="#94A3B8"/><path d="M111 55a32.003 32.003 0 0 0-32-32v32h32Z" fill="#475569"/><circle cx="79" cy="55" r="16.762" fill="#1C2738"/><path d="M344.5 83 369 67l25.5 6L419 59l25-32" stroke="#334155" stroke-width="3"/><circle cx="344" cy="83" r="4" fill="#334155" stroke="#94A3B8" stroke-width="3"/><circle cx="369" cy="67" r="4" fill="#334155" stroke="#94A3B8" stroke-width="3"/><circle cx="394" cy="73" r="4" fill="#334155" stroke="#94A3B8" stroke-width="3"/><circle cx="419" cy="59" r="4" fill="#334155" stroke="#94A3B8" stroke-width="3"/><circle cx="444" cy="27" r="4" fill="#334155" stroke="#94A3B8" stroke-width="3"/><rect x="29" y="157" width="100" height="16" rx="4" fill="#334155"/><path d="M29 161a4 4 0 0 1 4-4h51v16H33a4 4 0 0 1-4-4v-8Z" fill="#94A3B8"/><rect x="221" y="69" width="30" height="4" rx="2" fill="#94A3B8"/><rect x="221" y="85" width="30" height="4" rx="2" fill="#94A3B8"/><rect x="221" y="61" width="30" height="4" rx="2" fill="#94A3B8"/><rect x="221" y="77" width="30" height="4" rx="2" fill="#94A3B8"/><rect x="221" y="53" width="30" height="4" rx="2" fill="#94A3B8"/><rect x="221" y="45" width="30" height="4" rx="2" fill="#94A3B8"/><rect x="221" y="37" width="30" height="4" rx="2" fill="#334155"/><rect x="221" y="29" width="30" height="4" rx="2" fill="#334155"/><rect x="221" y="21" width="30" height="4" rx="2" fill="#334155"/><path d="M178 182a2 2 0 1 1 4 0v11h-4v-11ZM186 177.5a1.5 1.5 0 0 1 3 0V193h-3v-15.5ZM193 175a2 2 0 1 1 4 0v18h-4v-18ZM201 171.5a1.5 1.5 0 0 1 3 0V193h-3v-21.5ZM208 169a2 2 0 1 1 4 0v24h-4v-24ZM216 171.5a1.5 1.5 0 0 1 3 0V193h-3v-21.5ZM223 175a2 2 0 1 1 4 0v18h-4v-18ZM231 171.5a1.5 1.5 0 0 1 3 0V193h-3v-21.5ZM238 169a2 2 0 1 1 4 0v24h-4v-24ZM246 165.5a1.5 1.5 0 0 1 3 0V193h-3v-27.5ZM253 164a2 2 0 1 1 4 0v29h-4v-29ZM261 160.5a1.5 1.5 0 0 1 3 0V193h-3v-32.5ZM268 155a2 2 0 1 1 4 0v38h-4v-38ZM276 148.5a1.5 1.5 0 0 1 3 0V193h-3v-44.5ZM283 141a2 2 0 1 1 4 0v52h-4v-52ZM291 137.5a1.5 1.5 0 0 1 3 0V193h-3v-55.5Z" fill="#94A3B8"/></svg> </div> <div class="w-full bg-gray-850 rounded-xl mx-auto max-w-xl px-12 py-8" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <h3 class="text-xl font-semibold text-gray-100">Image uploads</h3> <p class="mt-3 max-w-md text-sm text-gray-400">Handling file and image uploads is traditionally a difficult task. Livewire takes care of everything: validation, temporary uploads, preview images; everything.</p> <svg class="mt-8 w-full max-w-[474px]" viewBox="0 0 474 221" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="472" height="164" rx="12" fill="#334155" fill-opacity=".2" stroke="#334155" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 8"/><rect x="1" y="181" width="472" height="40" rx="8" fill="#1E293B"/><rect x="58" y="196" width="100" height="10" rx="5" fill="#475569"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23.944 191.25h2.112c1.838 0 3.294 0 4.433.153 1.172.158 2.121.49 2.87 1.238.748.749 1.08 1.698 1.238 2.87.153 1.139.153 2.595.153 4.433v2.112c0 1.838 0 3.294-.153 4.433-.158 1.172-.49 2.121-1.238 2.87-.749.748-1.698 1.08-2.87 1.238-1.14.153-2.595.153-4.433.153h-2.112c-1.838 0-3.294 0-4.433-.153-1.172-.158-2.121-.49-2.87-1.238-.748-.749-1.08-1.698-1.238-2.87-.153-1.139-.153-2.595-.153-4.433v-2.112c0-1.838 0-3.294.153-4.433.158-1.172.49-2.121 1.238-2.87.749-.748 1.698-1.08 2.87-1.238 1.14-.153 2.595-.153 4.433-.153Zm-4.233 1.64c-1.006.135-1.586.389-2.01.812-.422.423-.676 1.003-.811 2.009-.138 1.028-.14 2.382-.14 4.289v2c0 1.778.001 3.075.113 4.076l.607-.606 1.671-1.672.037-.037c.635-.635 1.165-1.165 1.642-1.529.504-.384 1.036-.654 1.68-.654.644 0 1.176.27 1.68.654.477.364 1.007.894 1.642 1.529l.037.037L27 204.94c.496-.493.926-.907 1.32-1.208.504-.384 1.036-.654 1.68-.654.644 0 1.176.27 1.68.654.448.342.943.83 1.528 1.415.041-.848.042-1.874.042-3.147v-2c0-1.907-.002-3.261-.14-4.289-.135-1.006-.389-1.586-.812-2.009-.423-.423-1.003-.677-2.009-.812-1.027-.138-2.382-.14-4.289-.14h-2c-1.907 0-3.262.002-4.29.14Zm13.259 14.141v-.001l-.672-.671c-.682-.682-1.14-1.139-1.528-1.434-.37-.283-.586-.347-.77-.347-.184 0-.4.064-.77.347-.315.24-.678.587-1.169 1.075l2.97 2.97c.572-.148.96-.366 1.267-.672.306-.306.524-.695.672-1.267Zm-3.823 2.177-2.677-2.678-1.672-1.671c-.682-.682-1.14-1.139-1.528-1.434-.37-.283-.586-.347-.77-.347-.184 0-.4.064-.77.347-.387.295-.846.752-1.528 1.434l-1.672 1.671-1.227 1.228c.112.21.244.385.399.54.423.423 1.003.677 2.009.812 1.027.138 2.382.14 4.289.14h2c1.273 0 2.3-.001 3.147-.042ZM28 196.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5ZM25.25 198a2.75 2.75 0 1 1 5.5 0 2.75 2.75 0 0 1-5.5 0Z" fill="#475569"/><path fill-rule="evenodd" clip-rule="evenodd" d="M438.47 194.47a.749.749 0 0 1 1.06 0l5.47 5.469 5.47-5.469a.749.749 0 1 1 1.06 1.06l-5.469 5.47 5.469 5.47a.749.749 0 1 1-1.06 1.06l-5.47-5.469-5.47 5.469a.749.749 0 1 1-1.06-1.06l5.469-5.47-5.469-5.47a.749.749 0 0 1 0-1.06Z" fill="#334155"/><path fill-rule="evenodd" clip-rule="evenodd" d="M234.636 66.25H237a1.5 1.5 0 0 1 0 3h-2.25c-4.285 0-7.348.003-9.676.316-2.284.307-3.634.888-4.627 1.88-.993.994-1.574 2.344-1.881 4.628-.313 2.328-.316 5.391-.316 9.676v4.5c0 4.224.003 7.26.303 9.576l1.636-1.637 3.761-3.76.075-.076c1.436-1.436 2.621-2.62 3.684-3.432 1.117-.851 2.274-1.432 3.666-1.432s2.549.58 3.666 1.432c1.063.812 2.248 1.996 3.684 3.432l.075.075 2.7 2.701c1.172-1.167 2.173-2.137 3.084-2.833 1.117-.851 2.274-1.432 3.666-1.432s2.549.58 3.666 1.432c1.063.812 2.247 1.996 3.684 3.432l.032.033c.116-1.995.118-4.44.118-7.511V88a1.5 1.5 0 0 1 3 0v2.364c0 4.146 0 7.41-.343 9.961-.352 2.617-1.089 4.706-2.732 6.35-1.644 1.643-3.733 2.38-6.35 2.732-2.55.343-5.815.343-9.961.343h-4.728c-4.146 0-7.411 0-9.961-.343-2.617-.352-4.706-1.089-6.35-2.732-1.643-1.644-2.38-3.733-2.732-6.35-.343-2.55-.343-5.815-.343-9.961v-4.728c0-4.146 0-7.41.343-9.961.352-2.617 1.089-4.706 2.732-6.35 1.644-1.643 3.733-2.38 6.35-2.732 2.55-.343 5.815-.343 9.961-.343Zm-14.189 38.303a5.261 5.261 0 0 1-.995-1.384l2.859-2.858 3.761-3.761c1.53-1.53 2.573-2.569 3.457-3.243.849-.649 1.374-.818 1.846-.818s.997.17 1.846.817c.884.675 1.927 1.714 3.457 3.244l3.761 3.761 6.322 6.321c-1.995.116-4.439.118-7.511.118h-4.5c-4.285 0-7.348-.003-9.676-.316-2.284-.307-3.634-.888-4.627-1.881Zm33.106 0c-.738.739-1.674 1.249-3.045 1.589a1.33 1.33 0 0 0-.072-.078l-6.814-6.813c1.173-1.168 2.034-2 2.782-2.57.849-.648 1.374-.817 1.846-.817s.997.17 1.846.817c.884.675 1.927 1.714 3.457 3.244l1.511 1.511c.025.025.051.049.078.072-.34 1.371-.85 2.307-1.589 3.045Zm-1.992-37.864a1.501 1.501 0 0 0-2.122 0l-5.625 5.625a1.501 1.501 0 0 0 2.122 2.121L249 71.372v9.879a1.5 1.5 0 0 0 3 0v-9.879l3.064 3.065a1.501 1.501 0 0 0 2.122-2.122l-5.625-5.625Z" fill="#94A3B8"/></svg> </div> <div class="w-full bg-gray-850 rounded-xl mx-auto max-w-xl px-12 py-8" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <h3 class="text-xl font-semibold text-gray-100">Lazy loading</h3> <p class="mt-3 max-w-md text-sm text-gray-400">Instead of holding up an entire page load for a single component with a large database query, Livewire makes it incredibly easy to instead show a loading indicator and lazilly load the component on the page.</p> <svg class="mt-8 w-full max-w-[474px]" viewBox="0 0 474 221" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" width="472" height="140" rx="10" fill="#1E293B"/><g opacity=".9"><rect x="1" y="150" width="231" height="70" rx="10" fill="#334155" fill-opacity=".1"/><rect x=".5" y="149.5" width="232" height="71" rx="10.5" stroke="#334155" stroke-opacity=".7" stroke-linecap="round"/></g><g opacity=".5"><rect x="242" y="150" width="231" height="70" rx="10" fill="#334155" fill-opacity=".1"/><rect x="241.5" y="149.5" width="232" height="71" rx="10.5" stroke="#334155" stroke-opacity=".5" stroke-linecap="round"/></g><rect x="21" y="24" width="78" height="10" rx="5" fill="#334155"/><rect x="21" y="94" width="108" height="26" rx="8" fill="#334155"/><rect x="21" y="46" width="279" height="10" rx="5" fill="#334155"/></svg> </div> <div class="w-full bg-gray-850 rounded-xl mx-auto flex max-w-xl items-center justify-center px-12 py-8 text-center" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <div> <svg class="mx-auto" width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="49.5" y="49.5" width="101" height="101" rx="24.5" fill="#334155" fill-opacity=".2" stroke="#334155" stroke-linecap="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M85 115h30l15-15-15-15-30 30Z" fill="#D8DEE9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M85 115h30l15-15-15-15-30 30Z" fill="url(#paint0_linear_103_579)" fill-opacity=".2"/><path opacity=".4" stroke="url(#paint1_radial_103_579)" d="M150.5 0v200"/><path opacity=".4" stroke="url(#paint2_radial_103_579)" d="M0 49.5h200"/><path opacity=".4" stroke="url(#paint3_radial_103_579)" d="M0 150.5h200"/><path opacity=".4" stroke="url(#paint4_radial_103_579)" d="M49.5 0v200"/><path opacity=".1" fill="#202C3E" d="m99 99.707.707-.707 15.08 15.08-.707.707z"/><g filter="url(#filter0_d_103_579)" shape-rendering="crispEdges"><path fill-rule="evenodd" clip-rule="evenodd" d="M85 115h30l-14.365-14.365L85 85l-15 15 15 15Z" fill="#8AC0CF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M85 115h30l-14.365-14.365L85 85l-15 15 15 15Z" fill="url(#paint5_linear_103_579)" fill-opacity=".4"/><path d="m84.823 115.177.073.073h30.708l-.427-.427-14.365-14.364-15.635-15.636-.177-.177-.177.177-15 15-.177.177.177.177 15 15Z" stroke="url(#paint6_radial_103_579)" stroke-width=".5"/></g><defs><radialGradient id="paint1_radial_103_579" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-89.713 125 -25.125) scale(100.001 19510.4)"><stop stop-color="#64748B"/><stop offset="1" stop-color="#0F172A"/></radialGradient><radialGradient id="paint2_radial_103_579" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-99.99975 -.49917 97.38852 -19510.15694 100 50.5)"><stop stop-color="#64748B"/><stop offset="1" stop-color="#0F172A"/></radialGradient><radialGradient id="paint3_radial_103_579" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-99.99975 -.49917 97.38852 -19510.15694 100 151.5)"><stop stop-color="#64748B"/><stop offset="1" stop-color="#0F172A"/></radialGradient><radialGradient id="paint4_radial_103_579" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-89.713 74.5 25.628) scale(100.001 19510.4)"><stop stop-color="#64748B"/><stop offset="1" stop-color="#0F172A"/></radialGradient><radialGradient id="paint6_radial_103_579" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 13 -19.5 0 85 85)"><stop stop-color="#fff" stop-opacity=".31"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><linearGradient id="paint0_linear_103_579" x1="107.5" y1="85" x2="107.5" y2="115" gradientUnits="userSpaceOnUse"><stop stop-opacity="0"/><stop offset="1"/></linearGradient><linearGradient id="paint5_linear_103_579" x1="85" y1="85" x2="85" y2="115" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-opacity="0"/></linearGradient><filter id="filter0_d_103_579" x="45.293" y="64.293" width="94.914" height="79.207" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="12"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.541176 0 0 0 0 0.752941 0 0 0 0 0.811765 0 0 0 0.2 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_103_579"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_103_579" result="shape"/></filter></defs></svg> <h3 class="-mt-2 text-xl font-semibold text-gray-100">And much more</h3> <p class="mt-3 text-sm text-gray-400">Livewire has countless features that make building interfaces a breeze. If you find something you can't do in Livewire, you can almost certainly do it in Alpine, which we've built to unlock unlimited possibilities.</p> </div> </div> </div> </div> </div> <div class="mx-auto mt-24 max-w-5xl"> <div class="mt-10 flex flex-wrap items-center justify-center gap-6"> <a class="rounded-md transition hover:opacity-90 focus-visible:outline-none focus-visible:ring focus-visible:ring-pink-400/50" href="https://fly.io/" target="_blank"> <img style="filter: grayscale(1)" class="h-24" src="/img/sponsors/fly.svg" alt="Fly.io"> </a> <a class="rounded-md transition hover:opacity-90 focus-visible:outline-none focus-visible:ring focus-visible:ring-pink-400/50" href="https://tighten.com/" target="_blank"> <img style="filter: grayscale(1)" class="h-10" src="/img/sponsors/tighten.svg" alt="Tighten Co."> </a> <a class="rounded-md transition hover:opacity-90 focus-visible:outline-none focus-visible:ring focus-visible:ring-pink-400/50" href="https://www.jetbrains.com/" target="_blank"> <img style="filter: grayscale(1)" class="h-24" src="/img/sponsors/jetbrains.svg" alt="Jet Brains"> </a> <a class="rounded-md transition hover:opacity-90 focus-visible:outline-none focus-visible:ring focus-visible:ring-pink-400/50" href="https://laravel.com/" target="_blank"> <img style="filter: grayscale(1)" class="h-24" src="/img/sponsors/laravel.svg" alt="Laravel"> </a> <a class="rounded-md transition hover:opacity-90 focus-visible:outline-none focus-visible:ring focus-visible:ring-pink-400/50" href="https://devsquad.com/" target="_blank"> <img style="filter: grayscale(1)" class="h-24" src="/img/sponsors/devsquad.svg" alt="DevSquad"> </a> <a class="rounded-md transition hover:opacity-90 focus-visible:outline-none focus-visible:ring focus-visible:ring-pink-400/50" href="https://patiently.com/" target="_blank"> <img style="filter: grayscale(1)" class="h-24" src="/img/sponsors/patiently.svg" alt="Patiently"> </a> <a class="rounded-md transition hover:opacity-90 focus-visible:outline-none focus-visible:ring focus-visible:ring-pink-400/50" href="https://larajobs.com/" target="_blank"> <img style="filter: grayscale(1)" class="h-24" src="/img/sponsors/larajobs.svg" alt="Larajobs"> </a> <a class="rounded-md transition hover:opacity-90 focus-visible:outline-none focus-visible:ring focus-visible:ring-pink-400/50" href="https://usefathom.com/" target="_blank"> <img style="filter: grayscale(1)" class="h-24" src="/img/sponsors/fathom.svg" alt="Fathom Analytics"> </a> <a class="rounded-md transition hover:opacity-90 focus-visible:outline-none focus-visible:ring focus-visible:ring-pink-400/50" href="https://getform.io/" target="_blank"> <img style="filter: grayscale(1)" class="h-24" src="/img/sponsors/getform.svg" alt="Getform.io"> </a> </div> </div> <div class="relative overflow-x-clip"> <img style=" position: absolute; width: 700px; height: 700px; left: -15%; top: 0; opacity: .75; " src="/img/blur.svg" class="animate-pulse-slow" /> <div class="relative mx-auto mt-32 max-w-5xl px-6"> <h2 class="text-center text-3xl font-semibold text-gray-300">Loved by developers around the world</h2> <p class="mt-6 text-center text-xl text-gray-400">Here's what people are saying about using Livewire.</p> <div class="-mx-2.5 mt-10 break-after-all gap-0 sm:columns-2 lg:columns-3"> <div class="p-2.5"> <div class="w-full bg-gray-850 rounded-xl break-inside-avoid p-6" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <blockquote> <div class="flex items-center gap-3"> <img src="/images/testimonials/jake.jpeg" class="h-9 w-9 rounded-full"> <cite class="not-italic text-gray-400">Jake Bennett</cite> </div> <p class="mt-4 text-[#F8FAFC]"> Livewire allowed me to go from concept to production on a front-end heavy app while using PHP and Blade exclusively. I still can't believe it works! It's Magic! ✨ </p> </blockquote> </div> </div> <div class="p-2.5"> <div class="w-full bg-gray-850 rounded-xl break-inside-avoid p-6" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <blockquote> <div class="flex items-center gap-3"> <img src="/images/testimonials/alex.jpeg" class="h-9 w-9 rounded-full"> <cite class="not-italic text-gray-400">Alex Garrett-Smith</cite> </div> <p class="mt-4 text-[#F8FAFC]"> Honestly just install Livewire. You'll have a new way of building reactive apps in Laravel — and you won't look back. </p> </blockquote> </div> </div> <div class="p-2.5"> <div class="w-full bg-gray-850 rounded-xl break-inside-avoid p-6" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <blockquote> <div class="flex items-center gap-3"> <img src="/images/testimonials/lotje.jpeg" class="h-9 w-9 rounded-full"> <cite class="not-italic text-gray-400">Lotje Kinable</cite> </div> <p class="mt-4 text-[#F8FAFC]"> Livewire is super flexible and reliable, documentation is great and the community is absolutely amazing! </p> </blockquote> </div> </div> <div class="p-2.5"> <div class="w-full bg-gray-850 rounded-xl break-inside-avoid p-6" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <blockquote> <div class="flex items-center gap-3"> <img src="/images/testimonials/andy.jpeg" class="h-9 w-9 rounded-full"> <cite class="not-italic text-gray-400">Andy Newhouse</cite> </div> <p class="mt-4 text-[#F8FAFC]"> I fell in love with Livewire when it was announced, and I have used it on every project I can since then. Everything from small side projects to multi-million dollar e-commerce platforms. Livewire is developer friendly and intuitive; give it a try, and I bet you'll love it. </p> </blockquote> </div> </div> <div class="p-2.5"> <div class="w-full bg-gray-850 rounded-xl break-inside-avoid p-6" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <blockquote> <div class="flex items-center gap-3"> <img src="/images/testimonials/robert.jpeg" class="h-9 w-9 rounded-full"> <cite class="not-italic text-gray-400">Robert Cordes</cite> </div> <p class="mt-4 text-[#F8FAFC]"> Afters years of using Vue and React, developing with Livewire feels like cheating. </p> </blockquote> </div> </div> <div class="p-2.5"> <div class="w-full bg-gray-850 rounded-xl break-inside-avoid p-6" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <blockquote> <div class="flex items-center gap-3"> <img src="/images/testimonials/adrian.jpeg" class="h-9 w-9 rounded-full"> <cite class="not-italic text-gray-400">Adrian Nürnberger</cite> </div> <p class="mt-4 text-[#F8FAFC]"> Livewire changed my life. I can build anything blazingly fast and it's easy to test like your normal PHP code. </p> </blockquote> </div> </div> <div class="p-2.5"> <div class="w-full bg-gray-850 rounded-xl break-inside-avoid p-6" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <blockquote> <div class="flex items-center gap-3"> <img src="/images/testimonials/stefan.jpeg" class="h-9 w-9 rounded-full"> <cite class="not-italic text-gray-400">Stefan Zweifel</cite> </div> <p class="mt-4 text-[#F8FAFC]"> Stop thinking about naming API endpoints. Use Livewire and benefit from all Laravel features in your reactive frontend too. </p> </blockquote> </div> </div> <div class="p-2.5"> <div class="w-full bg-gray-850 rounded-xl break-inside-avoid p-6" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <blockquote> <div class="flex items-center gap-3"> <img src="/images/testimonials/tobias.jpeg" class="h-9 w-9 rounded-full"> <cite class="not-italic text-gray-400">Tobias Petry</cite> </div> <p class="mt-4 text-[#F8FAFC]"> I am probably one of the worst frontend developers you can imagine. But with Livewire, even I can build stunning frontend interactivity without any effort. </p> </blockquote> </div> </div> <div class="p-2.5"> <div class="w-full bg-gray-850 rounded-xl break-inside-avoid p-6" style="box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.1)"> <blockquote> <div class="flex items-center gap-3"> <img src="/images/testimonials/eric.jpeg" class="h-9 w-9 rounded-full"> <cite class="not-italic text-gray-400">Eric L. Barnes</cite> </div> <p class="mt-4 text-[#F8FAFC]"> Livewire is magical. It just makes sense. The perfect pairing between your Laravel code and your front end. All wrapped in a well-documented package that works beautifully. </p> </blockquote> </div> </div> </div> </div> </div> <div class="relative overflow-x-clip py-20 md:py-32"> <img style=" position: absolute; width: 700px; height: 700px; left: 30%; top: -20%; animation-duration: 5s; " src="/img/blur.svg" class="animate-pulse-slow" /> <blockquote class="mx-auto max-w-4xl px-6"> <p class="text-center text-3xl font-semibold text-white sm:text-4xl md:text-5xl"> <span class="text-gray-500">“</span>I too think Livewire is 🔥<span class="text-gray-500">”</span> </p> <div class="mt-8 flex items-center justify-center gap-6"> <img class="w-[73px] shrink-0" src="/img/caleb.png"> <div> <cite class="font-medium not-italic text-white"> Caleb Porzio </cite> <p class="mt-1 text-sm text-gray-400">Creator of Livewire</p> </div> </div> </blockquote> </div> </div> </main> <footer class="flex items-center justify-center gap-10 "> <div class="flex-1"> <div class="mx-auto w-full px-6 max-w-7xl" > <div class="w-full py-12 flex items-center justify-between flex-wrap gap-6" > <div class="-mx-2"> <a href="/" aria-label="Laravel home" title="Laravel home" class="inline-flex items-center rounded-md px-2 py-1 transition hover:opacity-75 focus:outline-none focus-visible:ring focus-visible:ring-pink-400/50"> <svg width="159" height="30" viewBox="0 0 159 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M54.76 23V9h3.4v11h6.24v3h-9.64Zm11.508 0v-2.86h2.36v-8.28h-2.36V9h8.14v2.86h-2.38v8.28h2.38V23h-8.14Zm14.893 0-5.6-14h3.54l2.7 7.14c.16.413.294.773.4 1.08.12.307.22.593.3.86.094.267.174.54.24.82.08.267.167.573.26.92h-.62a20.93 20.93 0 0 1 .68-2.3c.134-.387.3-.847.5-1.38l2.6-7.14h3.48l-5.64 14h-2.84Zm9.918 0V9h9.761v2.9h-6.46v8.2h6.66V23h-9.96Zm1.6-5.74V14.5h7.26v2.76h-7.26ZM106.09 23l-4.2-14h3.46l2.1 7.36c.093.333.173.673.24 1.02.08.333.14.653.18.96.053.307.093.593.12.86.027.253.053.467.08.64h-.44c.08-.493.147-.933.2-1.32.067-.387.14-.747.22-1.08.08-.347.18-.707.3-1.08l2.08-5.54h2.72l2.04 5.54c.16.44.293.853.4 1.24.107.387.187.76.24 1.12.067.347.12.693.16 1.04l-.4.06c.027-.24.047-.46.06-.66.013-.213.027-.413.04-.6.027-.2.053-.407.08-.62.027-.213.067-.447.12-.7.053-.267.127-.567.22-.9L118.19 9h3.38l-4.2 14h-2.6l-3.32-8.06.38.04-3.06 8.02h-2.68Zm16.663 0v-2.86h2.36v-8.28h-2.36V9h8.14v2.86h-2.38v8.28h2.38V23h-8.14Zm10.974 0V9h6.3c.894 0 1.7.193 2.42.58.734.387 1.307.92 1.72 1.6.414.667.62 1.427.62 2.28 0 .88-.206 1.673-.62 2.38a4.463 4.463 0 0 1-1.7 1.64c-.72.4-1.533.6-2.44.6h-3.06V23h-3.24Zm7.76 0-3.56-6.32 3.48-.5 3.96 6.82h-3.88Zm-4.52-7.52h2.76c.347 0 .647-.073.9-.22.267-.16.467-.38.6-.66.147-.28.22-.6.22-.96s-.08-.673-.24-.94a1.555 1.555 0 0 0-.7-.64c-.293-.147-.653-.22-1.08-.22h-2.46v3.64ZM147.37 23V9h9.76v2.9h-6.46v8.2h6.66V23h-9.96Zm1.6-5.74V14.5h7.26v2.76h-7.26Z" fill="#F1F5F9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M34.8 27.706C34.12 28.734 33.605 30 32.223 30c-2.326 0-2.452-3.587-4.78-3.587-2.327 0-2.201 3.587-4.527 3.587s-2.452-3.587-4.78-3.587c-2.327 0-2.201 3.587-4.528 3.587-2.326 0-2.452-3.587-4.78-3.587C6.5 26.413 6.628 30 4.3 30c-.731 0-1.245-.354-1.678-.84A19.866 19.866 0 0 1 0 19.24C0 8.613 8.208 0 18.333 0 28.46 0 36.667 8.614 36.667 19.24c0 3.037-.671 5.91-1.866 8.466Z" fill="#FB70A9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M34.8 27.706C34.12 28.734 33.605 30 32.223 30c-2.326 0-2.452-3.587-4.78-3.587-2.327 0-2.201 3.587-4.527 3.587s-2.452-3.587-4.78-3.587c-2.327 0-2.201 3.587-4.528 3.587-2.326 0-2.452-3.587-4.78-3.587C6.5 26.413 6.628 30 4.3 30c-.731 0-1.245-.354-1.678-.84A19.866 19.866 0 0 1 0 19.24C0 8.613 8.208 0 18.333 0 28.46 0 36.667 8.614 36.667 19.24c0 3.037-.671 5.91-1.866 8.466Z" fill="#FB70A9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M30.834 29.617c4.804-7.147 4.929-15.075.372-23.784a19.19 19.19 0 0 1 5.461 13.447c0 3.026-.695 5.89-1.934 8.434C34.028 28.738 33.493 30 32.06 30c-.49 0-.886-.148-1.226-.383Z" fill="#E24CA6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17.35 24.038c6.376 0 9.06-3.698 9.06-8.95C26.41 9.834 22.355 5 17.35 5c-5.003 0-9.059 4.835-9.059 10.087 0 5.253 2.684 8.951 9.06 8.951Z" fill="#fff"/><path d="M14.915 15.385c1.876 0 3.397-1.68 3.397-3.75 0-2.071-1.52-3.75-3.397-3.75-1.876 0-3.397 1.679-3.397 3.75 0 2.07 1.52 3.75 3.397 3.75Z" fill="#030776"/><path d="M14.35 12.5c.937 0 1.698-.775 1.698-1.73 0-.957-.76-1.731-1.699-1.731-.938 0-1.699.774-1.699 1.73s.76 1.731 1.7 1.731Z" fill="#fff"/></svg> </a> </div> <nav class="flex items-center gap-6 text-sm"> <a href="https://github.com/livewire/livewire" class="rounded-md p-1 text-gray-400 transition-colors hover:text-gray-300 focus-visible:outline-none focus-visible:ring focus-visible:ring-pink-400/50"> <svg class="w-6" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16 0 0 7.16 0 16c0 7.08 4.58 13.06 10.94 15.18.8.14 1.1-.34 1.1-.76 0-.38-.02-1.64-.02-2.98-4.02.74-5.06-.98-5.38-1.88-.18-.46-.96-1.88-1.64-2.26-.56-.3-1.36-1.04-.02-1.06 1.26-.02 2.16 1.16 2.46 1.64 1.44 2.42 3.74 1.74 4.66 1.32.14-1.04.56-1.74 1.02-2.14-3.56-.4-7.28-1.78-7.28-7.9 0-1.74.62-3.18 1.64-4.3-.16-.4-.72-2.04.16-4.24 0 0 1.34-.42 4.4 1.64 1.28-.36 2.64-.54 4-.54 1.36 0 2.72.18 4 .54 3.06-2.08 4.4-1.64 4.4-1.64.88 2.2.32 3.84.16 4.24 1.02 1.12 1.64 2.54 1.64 4.3 0 6.14-3.74 7.5-7.3 7.9.58.5 1.08 1.46 1.08 2.96 0 2.14-.02 3.86-.02 4.4 0 .42.3.92 1.1.76A16.026 16.026 0 0 0 32 16c0-8.84-7.16-16-16-16Z" fill="currentColor"/></svg> </a> </nav> </div> </div> </div> </footer> <script data-navigate-once="true">window.livewireScriptConfig = {"csrf":"9e0A9oYgyijoI4gJ3hqc01TY7oqyJ9emvXxuQH7i","uri":"\/livewire\/update","progressBar":"","nonce":""};</script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> <script data-navigate-once> document.addEventListener('alpine:init', () => { let state = Alpine.reactive({ path: window.location.pathname }) document.addEventListener('livewire:navigated', () => { queueMicrotask(() => { state.path = window.location.pathname }) }) Alpine.magic('current', (el) => (expected = '') => { let strip = (subject) => subject.replace(/^\/|\/$/g, '') return strip(state.path) === strip(expected) }) }) </script> </body> </html>

CINXE.COM

Livewire | Laravel Livewire