Unda Miingiliano ya AI ya Viwandani kwa Mandhari ya Solid Glass ya shadcn/ui

Solid Glass hufanya nini

Solid Glass ni mandhari ya kuona ya shadcn/ui, iliyoundwa kwa paneli za AI za viwandani, koni za waendeshaji, na dashibodi. Huyapa violesura paneli nene zenye mwonekano wa moshi ambazo huonekana imara kwa mbali na kuonyesha sifa zake za kioo hasa kwenye kingo.

Tofauti na athari za kioo kimiminika, Solid Glass haifanyi mandharinyuma kushindana na maandishi. Uso wake hutumia rangi ya kijivu isiyoegemea upande wowote ambayo haipindiki, kutiririka, wala kuchukua rangi kutoka kwenye maudhui yaliyo nyuma yake. Mwonekano huo hutokana na mstari mwepesi juu, mpaka mwembamba, na kivuli chini ya uso.

Mradi huu unajumuisha seti ya vipengele vya shadcn/ui na mkusanyiko wa vipengele vya violesura ambamo wakala wa AI anafanya kazi. Tovuti rasmi ya Solid Glass huonyesha nyenzo hii kwenye vipengele vinavyopatikana na inajumuisha ukurasa wa Create wa kurekebisha vigezo vyake vya mwonekano.

Vipengele na sehemu kuu

• Laha moja ya mitindo hutumia mandhari hii kwenye vipengele vya shadcn/ui kwa kutumia sifa zao zilizopo za data-slot na madarasa.
• Mandhari hii hufafanua majina ya vigezo vya shadcn/ui, yakiwemo unene wa kioo wa viwango vitatu, rangi, mwendo, na hali yake moja ya kuona.
• Hali nyeusi ndiyo muundo mkuu wa nyenzo hii, huku mandhari nyepesi pia ikipatikana.
• Ukurasa wa Create hukuruhusu kurekebisha unene, rangi ya kivuli, rangi ya chati, aina, radius, ukingo, na ukungu, kisha unakili CSS inayotokana.
• Usajili huu hutoa vipengele vya Solid Glass vinavyoweza kusakinishwa kupitia CLI ya shadcn.

Vipengele vya Solid Glass vyenyewe ni pamoja na status-glyph, panel, tag, na dot-loader. Vipengele vinavyolenga mawakala ni pamoja na turn-status, composer, tool-steps, diff-view, ask-card, context-ring, task-notice, na reasoning.

Sakinisha mandhari

1. Anza na mradi wa shadcn/ui

Tumia mradi wa shadcn/ui unaotegemea React 19, Tailwind CSS 4, na vipengele vya Base UI. Ikiwa unaanza kutoka mwanzo, uanzishe kwa:

npx shadcn@latest init

2. Ongeza laha ya mitindo ya Solid Glass

Unaweza kusakinisha laha ya mitindo kutoka kwenye usajili unaopangishwa au moja kwa moja kutoka kwenye hazina:

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

3. Iagize baada ya mitindo iliyopo

Agiza Solid Glass baada ya laha za mitindo za Tailwind na shadcn/ui. Mandhari hii hufafanua majina yaleyale ya vigezo vya rangi yaliyoundwa na shadcn init, kwa hiyo ondoa vizuizi vya vigezo vya rangi vya :root na .dark vilivyotengenezwa kabla ya kuongeza agizo hili.

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

Baada ya agizo hili, vipengele vyako vilivyopo vya shadcn/ui vinaweza kutumia nyenzo hii bila mabadiliko kwenye vipengele. Kwa mwongozo kamili wa usakinishaji, tazama ukurasa wa usakinishaji wa Solid Glass.

Sakinisha vipengele vya Solid Glass

Vipengele vyake vya Solid Glass hutumia mtiririko huohuo wa usajili wa shadcn. Kwa mfano, sakinisha kiashirio cha hali kwa:

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

Rudia amri hiyo ukitumia URL ya usajili ya kipengele kingine. Maingizo yanayopatikana kwenye usajili huu yanajumuisha maonyesho ya hali, paneli, lebo, viashirio vya upakiaji, maelezo ya zamu ya wakala, maeneo ya utungaji, hatua za zana, tofauti, maswali, matumizi ya muktadha, arifa za kazi, na mionekano ya hoja.

Endesha mradi ndani ya mashine yako

Ili kufanyia kazi onyesho la Solid Glass au kukagua msimbo wake, nakili hazina, sakinisha vitegemezi, na uanze seva ya uendelezaji:

npm install
npm run dev

