Solid Glass shadcn/ui mavzusi yordamida sanoat AI interfeyslarini yarating

Solid Glass nima qiladi

Solid Glass — sanoat AI panellari, operator konsollari va boshqaruv panellari uchun mo‘ljallangan shadcn/ui vizual mavzusi. U interfeyslarga qalin, tutunsimon panellar beradi: ular uzoqdan qattiq ko‘rinadi, shisha xususiyatini esa asosan chetlarida namoyon qiladi.

Suyuq shisha effektlaridan farqli ravishda, Solid Glass fonni matn bilan raqobatlashishiga yo‘l qo‘ymaydi. Uning yuzasi neytral kulrang bo‘lib, egilmaydi, oqmaydi va orqadagi kontent rangini olmaydi. Ko‘rinish yuqori qismdagi yorug‘ chiziq, nozik chegara va sirt ostidagi soya orqali hosil qilinadi.

Loyiha shadcn/ui komponentlar to‘plami hamda AI agent ishlaydigan interfeyslar uchun komponentlar jamlanmasini o‘z ichiga oladi. Rasmiy Solid Glass sayti materialni mavjud komponentlarda namoyish etadi va uning vizual o‘zgaruvchilarini sozlash uchun Create sahifasini ham taqdim etadi.

Asosiy imkoniyatlar va komponentlar

• Bitta stil jadvali mavjud data-slot atributlari va klasslaridan foydalanib, mavzuni shadcn/ui komponentlariga qo‘llaydi.
• Mavzu shadcn/ui o‘zgaruvchi nomlarini, jumladan, shishaning uchta qalinlik darajasi, ranglar, animatsiya va yagona vizual holatni belgilaydi.
• To‘q rejim asosiy material dizayni hisoblanadi, yorug‘ mavzu ham mavjud.
• Create sahifasi qalinlik, tus, diagramma rangi, shrift, radius, qirra va xiralikni sozlash, so‘ng hosil bo‘lgan CSS kodini nusxalash imkonini beradi.
• Reyestr shadcn CLI orqali o‘rnatiladigan Solid Glass komponentlarini taqdim etadi.

Solid Glass'ning o‘z komponentlari qatoriga status-glyph, panel, tag va dot-loader kiradi. Agentlar uchun mo‘ljallangan komponentlar esa turn-status, composer, tool-steps, diff-view, ask-card, context-ring, task-notice va reasoningdan iborat.

Mavzuni o‘rnatish

1. shadcn/ui loyihasidan boshlang

React 19, Tailwind CSS 4 va Base UI komponentlariga asoslangan shadcn/ui loyihasidan foydalaning. Agar loyihani noldan boshlasangiz, uni quyidagi buyruq bilan ishga tushiring:

npx shadcn@latest init

2. Solid Glass stil jadvalini qo‘shing

Stil jadvalini joylashtirilgan reyestrdan yoki to‘g‘ridan-to‘g‘ri repozitoriydan o‘rnatishingiz mumkin:

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

3. Uni mavjud stillardan keyin import qiling

Solid Glass'ni Tailwind va shadcn/ui stil jadvalidan keyin import qiling. Mavzu shadcn init yaratadigan rang o‘zgaruvchilarining ayni nomlarini belgilaydi, shuning uchun importni qo‘shishdan oldin yaratilgan :root va .dark rang o‘zgaruvchilari bloklarini olib tashlang.

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

Ushbu importdan so‘ng mavjud shadcn/ui komponentlaringiz komponent kodini o‘zgartirmasdan materialdan foydalanishi mumkin. To‘liq o‘rnatish bo‘yicha ko‘rsatmalar uchun Solid Glass o‘rnatish sahifasini ko‘ring.

Solid Glass komponentlarini o‘rnatish

Solid Glass'ning o‘z komponentlari ham xuddi shu shadcn reyestri ish jarayonidan foydalanadi. Masalan, holat indikatorini quyidagi buyruq bilan o‘rnating:

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

Boshqa komponent uchun buyruqni uning reyestr URL manzili bilan takrorlang. Mavjud reyestr yozuvlari holat ko‘rsatkichlari, panellar, yorliqlar, yuklanish indikatorlari, agent navbati ma’lumotlari, kompozitsiya maydonlari, vosita bosqichlari, farqlar, savollar, kontekst ishlatilishi, vazifa bildirishnomalari va mulohaza ko‘rinishlarini qamrab oladi.

Loyihani lokal ishga tushirish

Solid Glass namoyishi ustida ishlash yoki uning manba kodini ko‘rish uchun repozitoriyani klonlang, bog‘liqliklarni o‘rnating va ishlab chiqish serverini ishga tushiring:

npm install
npm run dev

Ishlab chiqish sayti http://localhost:5191 manzilida ishlaydi. Ishlab chiqarish va tekshiruv buyruqlari:

npm run build
npm run typecheck

