నిజమైన యాప్‌లలో Lily చూడండి

ఏడు పూర్తి ఉదాహరణ ప్రాజెక్టులు హెడ్‌లెస్ భాగాలను తీసుకుని, శైలి జోడించి, నిజమైన వెబ్‌సైట్‌ను ఎలా షిప్ చేయాలో చూపుతాయి. మీరు ఉపయోగించే ఫ్రేమ్‌వర్క్ ఎంచుకోండి.

పూర్తి CSS మరియు రూటింగ్‌తో డెమో యాప్‌లు

HTML JavaScript

సాదా HTML పేజీలు, వనిల్లా JavaScript, బిల్డ్ సాధనాలు లేవు. ఏ స్టాటిక్ హోస్ట్‌లోనైనా ఇమిడిపోతుంది — చిన్న సైట్లు మరియు క్రమానుగత మెరుగుదలకు సరైనది.

→ GitHub లో చూడండి

Svelte + SvelteKit

Svelte 5 రూన్లను ఉపయోగించే SvelteKit 3 యాప్. భాగ మార్గాలు, ఫైల్-ఆధారిత రూటింగ్, మరియు ప్రతి భాగం యొక్క శైలి ఇచ్చిన స్టోరీబుక్.

→ GitHub లో చూడండి

React + Next.js

ప్రతి భాగాన్ని సందర్భంలో చూపే Next.js 16 యాప్, అంతటా TypeScript మరియు సంయుక్త నమూనాల కోసం డెమో పేజీలతో.

→ GitHub లో చూడండి

Vue + Nuxt.js

Nuxt 4 యాప్. <script setup> మరియు Composition API ప్రతి డెమో మార్గంలో.

→ GitHub లో చూడండి

Angular + Analog

Angular 22 + Analog.js యాప్. ఫైల్-ఆధారిత రూటింగ్, సిగ్నల్స్, జోన్-రహిత మార్పు గుర్తింపు, మరియు పూర్తి SSG ప్రీరెండరింగ్.

→ GitHub లో చూడండి

Blazor Web

Razor భాగాలతో Blazor Web యాప్. సర్వర్- మరియు WebAssembly-స్నేహపూర్వకం, .NET 10 బేస్‌లైన్‌తో.

→ GitHub లో చూడండి

Nunjucks + Eleventy

Nunjucks మాక్రోలను ఉపయోగించే Eleventy సైట్. ఇంకా నిజమైన భాగ వ్యవస్థ కావాలనుకునే కంటెంట్-భారీ స్టాటిక్ సైట్లకు అనువైనది.

→ GitHub లో చూడండి

ప్రతి ఉదాహరణ యాప్‌కు ఒకే ఆకారం ఉంటుంది

ఫ్రేమ్‌వర్కుల మధ్య దూకడం సుపరిచితంగా అనిపించేందుకు, ప్రతి ఉదాహరణ యాప్ అందిస్తుంది:

  • ఇక్కడ స్వాగత మార్గం / ఇది ప్రాజెక్టును పరిచయం చేస్తుంది.
  • ఇక్కడ భాగ సూచిక /components ఇది ప్రతి భాగాన్ని జాబితా చేస్తుంది.
  • ఇక్కడ ప్రతి భాగానికి ఒక డెమో పేజీ /components/<component>.
  • నిజమైన CSS — నైరూప్య డిజైన్ టోకెన్లు కాదు — కాబట్టి మీరు శైలులను నేరుగా అప్పు తీసుకోవచ్చు.
  • పెట్టె నుంచే పనిచేసే కీబోర్డ్ నావిగేషన్ మరియు ఫోకస్ నిర్వహణ.

ఒక్క భాగానికి శైలి ఎలా ఇచ్చారో చూడాలా?

సంబంధిత ఉదాహరణ యాప్ తెరవండి, ఇక్కడికి వెళ్ళండి /components/<name>మరియు మార్కప్, CSS ని మీ స్వంత ప్రాజెక్టులోకి కాపీ చేయండి. ఉదాహరణ యాప్‌లు ఉద్దేశపూర్వకంగా సాదా (లేదా దాదాపు సాదా) CSS ఉపయోగిస్తాయి, తద్వారా మీరు వాటిని మీరు ఇష్టపడే ఏ వ్యవస్థకైనా మలచుకోవచ్చు.

బదులుగా హెడ్‌లెస్ కావాలా?

ఏదైనా ఉదాహరణ యాప్‌ను దాని సంబంధిత హెడ్‌లెస్ ప్యాకేజీతో జత చేయండి — అవి అవే భాగాలను ఏ CSS లేకుండా ప్రచురిస్తాయి, మీ స్వంత డిజైన్ టోకెన్లకు సిద్ధంగా.

జాబితా బ్రౌజ్ చేయండి → సెటప్ గైడ్ చదవండి