Tovuti ya uendelezaji huendeshwa kwenye http://localhost:5191. Amri za uzalishaji na uthibitishaji ni:

npm run build
npm run typecheck

Build huandika matokeo ya uzalishaji kwenye dist/.

Chunguza zana za uendelezaji

Hazina hii inajumuisha njia za uendelezaji pekee zinazokusaidia kukagua mandhari na mifano:

• /dev/banner huonyesha bango la uendelezaji linalotumiwa na mradi.
• /dev/examples hupachika kila mfano na kuripoti mifano inayoshindwa.
• /dev/examples?q=button,card huchuja mifano inayoonyeshwa.
• /dev/examples?theme=light huonyesha mifano katika mandhari nyepesi.
• /dev/examples?hover=<selector> huonyesha kipengele kinacholingana kana kwamba kielekezi kiko juu yake.
• /dev/examples?click=<selector> hubonyeza kipengele kinacholingana ili uweze kukagua kinachofunguka.

Unapoweka tovuti mahali pengine nje ya eneo chaguo-msingi la GitHub Pages la hazina, weka SOLID_GLASS_ORIGIN kuwa anwani ambako tovuti inatolewa na SOLID_GLASS_BASE kuwa njia yake. Vipengele vya Solid Glass hutumia origin hiyo vinaporejelea kila kimoja.

Elewa muundo wa mradi

Faili na saraka muhimu zaidi ni:

• src/solid-glass.css ina mandhari kamili ya nyenzo.
• registry.json inaeleza kile ambacho CLI ya shadcn husakinisha. Uundaji wa registry pia huunda public/r/ kwa ajili ya tovuti.
• src/components/ui/ ina vipengele vya shadcn/ui na Solid Glass vinavyoonyeshwa.
• src/create/ na src/pages/create.tsx hutekeleza ukurasa wa kubinafsisha nyenzo.
• src/examples/ ina faili moja ndogo kwa kila mfano.
• content/ huhifadhi nyaraka za vipengele na mradi.
• scripts/build-docs.mjs hubadilisha nyaraka kuwa src/docs/generated.json.

Unda kipengele cha Solid Glass

Ili kuongeza kipengele chako mwenyewe, fuata mpangilio uleule unaotumiwa na mradi:

1. Unda src/components/ui/<name>.tsx. Kiandike kama kipengele cha shadcn/ui, tumia vipengele vya kazi, ongeza data-slot kwenye kila sehemu, na utumie cn() kutoka @/lib/utils.
2. Ongeza src/examples/<name>-demo.tsx, pamoja na faili moja kwa kila mfano wa ziada.
3. Unda content/solid/<name>.mdx. Jumuisha front matter yenye kichwa na maelezo, mwonekano wa kipengele, maagizo ya usakinishaji, maagizo ya matumizi, na kichwa kwa kila mfano.

Weka nyenzo ikiwa na mtindo unaolingana na kanuni zake nne za usanifu: umalizio uwe pembezoni, nyuso zihisi kuwa nzito badala ya hewahewa, kina kielezwe kupitia unene, na kiolesura kitumie hali moja.

Ubinafsishaji wa hali ya juu kwa ukurasa wa Create

Fungua ukurasa wa Create ili kurekebisha nyenzo kwa njia shirikishi. Rekebisha unene, rangi ya kupaka, rangi ya chati, aina, kipenyo, ukingo na ukungu huku mwonekano wa awali ukisasishwa. Mara matokeo yanapolingana na kiolesura chako, nakili matokeo madogo ya CSS na urekebishe vigezo vinavyohusika katika stylesheet ya mradi wako.

Chaguo zinazopatikana zimefafanuliwa katika src/create/options.ts, huku kadi za mwonekano wa awali zikitumia vipengele vya shadcn/ui. Hii hufanya ukurasa huo uwe muhimu kama zana ya usanifu na kama rejeleo la jinsi vigezo vya mandhari vinavyoathiri nyenzo.

Hitimisho

Solid Glass ni njia rahisi ya kuipa programu iliyopo ya shadcn/ui mwonekano thabiti na unaosomeka wa kioo. Sakinisha stylesheet yake baada ya faili zako za kawaida za mandhari, ongeza vipengele vinavyolenga mawakala kutoka kwenye registry inapohitajika, na tumia mifano ya ndani au ukurasa wa Create kuboresha matokeo. Mradi umetolewa chini ya Leseni ya MIT; vipengele na nyaraka zilizotokana na shadcn/ui zinaendelea kuwa chini ya Leseni ya MIT ya waandishi wake kama ilivyoelezwa katika NOTICE.md.