Yakha Izixhumi ze-AI Yezimboni ngetimu ye-Solid Glass shadcn/ui

Okwenziwa yi-Solid Glass

Solid Glass iyitimu ebonakalayo ye-shadcn/ui, eyenzelwe amaphaneli e-AI ezimboni, amakhonsoli abasebenzisi, namadeshibhodi. Inikeza izindawo ezijiyile, ezinombala wentuthu ezibonakala ziqinile uma uzibuka ukude, bese ziveza ubunjalo bazo bengilazi ikakhulukazi emaphethelweni.

Ngokungafani nemiphumela yengilazi ewuketshezi, i-Solid Glass ayenzi ingemuva liphazamise umbhalo. Ingaphambili layo lisebenzisa indawo empunga engathathi hlangothi, engagobi, engagelezi, futhi engathathi umbala kokuqukethwe okungemuva. Ukubukeka kwayo kuvela emugqeni okhanyayo phezulu, emngceleni omncane, nasethunzini elingaphansi kwendawo.

sayithi esemthethweni ye-Solid Glass ibonisa le nto kuzo zonke izingxenye ezitholakalayo futhi ihlanganisa ikhasi elithi Create lokulungisa okuguquguqukayo kokubukeka.

Izici nezingxenye ezibalulekile

• Ishidi lesitayela elilodwa lisebenzisa itimu ezingxenyeni ze-shadcn/ui ngokusebenzisa ama-attribute nama-class e-data-slot asevele ekhona.
• Itimu ichaza amagama okuguquguquka e-shadcn/ui, okuhlanganisa ukujiya kwengilazi okuthathu, imibala, ukunyakaza, nesimo sayo esisodwa sokubukeka.
• Imodi emnyama iyona ndlela eyinhloko yokubukeka kwento, kodwa kukhona netimu ekhanyayo.
• Ikhasi elithi Create likuvumela ukuba ulungise ukujiya, umbala ogqamile, umbala weshadi, uhlobo, i-radius, umphetho, ne-blur, bese ukopisha i-CSS ewumphumela.
• I-registry inikeza izingxenye ze-Solid Glass ezifakekayo nge-shadcn CLI.

Izingxenye ze-Solid Glass uqobo zihlanganisa status-glyph, panel, tag, ne-dot-loader. Izingxenye eziqondiswe kuma-ejenti zihlanganisa turn-status, composer, tool-steps, diff-view, ask-card, context-ring, task-notice, ne-reasoning.

Faka itimu

1. Qala ngephrojekthi ye-shadcn/ui

Sebenzisa iphrojekthi ye-shadcn/ui esekelwe ku-React 19, Tailwind CSS 4, kanye nezingxenye ze-Base UI. Uma uqala phansi, yiqalise kanje:

npx shadcn@latest init

2. Faka ishidi lesitayela le-Solid Glass

Ungafaka ishidi lesitayela ku-registry esingathwe noma ngokuqondile ku-repository:

npx shadcn@latest add https://deeplethe.github.io/solid-glass/r/solid-glass.json
npx shadcn@latest add deeplethe/solid-glass/solid-glass

3. Lifake ngemva kwezitayela ezikhona

Faka i-Solid Glass ngemva kweshidi lesitayela le-Tailwind nele-shadcn/ui. Itimu ichaza amagama afanayo okuguquguquka kombala adalwa yi-shadcn init, ngakho susa amabhulokhi aguquguquka kombala e-:root ne-.dark akhiqiziwe ngaphambi kokwengeza i-import.

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "./solid-glass.css";

Ngemva kwale import, izingxenye zakho ezikhona ze-shadcn/ui zingasebenzisa le nto ngaphandle kokushintsha izingxenye. Ukuze uthole imiyalelo ephelele yokufaka, bheka ikhasi lokufaka le-Solid Glass.

Faka izingxenye ze-Solid Glass

Izingxenye ze-Solid Glass uqobo zisebenzisa indlela efanayo yokusebenza ye-shadcn registry. Ngokwesibonelo, faka inkomba yesimo ngale ndlela:

npx shadcn@latest add https://deeplethe.github.io/solid-glass/r/status-glyph.json

Phinda umyalo usebenzisa i-URL ye-registry yenye ingxenye. Okufakiwe okutholakalayo ku-registry kuhlanganisa izibonisi zesimo, amaphaneli, amalebula, izinkomba zokulayisha, ulwazi lokujika kwe-ejenti, izindawo zokuqamba, izinyathelo zamathuluzi, ama-diff, imibuzo, ukusetshenziswa komongo, izaziso zemisebenzi, kanye nokubukwa kokucabanga.

Qalisa iphrojekthi endaweni yangakini

Ukuze usebenze kumbukiso we-Solid Glass noma uhlole ikhodi yawo, klona i-repository, faka ama-dependency, bese uqala iseva yokuthuthukisa:

npm install
npm run dev

Isayithi lokuthuthukisa lisebenza ku-http://localhost:5191. Imiyalo yokukhiqiza nokuqinisekisa yile:

npm run build
npm run typecheck

