Laravel 12: Starter-Kity z React, Vue i Tailwind 4 – wszystko, co musisz wiedzieć

Autor Kamil Ćwiertnia Laravel, PHP laravel komponenty ui 0 Komentarzy

Laravel 12 to coś więcej niż numer wersji – wprowadzenie

W lutym 2025 światło dzienne ujrzała kolejna wersja jednego z najpopularniejszych frameworków PHP – Laravel 12. Choć na pierwszy rzut oka może wydawać się jedynie kolejną numerowaną aktualizacją, to w rzeczywistości jest to kamień milowy w kierunku nowoczesnego developmentu frontendowo‑backendowego w środowisku Laravel.

Laravel 12 to nie tylko poprawki bezpieczeństwa i usprawnienia frameworka, ale przede wszystkim duży krok w stronę aplikacji typu SPA (Single Page Application), jeszcze głębsza integracja z JavaScriptem oraz uproszczenie startu projektów dzięki nowym starter‑kitom opartym o React, Vue i Livewire.

To wydanie łączy w sobie najnowsze technologie frontendowe (m.in. Tailwind CSS 4, Vite 6, shadcn/ui) z filozofią prostoty, z której Laravel słynie od lat. Użytkownicy otrzymali do dyspozycji odświeżone narzędzia startowe – Breeze 2.0 i Jetstream 3.0 – które pozwalają błyskawicznie rozpocząć pracę nad panelem użytkownika, systemem logowania, a nawet pełnoprawnym SPA.

W tym artykule krok po kroku przyjrzymy się najważniejszym zmianom w Laravel 12 – zarówno od strony technicznej, jak i praktycznej. Dowiesz się:

jakie nowe starter-kity są dostępne i jak z nich korzystać,
czym jest shadcn/ui i dlaczego Laravel porzucił Bootstrap,
co nowego oferuje Tailwind CSS 4,
jak wygląda domyślna integracja z React i Vue,
oraz w jaki sposób nowy Laravel wspiera szybki, nowoczesny development.

Zacznijmy od zmian w starter-kitach – czyli Breeze i Jetstream, które w wersji 12 przeszły gruntowną metamorfozę.

Nowe starter-kity w Laravel 12: Breeze 2.0 i Jetstream 3.0

Jedną z najbardziej zauważalnych nowości w Laravel 12 są odświeżone starter-kity – Breeze i Jetstream. Te dwa narzędzia pełnią kluczową rolę dla deweloperów rozpoczynających nowy projekt. Ich zadaniem jest zapewnienie kompletnego środowiska startowego z uwierzytelnianiem, routingiem, layoutem i stylami – bez konieczności ręcznej konfiguracji.

Laravel 12 wprowadza:

Breeze 2.0 – lekki, minimalistyczny starter, idealny dla małych projektów lub niestandardowych dashboardów,
Jetstream 3.0 – bardziej rozbudowany zestaw dla aplikacji wymagających pełnego zarządzania kontem użytkownika, sesjami, API i dwuetapową weryfikacją.

⚡ Laravel Breeze 2.0 – teraz z React, Vue i Livewire

Laravel Breeze w wersji 2.0 oferuje teraz aż trzy pełnoprawne warianty:

React – zbudowany w oparciu o React 19, Vite 6 i Tailwind 4,
Vue – minimalistyczna wersja SPA z Vue 3 i Pinia,
Blade + Livewire – opcja dla backend developerów preferujących podejście full PHP.

W każdej wersji:

preinstalowany jest Tailwind CSS 4,
komponenty frontendowe korzystają z shadcn/ui (więcej o tym później),
routing oparty jest o domyślne RESTowe ścieżki Laravel (/login, /register, /dashboard).

Instalacja Breeze React:

laravel new my-app --kit=react

Instalacja Breeze Vue:

laravel new my-app --kit=vue

🧰 Laravel Jetstream 3.0 – kompletny system zarządzania kontem

Jetstream w Laravel 12 doczekał się znaczącego uproszczenia i przebudowy:

odchudzony interfejs,
uproszczone API tokens,
pełne wsparcie dla SSR (server-side rendering),
domyślna integracja z Inertia.js (zarówno Vue jak i React),
lepsze zarządzanie sesjami i profilem użytkownika,
gotowy szkielet do wdrożenia systemu teamów (Teams).

Instalacja Jetstream z React:

composer require laravel/jetstream
php artisan jetstream:install inertia --react
npm install && npm run dev

Instalacja Jetstream z Vue:

php artisan jetstream:install inertia --vue

Dzięki tym aktualizacjom Breeze i Jetstream stały się jeszcze bardziej elastyczne, lekkie i dostosowane do nowoczesnych wymagań frontendowych. Laravel 12 stawia na pełną integrację z nowoczesnym frontendem, jednocześnie pozostawiając miejsce dla developerów backendowych preferujących klasyczne podejście Blade + Livewire.

W kolejnym punkcie przyjrzymy się, czym dokładnie jest shadcn/ui i dlaczego Laravel zdecydował się uczynić go domyślną biblioteką komponentów UI.

Co to jest `shadcn/ui` i dlaczego Laravel na niego przeszedł?

W Laravel 12 domyślnym systemem komponentów UI – szczególnie w starter-kitach z React i Vue – stał się shadcn/ui. To istotna zmiana, ponieważ Laravel w naturalny sposób odchodzi od klasycznych frameworków CSS (jak Bootstrap) na rzecz modularnego, nowoczesnego, w pełni zgodnego z Tailwind CSS rozwiązania.

Ale czym właściwie jest shadcn/ui i dlaczego warto się nim zainteresować?

🧩 Czym jest `shadcn/ui`?

shadcn/ui to open-source’owy zestaw gotowych komponentów UI (przycisków, modali, dropdownów, kart, alertów itp.) zbudowanych w oparciu o:

Tailwind CSS – nie zawiera żadnych predefiniowanych klas CSS, wszystko stylowane jest utility-classes,
Radix UI – niskopoziomowa biblioteka headless dla React i Vue,
TypeScript i dostępność (a11y) – komponenty są pisane z dbałością o semantykę, UX i pełne wsparcie dla klawiatury i czytników ekranu.

🚀 Co wyróżnia `shadcn/ui`?

Zero CSS w paczce – wszystkie style są generowane przy użyciu Tailwind i klas narzędziowych.
Pełna kontrola – instalujesz komponenty pojedynczo do swojego projektu (nie jako globalną paczkę).
Nowoczesny wygląd – design inspirowany przez Vercel, Stripe, Linear.
Ekosystem open-source – łatwo dodać kolejne komponenty przez CLI lub ręcznie.

💻 Przykład – komponent przycisku

// components/ui/button.tsx
import { cn } from "@/lib/utils"

export function Button({ className, ...props }) {
  return (
    <button className={cn("px-4 py-2 text-sm font-medium rounded-md bg-primary text-white hover:bg-primary/90", className)} {...props} />
  )
}

Dzięki cn() możesz dynamicznie łączyć klasy Tailwind, a stylowanie jest w 100% zgodne z podejściem utility-first.

📦 Jak dodać `shadcn/ui` do projektu Laravel (React)?

Po zainstalowaniu starter-kitu React:

npx shadcn-ui@latest init

Następnie wybierasz domyślny folder komponentów (components/ui) i możesz dodawać np.:

npx shadcn-ui@latest add button

🧠 Dlaczego Laravel wybrał `shadcn/ui`?

Naturalna integracja z Tailwind CSS 4
Lepsze dopasowanie do nowoczesnego ekosystemu React/Vue
Brak zbędnego CSS i pełna konfigurowalność
Podejście „design as code” – komponenty są częścią kodu źródłowego

Dzięki shadcn/ui, Laravel 12 daje frontend developerom nowoczesne, lekkie i elastyczne narzędzie do budowania UI – bez potrzeby sięgania po gotowe frameworki jak Bootstrap, Material UI czy Ant Design.

