Ona Lily katika programu halisi

Miradi saba ya mifano iliyokamilika inaonyesha jinsi ya kuchukua vipengele visivyo na mwonekano, kuviongezea mapambo, na kuchapisha tovuti halisi. Chagua mfumo wa kazi unaotumia.

Programu za maonyesho zenye CSS kamili na uelekezaji

HTML JavaScript

Kurasa za HTML za kawaida, JavaScript safi, hakuna zana za ujenzi. Inafaa kwenye mwenyeji yeyote wa tuli — bora kwa tovuti ndogo na uboreshaji wa taratibu.

→ Tazama kwenye GitHub

Svelte + SvelteKit

Programu ya SvelteKit 3 inayotumia runes za Svelte 5. Njia za vipengele, uelekezaji wa faili, na storybook yenye mapambo ya kila kipengele.

→ Tazama kwenye GitHub

React + Next.js

Programu ya Next.js 16 inayoonyesha kila kipengele katika muktadha, ikiwa na TypeScript kote na kurasa za maonyesho kwa michoro ya mchanganyiko.

→ Tazama kwenye GitHub

Vue + Nuxt.js

Programu ya Nuxt 4. <script setup> na Composition API kwenye kila njia ya maonyesho.

→ Tazama kwenye GitHub

Angular + Analog

Programu ya Angular 22 + Analog.js. Uelekezaji wa faili, mawimbi, utambuzi wa mabadiliko bila zone, na uandaaji kamili wa awali wa SSG.

→ Tazama kwenye GitHub

Blazor Web

Programu ya Blazor Web yenye vipengele vya Razor. Inafaa seva na WebAssembly, ikiwa na .NET 10 kama msingi.

→ Tazama kwenye GitHub

Nunjucks + Eleventy

Tovuti ya Eleventy inayotumia makro ya Nunjucks. Bora kwa tovuti tuli zenye maudhui mengi zinazotaka mfumo halisi wa vipengele.

→ Tazama kwenye GitHub

Kila programu ya mifano ina umbo lilelile

Ili kuruka kati ya mifumo ya kazi kuhisi kuwa kawaida, kila programu ya mifano hutoa:

Njia ya karibu kwenye / inayoutambulisha mradi.
Faharasa ya vipengele kwenye /components inayoorodhesha kila kipengele.
Ukurasa wa maonyesho kwa kila kipengele kwenye /components/<component>.
CSS halisi — si tokeni za usanifu za kidhahania — ili uweze kunakili mitindo moja kwa moja.
Usogezaji wa kibodi unaofanya kazi na usimamizi wa umakini tangu mwanzo.

Unahitaji kuona jinsi kipengele kimoja kinavyopambwa?

Fungua programu husika ya mifano, nenda kwa /components/<name>, na unakili HTML na CSS kwenye mradi wako mwenyewe. Programu za mifano kwa makusudi hutumia CSS ya kawaida (au karibu ya kawaida) ili uweze kuzirekebisha kwa mfumo wowote unaoupendelea.

Unataka bila mwonekano badala yake?

Unganisha programu yoyote ya mifano na kifurushi chake cha bila mwonekano — hivyo huchapisha vipengele vilevile bila CSS yoyote, tayari kwa tokeni zako za usanifu.

Pitia orodha → Soma mwongozo wa usanidi