I-build ibhala umphumela wokukhiqiza ku-dist/.

Hlola amathuluzi okuthuthukisa

I-repository ihlanganisa ama-route asetshenziswa kuphela ekuthuthukiseni, akusiza uhlole itimu nezibonelo:

• /dev/banner ibonisa ibhanela lokuthuthukisa elisetshenziswa yiphrojekthi.
• /dev/examples ifaka zonke izibonelo futhi ibike lezo ezehlulekayo.
• /dev/examples?q=button,card ihlunga izibonelo eziboniswayo.
• /dev/examples?theme=light ibuka kuqala izibonelo ngetimu ekhanyayo.
• /dev/examples?hover=<selector> ibonisa into ehambisanayo sengathi isikhombisi singaphezu kwayo.
• /dev/examples?click=<selector> icindezela into ehambisanayo ukuze uhlole lokho ekukuvulayo.

Lapho uthumela isayithi ngaphandle kwendawo ezenzakalelayo ye-GitHub Pages ye-repository, setha i-SOLID_GLASS_ORIGIN ekhelini lapho isayithi linikezwa khona, bese usetha i-SOLID_GLASS_BASE endleleni yalo. Izingxenye ze-Solid Glass zisebenzisa i-origin lapho zibhekisa komunye nomunye.

Qonda ukwakheka kwephrojekthi

Amafayela namafolda abaluleke kakhulu yilawa:

• src/solid-glass.css iqukethe itimu ephelele yezinto ezibonakalayo.
• registry.json ichaza lokho okufakwa yi-shadcn CLI. Ukwakhiwa kwe-registry kudala futhi i-public/r/ yesayithi.
• src/components/ui/ iqukethe izingxenye eziboniswayo ze-shadcn/ui ne-Solid Glass.
• src/create/ kanye ne-src/pages/create.tsx zisebenzisa ikhasi lokwenza ngokwezifiso izinto ezibonakalayo.
• src/examples/ iqukethe ifayela elincane elilodwa lesibonelo ngasinye.
• content/ igcina imibhalo yezingxenye nephrojekthi.
• scripts/build-docs.mjs iguqula imibhalo ibe yi-src/docs/generated.json.

Dala ingxenye ye-Solid Glass

Ukuze wengeze ingxenye yakho, landela ukuhlelwa okufanayo okusetshenziswa yiphrojekthi:

1. Dala i-src/components/ui/<name>.tsx. Yibhale njengengxenye ye-shadcn/ui, sebenzisa izingxenye zemisebenzi, engeza i-data-slot kuyo yonke ingxenye, futhi usebenzise i-cn() evela ku-@/lib/utils.
2. Engeza i-src/examples/<name>-demo.tsx, kanye nefayela elilodwa lesibonelo ngasinye esengeziwe.
3. Dala i-content/solid/<name>.mdx. Faka i-front matter enesihloko nencazelo, ukubuka kuqala kwengxenye, imiyalelo yokufaka, imiyalelo yokusebenzisa, kanye nesihloko sesibonelo ngasinye.

Gcina izinto ezibonakalayo zihambisana nemithetho yazo emine yokuklama: isiphetho kufanele sibe onqenqemeni, izindawo kufanele zizizwe zisinda kunokuba zibe nomoya, ukujula kuboniswa ngobukhulu, futhi isixhumi esibonakalayo sisebenzisa isimo esisodwa.

Ukwenza ngokwezifiso okuthuthukile ngekhasi le-Create

Vula ikhasi le-Create ukuze ulungise izinto ezibonakalayo ngokusebenzisana. Lungisa ubukhulu, umbala, umbala weshadi, uhlobo, i-radius, unqenqema, nokufiphala ngesikhathi ukubuka kuqala kubuyekezwa. Uma umphumela usufanele isixhumi esibonakalayo sakho, kopisha okukhiphayo okuncane kwe-CSS bese uguqula okuguquguqukayo okufanele eshidini lesitayela lephrojekthi yakho.

Izinketho ezitholakalayo zichazwa ku-src/create/options.ts, kanti amakhadi okubuka kuqala asebenzisa izingxenye ze-shadcn/ui. Lokhu kwenza ikhasi libe wusizo njengethuluzi lokuklama nanjengesithenjwa sendlela okuguquguqukayo kwetimu okuthinta ngayo izinto ezibonakalayo.

Isiphetho

I-Solid Glass iyindlela elula yokunikeza uhlelo olukhona lwe-shadcn/ui ukubukeka kwengilazi okuqinile nokufundeka kalula. Faka ishidi layo lesitayela ngemva kwamafayela etimu akho ajwayelekile, engeza izingxenye ezigxile kuma-agent ezivela ku-registry lapho kudingeka, bese usebenzisa izibonelo zasendaweni noma ikhasi le-Create ukuze ulungise umphumela. Iphrojekthi ikhishwa ngaphansi kwe-MIT License; izingxenye nemibhalo evela ku-shadcn/ui zihlala zingaphansi kwe-MIT License yababhali bazo njengoba kuphawuliwe ku-NOTICE.md.