W kolejnym punkcie przyjrzymy się bliżej Tailwind CSS 4, który jest teraz domyślnym silnikiem stylów we wszystkich starter-kitach Laravel 12.

Tailwind CSS 4 w Laravel 12 – nowy domyślny silnik stylów

Wraz z premierą Laravel 12, wszystkie oficjalne starter-kity (Breeze, Jetstream) domyślnie wykorzystują Tailwind CSS 4, najnowszą wersję popularnego frameworka utility-first. To oznacza, że Laravel całkowicie porzuca starsze systemy stylów, takie jak Bootstrap czy Bulma, i w pełni inwestuje w Tailwind jako standard dla nowoczesnych aplikacji frontendowych.

🆕 Co nowego w Tailwind CSS 4?

1. JIT 2.0 (Just-In-Time)

Nowy mechanizm budowania klas w locie
Znacznie szybsze kompilowanie stylów
Mniejszy rozmiar CSS (nawet <10KB przy budowie produkcyjnej)

2. Layered CSS output

Tailwind 4 wprowadza warstwy (@layer) jako pierwszoplanowy mechanizm strukturyzowania stylów
Ułatwia nadpisywanie i organizację dużych projektów

3. Lepsze wsparcie dla dark mode

Domyślna obsługa klas dark: i media w sposób uproszczony
Pełna zgodność z systemami operacyjnymi i preferencjami użytkownika

4. Uproszczony system pluginów

Instalacja dodatkowych rozszerzeń (np. forms, typography, aspect-ratio) odbywa się przez prostszy interfejs

🛠 Jak wygląda domyślna konfiguracja w Laravel 12?

Laravel po zainstalowaniu starter-kitu tworzy domyślnie:

tailwind.config.js
postcss.config.js
vite.config.js
strukturę plików w resources/css

Fragment tailwind.config.js:

module.exports = {
  content: [
    './resources/**/*.{js,ts,jsx,tsx,vue,blade.php}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
};

⚡ Integracja z Vite 6

Laravel 12 wykorzystuje domyślnie Vite 6, który oferuje:

ultraszybkie HMR (hot-module reload),
pełne wsparcie dla JSX, Vue, TypeScript,
wbudowaną integrację z Tailwind.

Przykład importu CSS:

// resources/js/app.jsx
import '../css/app.css';

🎨 Przykład klas Tailwind 4

<button class="px-4 py-2 text-sm font-semibold bg-primary text-white rounded hover:bg-primary/90">
  Zaloguj się
</button>

Wszystkie style są natywne, lekkie i zgodne z design systemem shadcn/ui.

Tailwind CSS 4 jest nie tylko szybki i lekki, ale także doskonale wpisuje się w filozofię Laravela: prostota, rozszerzalność i kontrola. W kolejnym punkcie przejdziemy do praktyki i zobaczymy, jak wygląda gotowe SPA zbudowane na React lub Vue w Laravel 12.

Laravel + React/Vue + Inertia.js – gotowe SPA bez konfiguracji

Laravel 12 pozycjonuje się dziś nie tylko jako backendowy framework PHP, ale również jako solidna baza pod nowoczesne Single Page Applications (SPA). Dzięki starter-kitom Breeze i Jetstream, które oferują gotowe warianty dla React i Vue, można stworzyć pełnoprawne SPA w kilka minut – bez mozolnej konfiguracji Webpacka, Vite, routingu czy middleware’ów.

Co więcej, cały stack oparty jest o Inertia.js – bibliotekę, która łączy Laravel (PHP) i React/Vue (JS) w jedną spójną aplikację, eliminując potrzebę korzystania z klasycznego API REST.

⚛️ Laravel + React (Breeze lub Jetstream)

Po instalacji starter-kitu z React otrzymujesz:

Prekonfigurowany projekt z React 19 + Tailwind CSS 4 + shadcn/ui
Routing oparty na Inertia::render() (bez REST lub GraphQL)
Komponenty formularzy, layout, dashboard
Domyślny plik wejściowy: resources/js/app.jsx

Przykład renderowania komponentu:

// routes/web.php
Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
});