Build jarayoni ishlab chiqarish natijasini dist/ katalogiga yozadi.

Ishlab chiqish vositalarini o‘rganish

Repozitoriyaga mavzu va misollarni tekshirishga yordam beradigan, faqat ishlab chiqish uchun mo‘ljallangan yo‘nalishlar kiritilgan:

• /dev/banner loyiha foydalanadigan ishlab chiqish bannerini ko‘rsatadi.
• /dev/examples barcha misollarni yuklaydi va ishlamaydigan misollar haqida xabar beradi.
• /dev/examples?q=button,card ko‘rsatiladigan misollarni filtrlaydi.
• /dev/examples?theme=light misollarni yorug‘ mavzuda ko‘rib chiqish imkonini beradi.
• /dev/examples?hover=<selector> mos elementni ko‘rsatkich uning ustida turgandek namoyish etadi.
• /dev/examples?click=<selector> mos elementni bosadi, shunda u ochadigan narsani tekshirishingiz mumkin.

Saytni repozitoriyning standart GitHub Pages manzilidan tashqarida joylashtirganda, SOLID_GLASS_ORIGINni sayt xizmat ko‘rsatiladigan manzilga, SOLID_GLASS_BASEni esa uning yo‘liga o‘rnating. Solid Glass komponentlari bir-biriga murojaat qilganda origin qiymatidan foydalanadi.

Loyiha tuzilmasini tushunish

Eng muhim fayl va kataloglar:

• src/solid-glass.css to‘liq material mavzusini o‘z ichiga oladi.
• registry.json shadcn CLI o‘rnatadigan narsalarni tavsiflaydi. Registry qurilishi sayt uchun public/r/ katalogini ham yaratadi.
• src/components/ui/ ekranda ko‘rsatiladigan shadcn/ui va Solid Glass komponentlarini o‘z ichiga oladi.
• src/create/ va src/pages/create.tsx materialni sozlash sahifasini amalga oshiradi.
• src/examples/ har bir misol uchun bittadan kichik faylni o‘z ichiga oladi.
• content/ komponentlar va loyiha hujjatlarini saqlaydi.
• scripts/build-docs.mjs hujjatlarni src/docs/generated.json fayliga aylantiradi.

Solid Glass komponentini yaratish

O‘zingizning komponentingizni qo‘shish uchun loyihada qo‘llanilgan tartibga amal qiling:

1. src/components/ui/<name>.tsx faylini yarating. Uni shadcn/ui komponenti kabi yozing, funksional komponentlardan foydalaning, har bir qismga data-slot qo‘shing va @/lib/utils manzilidagi cn() funksiyasidan foydalaning.
2. src/examples/<name>-demo.tsx faylini hamda har bir qo‘shimcha misol uchun bittadan fayl yarating.
3. content/solid/<name>.mdx faylini yarating. Unda title va description ko‘rsatilgan front matter, komponent ko‘rinishi, o‘rnatish bo‘yicha ko‘rsatmalar, foydalanish bo‘yicha ko‘rsatmalar hamda har bir misol uchun sarlavha bo‘lsin.

Materialni to‘rtta dizayn qoidasiga muvofiq saqlang: pardoz chetga tegishli bo‘lsin, yuzalar havodor emas, balki salmoqli tuyulsin, chuqurlik qalinlik orqali ifodalansin va interfeys bitta holatdan foydalansin.

Create sahifasi orqali ilg‘or sozlash

Materialni interaktiv tarzda sozlash uchun Create sahifasini oching. Ko‘rib chiqish yangilanib turgan paytda qalinlik, rang tusi, diagramma rangi, tur, radius, hoshia va xiralikni o‘zgartiring. Natija interfeysingizga mos kelgach, kichik CSS chiqishini nusxalang va loyihangiz uslublar jadvalidagi tegishli o‘zgaruvchilarga moslang.

Mavjud tanlovlar src/create/options.ts faylida belgilangan, ko‘rib chiqish kartalarida esa shadcn/ui komponentlaridan foydalaniladi. Shu sababli sahifa ham dizayn vositasi, ham mavzu o‘zgaruvchilari materialga qanday ta’sir qilishini ko‘rsatuvchi qo‘llanma sifatida foydalidir.

Xulosa

Solid Glass mavjud shadcn/ui ilovasiga salmoqli va o‘qilishi qulay shisha estetikasini berishning oson usulidir. Uning uslublar jadvalini odatiy mavzu fayllaringizdan keyin o‘rnating, kerak bo‘lganda registry orqali agentlarga yo‘naltirilgan komponentlarni qo‘shing va natijani takomillashtirish uchun mahalliy misollar yoki Create sahifasidan foydalaning. Loyiha MIT litsenziyasi asosida chiqarilgan; shadcn/ui dan olingan komponentlar va hujjatlar NOTICE.md faylida qayd etilganidek, ularning mualliflariga tegishli MIT litsenziyasi ostida qoladi.