Kuckt Lily a richtegen Applikatiounen
Siwe ausgeschafft Beispillprojete weisen, wéi een d’Headless-Komponenten hëlt, Stylung dropleet an eng richteg Websäit verëffentlecht. Wielt de Framework, deen Dir benotzt.
Demo-Applikatioune mat vollem CSS a Routing
HTML JavaScript
Einfach HTML-Säiten, purt JavaScript, keng Build-Geschirer. Passt op all statesche Host — perfekt fir kleng Säiten a progressiv Verbesserung.
Svelte + SvelteKit
SvelteKit-3-Applikatioun, déi Svelte-5-Runen benotzt. Komponenteroutten, dateibaséiert Routing an e gestylte Storybook vun all Komponent.
React + Next.js
Next.js-16-Applikatioun, déi all Komponent am Kontext weist, mat TypeScript duerchgängeg an Demosäite fir zesummegesate Muster.
Vue + Nuxt.js
Nuxt-4-Applikatioun. <script setup> an d’Composition API op all Demoroute.
Angular + Analog
Angular-22- + Analog.js-Applikatioun. Dateibaséiert Routing, Signaler, zonelos Ännerungserkennung a voll SSG-Prerendering.
Blazor Web
Blazor-Web-Applikatioun mat Razor-Komponenten. Server- a WebAssembly-frëndlech, mat .NET 10 als Basis.
Nunjucks + Eleventy
Eleventy-Säit, déi Nunjucks-Makroen benotzt. Ideal fir inhaltsräich statesch Säiten, déi trotzdem e richtegt Komponentesystem wëllen.
All Beispillapplikatioun huet déiselwecht Form
Fir dass d’Sprangen tëscht Frameworken vertraut ausgesäit, bitt all Beispillapplikatioun:
- Eng Wëllkomroute op
/déi de Projet virstellt. - E Komponenteindex op
/componentsdeen all Komponent opzielt. - Eng Demosäit pro Komponent op
/components/<component>. - Richtege CSS — net abstrakt Design-Tokens — fir dass Dir Stiler direkt iwwerhuele kënnt.
- Funktionéierend Tastaturnavigatioun a Fokusverwaltung direkt aus der Këscht.
Wëllt Dir gesinn, wéi eng eenzel Komponent gestylt ass?
Mécht déi entspriechend Beispillapplikatioun op, gitt op
/components/<name>a kopéiert d’Markup an de CSS an Äre Projet. D’Beispillapplikatioune benotzen bewosst einfachen (oder bal einfachen) CSS, fir dass Dir se u all System upasse kënnt, dat Dir léiwer hutt.
Léiwer headless?
Kombinéiert all Beispillapplikatioun mam entspriechende Headless- Pakéit — dës verëffentleche déiselwecht Komponenten ouni CSS, prett fir Är eegen Design-Tokens.