Przykład komponentu:

// resources/js/Pages/Dashboard.jsx
export default function Dashboard() {
  return <h1 className="text-2xl font-bold">Witaj w panelu</h1>;
}

🔁 Laravel + Vue

Działa analogicznie do Reacta – zamiast JSX używasz komponentów .vue:

Plik wejściowy: resources/js/app.js
Routing również przez Inertia::render()
Obsługa Pinia (opcjonalnie) i dynamicznych komponentów

📦 Co dostajesz out-of-the-box?

Routing bez konieczności budowy API (Inertia pośredniczy)
Gotowe widoki logowania, rejestracji, dashboardu
Integracja z Tailwind 4 i shadcn/ui (React)
Form validation przez Laravel + przekazywanie błędów do komponentów frontend

Przykład formularza rejestracji:

<form onSubmit={submit} className="space-y-4">
  <input name="email" className="input" />
  <input name="password" type="password" className="input" />
  <button type="submit" className="btn btn-primary">Zarejestruj</button>
</form>

🚀 Gotowe SPA w 5 minut

Laravel 12 pozwala rozpocząć projekt typu SPA błyskawicznie:

laravel new my-app --kit=react
cd my-app
php artisan migrate
npm install && npm run dev

Dzięki integracji z Inertia.js nie musisz budować osobnego API. Laravel odpowiada za routing, middleware, walidację, sesje – a frontend (React lub Vue) za interfejs użytkownika.

W kolejnym punkcie przyjrzymy się bliżej nowościom w Vite 6 – narzędziu, które napędza frontendowe środowisko developerskie Laravel 12.

Laravel Vite 6 – jeszcze lepsza integracja z JavaScript i TypeScript

W Laravel 12 domyślnym narzędziem do budowy frontendowych zasobów jest Vite 6 – superszybki bundler oparty na ESM (native JavaScript modules), który zastąpił Webpacka już w Laravel 9. Nowa wersja Vite to kolejny krok naprzód w ergonomii pracy z komponentami frontendowymi – szczególnie w połączeniu z React, Vue i Tailwind CSS.

🚀 Co nowego w Vite 6?

1. Jeszcze szybszy HMR (Hot Module Replacement)

Błyskawiczne odświeżanie komponentów w przeglądarce
Nawet przy większych projektach czas przebudowy to <50ms

2. Wsparcie dla JSX, TS, Vue 3 – bez dodatkowej konfiguracji

Automatyczne wykrywanie frameworka
Kompatybilność z React 19 i Vue 3
Obsługa TypeScript i plików .tsx, .vue, .ts z marszu

3. Integracja z Tailwind i PostCSS 8+

Vite i Tailwind tworzą perfekcyjny duet w Laravel 12

⚙️ Konfiguracja w Laravel 12

Domyślny plik vite.config.js wygląda następująco:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    laravel({ input: ['resources/css/app.css', 'resources/js/app.jsx'], refresh: true }),
    react(),
  ],
});

Dla Vue zamieniasz react() na vue() z pakietu @vitejs/plugin-vue.

📦 Import komponentów bez aliasów

Laravel 12 wspiera strukturę komponentów z aliasem @:

import Layout from '@/Layouts/MainLayout';
import Button from '@/components/ui/button';

Alias @ jest domyślnie zmapowany na resources/js/, co ułatwia nawigację w kodzie i eliminuje problem długich ścieżek względnych.

🔧 Uruchomienie środowiska developerskiego

npm run dev

Domyślnie otwiera serwer Vite na porcie 5173, który integruje się z backendem Laravel na localhost:8000. HMR działa natychmiast po zapisaniu pliku – bez konieczności odświeżania przeglądarki.

📁 Struktura domyślnego frontu

