CINXE.COM

<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Building Your App | Laravel Jetstream</title> <meta name="description" content="Beautifully designed application scaffolding for Laravel"> <link rel="preload stylesheet" href="/assets/style.e0bb331f.css" as="style"> <script type="module" src="/assets/app.25fbacc1.js"></script> <link rel="modulepreload" href="/assets/chunks/framework.cd7f01a3.js"> <link rel="modulepreload" href="/assets/chunks/LNLocalSearchBox.826abc10.js"> <link rel="modulepreload" href="/assets/building-your-app.md.301eafa7.lean.js"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" sizes="16x16" type="image/png" href="/favicon-16x16.png"> <link rel="icon" sizes="32x32" type="image/png" href="/favicon-32x32.png"> <link rel="mask-icon" href="/safari-pinned-tab.svg"> <meta name="msapplication-TileColor" content="#18b69b"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta property="og:image" content="/social-share.png"> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:image" content="/social-share.png"> <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script> </head> <body> <div id="app"><header class="bg-white/80 dark:bg-gray-900/80 backdrop-blur border-b dark:border-gray-700 sticky top-0 z-50 w-full h-[3.3rem] flex-none"><div class="max-w-[90rem] px-4 sm:px-6 md:px-8 mx-auto h-[3.3rem]"><div class="flex items-center h-[3.3rem] gap-4"><button type="button" class="md:hidden text-gray-600 dark:text-gray-400"><span class="sr-only">Navigation</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="flex-shrink-0 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button><div style="position:fixed;top:1;left:1;width:1;height:0;padding:0;margin:-1;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none;"></div><a href="/" class="flex-shrink-0 h-[24px] text-gray-500 dark:text-white" alt="Laravel Jetstream"><img class="flex-shrink-0 h-[24px] text-gray-500 dark:text-white block dark:hidden" alt="logo" src="/logo.svg"><img class="flex-shrink-0 h-[24px] text-gray-500 dark:text-white hidden dark:block" alt="logo" src="/logo-dark.svg"></a><div data-headlessui-state class="relative inline-block text-left"><div><button id="headlessui-menu-button-8" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state class="inline-flex w-full items-center justify-center gap-x-1.5 rounded-full bg-gray-100 dark:bg-gray-950 px-3 py-1 text-[13px] font-semibold text-gray-500 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-950/70">v5.x <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="text-gray-500 w-4 h-4 ml-2 -mr-1"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></button></div></div><div class="ml-auto md:flex items-center md:divide-x md:divide-gray-200 md:dark:divide-gray-700"><div class="hidden md:flex items-center gap-12 px-6"><a href="https://github.com/laravel/jetstream" class="text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-primary-500">GitHub</a></div><div class="hidden md:flex md:items-center gap-6 pl-6"><div data-headlessui-state class="relative inline-block text-left"><div><button id="headlessui-menu-button-10" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state class="flex items-center text-gray-500 dark:text-gray-400"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-5 h-5 text-gray-500"><path d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"></path></svg></button></div></div></div><div class="flex items-center gap-3 pl-6"><button type="button" class="md:hidden flex-shrink-0 text-gray-600 dark:text-gray-400"><span class="sr-only">Search</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path></svg></button><button type="button" class="md:hidden flex-shrink-0 text-gray-600 dark:text-gray-400"><span class="sr-only">More</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"></path></svg></button><div style="position:fixed;top:1;left:1;width:1;height:0;padding:0;margin:-1;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none;"></div></div></div></div></div></header><div class="relative"><div class="relative z-10 max-w-[90rem] mx-auto px-4 sm:px-6 md:px-8"><div class="hidden lg:block fixed z-20 inset-0 w-[19.5rem] top-[3.3rem] left-[max(0px,calc(50%-45rem))] right-auto px-8 pb-10 overflow-y-auto"><div class="sticky top-0 -ml-0.5"><div class="h-10 bg-gray-50 dark:bg-gray-900"></div><div id="local-search"><div class="bg-white dark:bg-gray-900 relative pointer-events-auto"><button class="hidden w-full lg:flex items-center text-sm leading-6 text-gray-400 rounded-md ring-1 ring-gray-900/10 shadow-sm py-1.5 pl-2 pr-3 hover:ring-gray-300 dark:hover:ring-gray-800/10 dark:bg-gray-800 dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:hover:bg-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-3 text-gray-400 flex-none"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path></svg><span>Search Jetstream Docs...</span><kbd class="ml-auto pl-3 flex-none font-sans text-xs font-semibold">⌘K</kbd></button></div></div><div class="h-8 bg-gradient-to-b from-gray-50 dark:from-gray-900"></div></div><div class="sidebar"><nav class="flex flex-col gap-6"><div><span class="text-gray-700 dark:text-gray-400 font-bold text-sm">Getting Started</span><div class="mt-2"><a href="/introduction.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Introduction</a><a href="/installation.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Installation</a><a href="/concept-overview.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Concept Overview</a><a href="/building-your-app.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700 !text-primary-500 !border-primary-500">Building Your App</a></div></div><div><span class="text-gray-700 dark:text-gray-400 font-bold text-sm">Features</span><div class="mt-2"><a href="/features/api.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">API</a><a href="/features/authentication.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Authentication</a><a href="/features/registration.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Registration</a><a href="/features/profile-management.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Profile Management</a><a href="/features/password-update.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Password Update</a><a href="/features/password-confirmation.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Password Confirmation</a><a href="/features/two-factor-authentication.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Two Factor Authentication</a><a href="/features/browser-sessions.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Browser Sessions</a><a href="/features/teams.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Teams</a></div></div><div><span class="text-gray-700 dark:text-gray-400 font-bold text-sm">Stack Features</span><div class="mt-2"><a href="/stacks/livewire.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Livewire</a><a href="/stacks/inertia.html" class="text-sm text-gray-500 hover:text-gray-600 border-l border-gray-300/50 dark:border-gray-800 flex items-start pl-4 py-1 hover:border-primary-500 dark:hover:border-gray-700">Inertia</a></div></div></nav></div></div><div class="lg:pl-[19.5rem]"><div class="antialiased max-w-3xl mx-auto pt-10 xl:max-w-none xl:ml-0 xl:mr-[15.5rem] xl:pr-16 pb-24"><div><div class="PilgrimDoc max-w-none content prose dark:prose-invert prose-headings:font-normal prose-h1:text-3xl prose-h2:mb-3 prose-ul:list-none prose-ul:px-0 prose-li:pl-6 prose-img:rounded-lg prose-img:shadow prose-pre:bg-inherit prose-pre:p-6 prose-a:font-bold prose-a:no-underline prose-a:border-b hover:prose-a:border-b-2 prose-a:border-primary-500/50"><div style="position:relative;"><div><h1 id="building-your-app" tabindex="-1">Building Your App <a class="header-anchor" href="#building-your-app" aria-label="Permalink to "Building Your App""></a></h1><nav class="table-of-contents"><ul><li><a href="#introduction">Introduction</a></li><li><a href="#application-dashboard">Application Dashboard</a><ul><li><a href="#adding-additional-pages">Adding Additional Pages</a></li></ul></li><li><a href="#user-profile">User Profile</a></li><li><a href="#team-management">Team Management</a><ul><li><a href="#create-team-screen">Create Team Screen</a></li><li><a href="#team-settings-screen">Team Settings Screen</a></li></ul></li><li><a href="#banner-alerts">Banner Alerts</a></li></ul></nav><h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="#introduction" aria-label="Permalink to "Introduction""></a></h2><p>After installing Jetstream, you may wonder how to actually start building your application. Thankfully, since Jetstream handles the configuration of all of the initial authentication and application scaffolding, you can get started right away!</p><p>After installing Jetstream, the code is yours. The templates belong to your application and can be modified as you see fit. Jetstream is just a starting point. You do not need to worry about keeping your user interface "compatible" with future Jetstream releases because each Jetstream release is simply an entirely new iteration of the starter kit. In other words, Jetstream is not a package or administration dashboard that you will "update" in the future. It is a starter kit scaffolding for Laravel and, after it is installed, the templates are entirely yours to maintain.</p><div class="tip custom-block"><p class="custom-block-title">Livewire & Inertia</p><p>Before diving into Jetstream, you should be familiar with how to use <a href="https://livewire.laravel.com" target="_blank" rel="noreferrer">Laravel Livewire</a> or <a href="https://inertiajs.com" target="_blank" rel="noreferrer">Inertia</a>. Jetstream relies heavily on these technologies to provide a first-class user and developer experience.</p></div><h2 id="application-dashboard" tabindex="-1">Application Dashboard <a class="header-anchor" href="#application-dashboard" aria-label="Permalink to "Application Dashboard""></a></h2><p>After authenticating with your application, you will be redirected to the <code>/dashboard</code> route. This route is the home / dashboard screen of your application. When you are using the Livewire stack, this page is rendered by the <code>resources/views/dashboard.blade.php</code> Blade template. When using the Inertia stack, the screen is rendered using the <code>resources/js/Pages/Dashboard.vue</code> component.</p><p>If you open the dashboard template / component for your application, you will see that it extends the application's primary "layout" component. This layout defines the overall look and feel of the interior of your application. When using Livewire, this layout is defined by the <code>resources/views/layouts/app.blade.php</code> template and rendered via the <code>App\View\Components\AppLayout</code> component class. When using Inertia, your application layout is defined by the <code>resources/js/Layouts/AppLayout.vue</code> component.</p><p>Once you have familiarized yourself with the dashboard and application layout templates, feel free to start editing them. For example, you will probably want to remove the "welcome" component that is rendered on your application dashboard. To do so, you may delete it from your dashboard template. Next, you're free to write the HTML needed to build your application. Remember, Jetstream uses the powerful Tailwind CSS framework, so be sure to learn more about Tailwind by consulting the <a href="https://tailwindcss.com/docs" target="_blank" rel="noreferrer">Tailwind documentation</a>.</p><h3 id="adding-additional-pages" tabindex="-1">Adding Additional Pages <a class="header-anchor" href="#adding-additional-pages" aria-label="Permalink to "Adding Additional Pages""></a></h3><p>By default, Jetstream's top navigation menu includes a link to the application dashboard. Of course, you are free to edit this navigation menu to add links to other pages that will be available within your application. When using Livewire, the navigation menu is defined by the <code>resources/views/navigation-menu.blade.php</code> Blade template. When using Inertia, the navigation menu is defined within the <code>resources/js/Layouts/AppLayout.vue</code> component.</p><h2 id="user-profile" tabindex="-1">User Profile <a class="header-anchor" href="#user-profile" aria-label="Permalink to "User Profile""></a></h2><p>When building a Jetstream application, it's likely that you will need to add your own forms and panels to the user profile management screen. By default, the user's profile screen contains panels to update the user's contact information, password, manage their two-factor authentication settings, and more. However, you're free to add your own additional panels to this page. To do so, you may simply edit the templates that define the page.</p><p>When using Livewire, the user's profile management screen is defined by the <code>resources/views/profile/show.blade.php</code> Blade template. When using Inertia, this screen is rendered by the <code>resources/js/Pages/Profile/Show.vue</code> component. To add additional panels or forms to the user profile, you may simply edit these templates as necessary for your application.</p><h2 id="team-management" tabindex="-1">Team Management <a class="header-anchor" href="#team-management" aria-label="Permalink to "Team Management""></a></h2><p>You may also need to add additional forms and panels to the team management screens rendered by Jetstream. These include the "team settings" screen for managing existing teams as well as the "create team" screen that is rendered when a user is creating a new team.</p><h3 id="create-team-screen" tabindex="-1">Create Team Screen <a class="header-anchor" href="#create-team-screen" aria-label="Permalink to "Create Team Screen""></a></h3><p>When team support is enabled, Jetstream includes a screen that allows users to create new teams. You are free to add additional form fields to the form contained within this screen. Any additional form fields you add will be passed into Jetstream's <code>App\Actions\Jetstream\CreateTeam</code> action via the <code>$input</code> argument.</p><p>When using Livewire, the team creation screen is defined by the <code>resources/views/teams/create.blade.php</code> Blade template. When using Inertia, this screen is rendered by the <code>resources/js/Pages/Teams/Create.vue</code> component.</p><h3 id="team-settings-screen" tabindex="-1">Team Settings Screen <a class="header-anchor" href="#team-settings-screen" aria-label="Permalink to "Team Settings Screen""></a></h3><p>When team support is enabled, Jetstream includes a screen that allows users to manage the settings for their existing teams, such as changing the team name or inviting additional team members. You're free to add your own additional panels to these pages. To do so, you may simply edit the templates that define the page.</p><p>When using Livewire, the team settings screen is defined by the <code>resources/views/teams/show.blade.php</code> Blade template. When using Inertia, this screen is rendered by the <code>resources/js/Pages/Teams/Show.vue</code> component.</p><h2 id="banner-alerts" tabindex="-1">Banner Alerts <a class="header-anchor" href="#banner-alerts" aria-label="Permalink to "Banner Alerts""></a></h2><p>Jetstream includes a notification banner which can be displayed at the top of your application's UI.</p><p>If you are using the Livewire stack, your application will contain the banner component at <code>resources/views/components/banner.blade.php</code>. If you are using the Inertia stack, your banner component will be contained within the <code>resources/js/Components/Banner.vue</code> Vue component.</p><p>To instruct Jetstream to display the banner, you must flash a <code>flash.banner</code> message to the session. In addition to the banner message, you may also instruct Jetstream to display the banner with a <code>success</code> style or a <code>danger</code> style:</p><div class="language-php"><button title="Copy Code" class="copy"></button><span class="lang">php</span><pre class="shiki css-variables"><code><span class="line"><span style="color:var(--shiki-color-text);">$request</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">session</span><span style="color:var(--shiki-token-punctuation);">()</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">flash</span><span style="color:var(--shiki-token-punctuation);">(</span><span style="color:var(--shiki-token-string-expression);">'flash.banner'</span><span style="color:var(--shiki-token-punctuation);">,</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-string-expression);">'Yay it works!'</span><span style="color:var(--shiki-token-punctuation);">)</span><span style="color:var(--shiki-color-text);">;</span></span> <span class="line"><span style="color:var(--shiki-color-text);">$request</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">session</span><span style="color:var(--shiki-token-punctuation);">()</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">flash</span><span style="color:var(--shiki-token-punctuation);">(</span><span style="color:var(--shiki-token-string-expression);">'flash.bannerStyle'</span><span style="color:var(--shiki-token-punctuation);">,</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-string-expression);">'success'</span><span style="color:var(--shiki-token-punctuation);">)</span><span style="color:var(--shiki-color-text);">;</span></span> <span class="line"></span> <span class="line"><span style="color:var(--shiki-token-keyword);">return</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">redirect</span><span style="color:var(--shiki-token-punctuation);">(</span><span style="color:var(--shiki-token-string-expression);">'/'</span><span style="color:var(--shiki-token-punctuation);">)</span><span style="color:var(--shiki-color-text);">;</span></span></code></pre></div><p>You may also instruct Jetstream to display the banner by invoking the <code>banner</code>, <code>warningBanner</code>, or <code>dangerBanner</code> methods on a redirect response instance:</p><div class="language-php"><button title="Copy Code" class="copy"></button><span class="lang">php</span><pre class="shiki css-variables"><code><span class="line"><span style="color:var(--shiki-token-keyword);">return</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">redirect</span><span style="color:var(--shiki-token-punctuation);">()</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">route</span><span style="color:var(--shiki-token-punctuation);">(</span><span style="color:var(--shiki-token-string-expression);">'subscriptions'</span><span style="color:var(--shiki-token-punctuation);">)</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">banner</span><span style="color:var(--shiki-token-punctuation);">(</span><span style="color:var(--shiki-token-string-expression);">'Subscription created successfully.'</span><span style="color:var(--shiki-token-punctuation);">)</span><span style="color:var(--shiki-color-text);">;</span></span> <span class="line"><span style="color:var(--shiki-token-keyword);">return</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">redirect</span><span style="color:var(--shiki-token-punctuation);">()</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">route</span><span style="color:var(--shiki-token-punctuation);">(</span><span style="color:var(--shiki-token-string-expression);">'subscriptions'</span><span style="color:var(--shiki-token-punctuation);">)</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">warningBanner</span><span style="color:var(--shiki-token-punctuation);">(</span><span style="color:var(--shiki-token-string-expression);">'Subscription pending approval.'</span><span style="color:var(--shiki-token-punctuation);">)</span><span style="color:var(--shiki-color-text);">;</span></span> <span class="line"><span style="color:var(--shiki-token-keyword);">return</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">redirect</span><span style="color:var(--shiki-token-punctuation);">()</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">route</span><span style="color:var(--shiki-token-punctuation);">(</span><span style="color:var(--shiki-token-string-expression);">'subscriptions'</span><span style="color:var(--shiki-token-punctuation);">)</span><span style="color:var(--shiki-token-keyword);">-></span><span style="color:var(--shiki-token-function);">dangerBanner</span><span style="color:var(--shiki-token-punctuation);">(</span><span style="color:var(--shiki-token-string-expression);">'Subscription cancellation failed.'</span><span style="color:var(--shiki-token-punctuation);">)</span><span style="color:var(--shiki-color-text);">;</span></span></code></pre></div></div></div></div><footer class="divide-y divide-gray-200 dark:divide-gray-700"><div class="gap-6 flex justify-between py-6"><a class="font-semibold group flex items-center text-base space-x-2" href="/concept-overview.html"><span class="text-gray-500 group-hover:text-gray-600">←</span><span class="text-sm text-gray-500 group-hover:text-gray-700"> Concept Overview</span><span class="text-gray-500 group-hover:text-gray-600"></span></a><a class="font-semibold group flex items-center text-base space-x-2 ml-auto" href="/features/api.html"><span class="text-gray-500 group-hover:text-gray-600"></span><span class="text-sm text-gray-500 group-hover:text-gray-700"> API</span><span class="text-gray-500 group-hover:text-gray-600">→</span></a></div></footer><div class="fixed z-20 top-[3.3rem] bottom-0 right-[max(0px,calc(50%-45rem))] w-[19.5rem] py-10 overflow-y-auto hidden xl:block"><div class="px-8"><h2 class="aside-header font-bold text-sm text-gray-600 dark:text-gray-400"> On this page </h2><div><div class="aside"><nav class="mt-4"><ul></ul></nav></div></div></div></div></div></div></div></div></div></div> <script>window.__VP_HASH_MAP__=JSON.parse("{\"concept-overview.md\":\"9071f841\",\"features_teams.md\":\"1fb70728\",\"features_two-factor-authentication.md\":\"780b4998\",\"index.md\":\"ea4aa43c\",\"features_registration.md\":\"b9f8f560\",\"features_profile-management.md\":\"1282ba69\",\"introduction.md\":\"4a203c75\",\"stacks_index.md\":\"e9741a5b\",\"installation.md\":\"3e7d6f51\",\"building-your-app.md\":\"301eafa7\",\"features_api.md\":\"fc165500\",\"features_browser-sessions.md\":\"e60acd88\",\"features_password-update.md\":\"364100b0\",\"features_authentication.md\":\"404050a2\",\"features_password-confirmation.md\":\"249125b1\",\"stacks_inertia.md\":\"fa06f7e3\",\"features_index.md\":\"afce1f65\",\"stacks_livewire.md\":\"8ba5c068\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Laravel Jetstream\",\"description\":\"Beautifully designed application scaffolding for Laravel\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":{\"light\":\"/logo.svg\",\"dark\":\"/logo-dark.svg\"},\"nav\":[{\"text\":\"GitHub\",\"link\":\"https://github.com/laravel/jetstream\"}],\"versions\":[{\"text\":\"v5.x\",\"link\":\"https://jetstream.laravel.com\",\"current\":true},{\"text\":\"v4.x\",\"link\":\"https://github.com/laravel/jetstream-docs/tree/4.x\"},{\"text\":\"v3.x\",\"link\":\"https://github.com/laravel/jetstream-docs/tree/3.x\"},{\"text\":\"v2.x\",\"link\":\"https://github.com/laravel/jetstream-docs/tree/2.x\"},{\"text\":\"v1.x\",\"link\":\"https://github.com/laravel/jetstream-docs/tree/1.x\"}],\"sidebar\":[{\"text\":\"Getting Started\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/introduction.html\"},{\"text\":\"Installation\",\"link\":\"/installation.html\"},{\"text\":\"Concept Overview\",\"link\":\"/concept-overview.html\"},{\"text\":\"Building Your App\",\"link\":\"/building-your-app.html\"}]},{\"text\":\"Features\",\"items\":[{\"text\":\"API\",\"link\":\"/features/api.html\"},{\"text\":\"Authentication\",\"link\":\"/features/authentication.html\"},{\"text\":\"Registration\",\"link\":\"/features/registration.html\"},{\"text\":\"Profile Management\",\"link\":\"/features/profile-management.html\"},{\"text\":\"Password Update\",\"link\":\"/features/password-update.html\"},{\"text\":\"Password Confirmation\",\"link\":\"/features/password-confirmation.html\"},{\"text\":\"Two Factor Authentication\",\"link\":\"/features/two-factor-authentication.html\"},{\"text\":\"Browser Sessions\",\"link\":\"/features/browser-sessions.html\"},{\"text\":\"Teams\",\"link\":\"/features/teams.html\"}]},{\"text\":\"Stack Features\",\"items\":[{\"text\":\"Livewire\",\"link\":\"/stacks/livewire.html\"},{\"text\":\"Inertia\",\"link\":\"/stacks/inertia.html\"}]}],\"search\":{\"provider\":\"local\",\"options\":{\"placeholder\":\"Search Jetstream Docs...\",\"miniSearch\":{}}}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script> </body> </html>