resources/
├── css/
│   └── app.css
├── js/
│   ├── app.jsx
│   ├── Pages/
│   ├── Layouts/
│   └── components/

Taki układ pozwala na szybkie skalowanie aplikacji z podziałem na layouty, strony i komponenty UI.

Vite 6 sprawia, że Laravel 12 staje się jeszcze bardziej developer-friendly, szczególnie dla osób pracujących z nowoczesnymi technologiami frontendowymi. W kolejnym punkcie pokażemy, jak w kilka minut uruchomić pełne środowisko startowe z Laravel 12, Reactem i Tailwindem.

Jak szybko uruchomić nowe środowisko Laravel 12?

Jedną z największych zalet Laravel 12 jest błyskawiczny start nowego projektu – niezależnie od tego, czy wybierasz React, Vue, czy Livewire. Dzięki gotowym starter-kitom, Tailwindowi 4, Vite 6 i shadcn/ui, masz do dyspozycji kompletne środowisko do pracy w mniej niż 5 minut.

Poniżej przedstawiamy prosty krok po kroku proces uruchomienia projektu z Laravel 12 i starter-kitem React.

⚙️ Krok 1: Instalacja nowej aplikacji Laravel

Jeśli masz zainstalowany Laravel Installer:

laravel new my-app --kit=react

Alternatywnie przez Composer:

composer create-project laravel/laravel my-app
cd my-app
php artisan breeze:install react

📦 Krok 2: Instalacja zależności JavaScript

npm install

🚀 Krok 3: Kompilacja assetów i uruchomienie środowiska developerskiego

npm run dev
php artisan migrate
php artisan serve

Teraz Twoja aplikacja będzie dostępna pod http://localhost:8000, a frontend z HMR działa przez Vite na localhost:5173.

📁 Co zawiera gotowy starter-kit React?

Zintegrowany React 19 + Vite 6 + Tailwind CSS 4
Komponenty shadcn/ui w folderze resources/js/components/ui/
Strony logowania, rejestracji, dashboard (resources/js/Pages/)
Layout bazowy (resources/js/Layouts/AuthenticatedLayout.jsx)

🧪 Gotowa aplikacja w kilka minut

Laravel 12 pozwala każdemu – od juniora po architekta – uruchomić nowoczesne SPA z backendem PHP i frontendem React/Vue bez potrzeby tworzenia API, konfiguracji Webpacka, proxy czy struktury katalogów. Wszystko jest na swoim miejscu – gotowe do rozwoju.

W kolejnym punkcie omówimy, dla kogo ta zmiana jest najbardziej korzystna, a kto może wciąż preferować bardziej klasyczne podejście do projektów Laravelowych.

Dla kogo jest Laravel 12 i jego nowe podejście do developmentu?

Laravel 12 wprowadza wiele nowoczesnych usprawnień, ale nie każdy projekt i nie każdy zespół musi (lub powinien) z nich korzystać. To wydanie jest wyraźnym ukłonem w stronę frontend developerów i zespołów tworzących aplikacje typu SPA, ale pozostawia też pole manewru dla tych, którzy preferują klasyczne podejście Blade + PHP.

Poniżej prezentujemy, dla kogo Laravel 12 będzie najlepszym wyborem – i dlaczego.

✅ Laravel 12 jest idealny dla:

🧑‍💻 Frontendowców i zespołów JS-first

Pracujesz z React lub Vue?
Znasz Tailwind CSS i nie chcesz korzystać z Bootstrap?
Lubisz Inertia.js i nie chcesz budować API?

Laravel 12 daje Ci kompletne SPA gotowe do działania z aktualnym stackiem JavaScript.

🧪 Twórców startupów i MVP

Breeze lub Jetstream pozwalają uruchomić aplikację z logowaniem, dashboardem i layoutem w kilka minut.
Dla MVP to ogromna oszczędność czasu – możesz skupić się na funkcjonalności, nie konfiguracji.

🧑‍🎓 Nowych programistów uczących się Laravel

Dzięki prostocie i aktualnym standardom Laravel 12 to idealna baza do nauki Reacta + PHP + Tailwind + Vite.

🏢 Firm i agencji tworzących panele admina i aplikacje B2B

Z Laravel 12 można szybko tworzyć nowoczesne systemy wewnętrzne i panele klientów
shadcn/ui eliminuje potrzebę tworzenia własnego systemu komponentów UI

⚠️ Kiedy warto się wstrzymać?

🔹 Jeśli tworzysz klasyczną stronę z treścią

Proste strony informacyjne, blogi, strony statyczne – Laravel 12 jest tu „przerostem formy nad treścią”

🔹 Jeśli Twój zespół nie zna JavaScript (TSX, JSX, Inertia, Vite)

Lepiej pozostać przy Blade + Livewire lub Laravel 10/11 z Bootstrapem

🔹 Gdy zależy Ci na pełnej kontroli nad warstwą API (np. z GraphQL)

Laravel 12 z Inertia to monolit – nie dla headless CMS czy rozdzielonych systemów frontend/backend

Laravel 12 to krok w stronę nowoczesnego developmentu – ale z zachowaniem elastyczności. Nie musisz porzucać Blade, by korzystać z dobrodziejstw frameworka. Jednak jeśli chcesz tworzyć dynamiczne, wydajne i dobrze wyglądające aplikacje – Laravel 12 z React/Vue + shadcn/ui to prawdopodobnie najlepszy punkt wyjścia.

W ostatnim punkcie podsumujemy wszystkie zmiany i przedstawimy rekomendacje wdrożeniowe.

Laravel 12 – podsumowanie i rekomendacje

Laravel 12 to wydanie, które nie tylko aktualizuje framework do nowych technologii, ale też zmienia sposób, w jaki zaczynamy budowę nowoczesnych aplikacji.
Dzięki starter-kitom z Reactem, Vue, Livewire, Tailwind CSS 4, shadcn/ui i Vite 6 – Laravel 12 staje się frameworkiem kompletnym zarówno dla backendowców, jak i frontendowców.

🔑 Najważniejsze zmiany w skrócie:

Breeze 2.0 i Jetstream 3.0 z obsługą React, Vue i Livewire
Tailwind CSS 4 jako domyślny silnik stylów
shadcn/ui jako nowy standard UI w Laravel (React/Vue)
Vite 6 jako superszybki bundler do TypeScript/JSX/SPA
Inertia.js jako most pomiędzy PHP i frontendem

✅ Co zyskał Laravel 12?

Dużo prostszy start nowych projektów
Kompletne SPA w kilka minut
Świetna integracja backendu i frontendu w jednym ekosystemie
Znaczne uproszczenie konfiguracji i infrastruktury

⚠️ Na co zwrócić uwagę przy wdrożeniu?

Unikaj mieszania podejść (SPA + klasyczne Blade) bez strategii
Zespół powinien znać podstawy Vite, Tailwind i React/Vue, by w pełni wykorzystać możliwości Laravel 12
Warto używać dedykowanego starter-kita zamiast własnej konfiguracji (bo to oszczędność czasu i mniej błędów)

🧠 Rekomendacje końcowe:

Chcesz budować nowoczesny panel admina, SaaS lub MVP? Laravel 12 + React + Tailwind + Inertia + shadcn/ui to idealna baza.
Pracujesz z zespołem JS/TS? Laravel 12 doskonale łączy światy PHP i frontendu.
Potrzebujesz szybko uruchomić logowanie i dashboard? Breeze/Jetstream dają gotowe rozwiązania w kilka minut.

Laravel 12 to logiczny i bardzo udany krok naprzód. Jest lekki, szybki, modularny i elastyczny. Daje wybór, nie narzuca stylu pracy – i właśnie dlatego warto się nim zainteresować.

Laravel 12: Starter-Kity z React, Vue i Tailwind 4 – wszystko, co musisz wiedzieć