মূল কনটেন্টে যান
এআই টিউটোরিয়াল

Solid Glass shadcn/ui থিম দিয়ে শিল্পক্ষেত্রের AI ইন্টারফেস তৈরি করুন

Solid Glass কীভাবে ইনস্টল করতে হয়, shadcn/ui প্রকল্পে এর একক স্টাইলশিট প্রয়োগ করতে হয়, এজেন্ট-কেন্দ্রিক কম্পোনেন্ট ব্যবহার করতে হয়, শোকেস সাইটটি স্থানীয়ভাবে চালাতে হয়, উপাদানটি কাস্টমাইজ করতে হয় এবং এর ভিজ্যুয়াল নিয়ম অনুসরণ করে নতুন কম্পোনেন্ট তৈরি করতে হয়, তা শিখুন।

পড়তে প্রায় 15 মিনিট লাগবে
Solid Glass shadcn/ui থিম দিয়ে শিল্পক্ষেত্রের AI ইন্টারফেস তৈরি করুন

Solid Glass যা করে

Solid Glass হলো shadcn/ui-এর জন্য একটি ভিজ্যুয়াল থিম, যা শিল্পভিত্তিক AI প্যানেল, অপারেটর কনসোল এবং ড্যাশবোর্ডের জন্য তৈরি। এটি ইন্টারফেসে মোটা, ধোঁয়াটে প্যান তৈরি করে, যা দূর থেকে কঠিন দেখায় এবং মূলত প্রান্তে এর কাচের বৈশিষ্ট্য প্রকাশ করে।

লিকুইড-গ্লাস ইফেক্টের বিপরীতে, Solid Glass ব্যাকগ্রাউন্ডকে টেক্সটের সঙ্গে প্রতিযোগিতা করতে দেয় না। এর সম্মুখভাগে নিরপেক্ষ ধূসর সারফেস ব্যবহার করা হয়, যা পেছনের কনটেন্টের রং গ্রহণ করে না, বাঁকে না বা প্রবাহিত হয় না। এর ফিনিশ তৈরি হয় উপরের হালকা রেখা, সূক্ষ্ম বর্ডার এবং সারফেসের নিচের ছায়ার মাধ্যমে।

ডার্ক থিমের কম্পোনেন্টগুলো

এই প্রজেক্টে shadcn/ui কম্পোনেন্ট সেট এবং এমন ইন্টারফেসের জন্য কম্পোনেন্টের একটি সংগ্রহ রয়েছে, যেখানে একটি AI এজেন্ট কাজ করছে। অফিসিয়াল Solid Glass সাইট উপলভ্য কম্পোনেন্টগুলোতে এই ম্যাটেরিয়াল প্রদর্শন করে এবং এর ভিজ্যুয়াল ভেরিয়েবল সমন্বয়ের জন্য একটি Create পেজও অন্তর্ভুক্ত করে।

একটি প্যানেল তিনভাবে: ফ্ল্যাট, Solid Glass, লিকুইড গ্লাস

প্রধান বৈশিষ্ট্য ও কম্পোনেন্ট

  • একটি মাত্র স্টাইলশিট shadcn/ui-এর কম্পোনেন্টে তাদের বিদ্যমান data-slot অ্যাট্রিবিউট ও ক্লাস ব্যবহার করে থিম প্রয়োগ করে।
  • থিমটি shadcn/ui-এর ভেরিয়েবল নামগুলো নির্ধারণ করে, যার মধ্যে রয়েছে তিনটি গ্লাস থিকনেস, রং, মোশন এবং এর একমাত্র ভিজ্যুয়াল স্টেট।
  • ডার্ক মোডই প্রধান ম্যাটেরিয়াল ডিজাইন, তবে একটি লাইট থিমও উপলভ্য।
  • Create পেজে থিকনেস, টিন্ট, চার্টের রং, টাইপ, রেডিয়াস, রিম এবং ব্লার সমন্বয় করে ফলস্বরূপ CSS কপি করা যায়।
  • রেজিস্ট্রি shadcn CLI-এর মাধ্যমে ইনস্টলযোগ্য Solid Glass কম্পোনেন্ট সরবরাহ করে।

Solid Glass-এর নিজস্ব কম্পোনেন্টগুলোর মধ্যে রয়েছে status-glyph, panel, tag এবং dot-loader। এজেন্ট-কেন্দ্রিক কম্পোনেন্টগুলোর মধ্যে রয়েছে turn-status, composer, tool-steps, diff-view, ask-card, context-ring, task-notice এবং reasoning।

থিম ইনস্টল করুন

১. একটি shadcn/ui প্রজেক্ট দিয়ে শুরু করুন

React 19, Tailwind CSS 4 এবং Base UI কম্পোনেন্টের ওপর ভিত্তি করে একটি shadcn/ui প্রজেক্ট ব্যবহার করুন। শূন্য থেকে শুরু করলে এটি দিয়ে ইনিশিয়ালাইজ করুন:

npx shadcn@latest init

ডার্ক থিমের কম্পোনেন্টগুলো

২. Solid Glass স্টাইলশিট যোগ করুন

হোস্টেড রেজিস্ট্রি অথবা সরাসরি রিপোজিটরি থেকে স্টাইলশিট ইনস্টল করতে পারেন:

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

৩. বিদ্যমান স্টাইলের পরে এটি ইমপোর্ট করুন

Tailwind এবং shadcn/ui-এর স্টাইলশিটের পরে Solid Glass ইমপোর্ট করুন। থিমটি shadcn init দ্বারা তৈরি একই রঙের ভেরিয়েবল নাম ব্যবহার করে, তাই ইমপোর্ট যোগ করার আগে তৈরি করা :root এবং .dark রঙের ভেরিয়েবল ব্লকগুলো সরিয়ে ফেলুন।

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

এই ইমপোর্টের পরে বিদ্যমান shadcn/ui কম্পোনেন্টগুলোতে কোনো কম্পোনেন্ট পরিবর্তন ছাড়াই ম্যাটেরিয়ালটি ব্যবহার করা যাবে। সম্পূর্ণ ইনস্টলেশন নির্দেশিকার জন্য Solid Glass ইনস্টলেশন পেজ দেখুন।

লাইট থিমের কম্পোনেন্টগুলো

Solid Glass কম্পোনেন্ট ইনস্টল করুন

Solid Glass-এর নিজস্ব কম্পোনেন্টগুলোও একই shadcn রেজিস্ট্রি ওয়ার্কফ্লো ব্যবহার করে। উদাহরণস্বরূপ, স্ট্যাটাস ইন্ডিকেটর ইনস্টল করুন:

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

অন্য কোনো কম্পোনেন্টের জন্য তার রেজিস্ট্রি URL দিয়ে কমান্ডটি পুনরায় চালান। উপলভ্য রেজিস্ট্রি এন্ট্রিগুলোতে স্ট্যাটাস ডিসপ্লে, প্যানেল, লেবেল, লোডিং ইন্ডিকেটর, এজেন্ট টার্নের তথ্য, কম্পোজিশন এরিয়া, টুল স্টেপ, ডিফ, প্রশ্ন, কনটেক্সট ব্যবহার, টাস্ক নোটিশ এবং রিজনিং ভিউ রয়েছে।

লাইট থিমের কম্পোনেন্টগুলো

প্রজেক্টটি স্থানীয়ভাবে চালান

Solid Glass শোকেসে কাজ করতে বা এর সোর্স পরিদর্শন করতে রিপোজিটরি ক্লোন করুন, নির্ভরতা ইনস্টল করুন এবং ডেভেলপমেন্ট সার্ভার চালু করুন:

npm install
npm run dev

ডেভেলপমেন্ট সাইটটি http://localhost:5191-এ চলে। প্রোডাকশন ও যাচাইকরণের কমান্ডগুলো হলো:

npm run build
npm run typecheck

বিল্ড প্রোডাকশন আউটপুট dist/-এ লিখে।

ডেভেলপমেন্ট টুলগুলো দেখুন

থিম ও উদাহরণ পরিদর্শনে সহায়তার জন্য রিপোজিটরিতে শুধু ডেভেলপমেন্টের কাজে ব্যবহৃত রুট রয়েছে:

  • /dev/banner প্রজেক্টে ব্যবহৃত ডেভেলপমেন্ট ব্যানার দেখায়।
  • /dev/examples প্রতিটি উদাহরণ মাউন্ট করে এবং ব্যর্থ উদাহরণগুলোর প্রতিবেদন দেয়।
  • /dev/examples?q=button,card প্রদর্শিত উদাহরণগুলো ফিল্টার করে।
  • /dev/examples?theme=light লাইট থিমে উদাহরণগুলোর প্রিভিউ দেখায়।
  • /dev/examples?hover=<selector> মিলে যাওয়া কোনো এলিমেন্টকে পয়েন্টার তার ওপর থাকা অবস্থার মতো দেখায়।
  • /dev/examples?click=<selector> মিলে যাওয়া কোনো এলিমেন্টে চাপ দেয়, যাতে এটি কী খোলে তা পরিদর্শন করতে পারেন।

রিপোজিটরির ডিফল্ট GitHub Pages অবস্থানের বাইরে সাইট ডিপ্লয় করার সময় SOLID_GLASS_ORIGIN-এ সাইটটি যে ঠিকানায় পরিবেশিত হচ্ছে সেটি এবং SOLID_GLASS_BASE-এ তার পাথ নির্ধারণ করুন। Solid Glass কম্পোনেন্টগুলো পরস্পরের উল্লেখ করার সময় origin ব্যবহার করে।

প্রকল্পের কাঠামো বুঝুন

একটি প্যানেল, তিনটি রূপ: সমতল, সলিড গ্লাস, লিকুইড গ্লাস

সবচেয়ে গুরুত্বপূর্ণ ফাইল ও ডিরেক্টরিগুলো হলো:

  • src/solid-glass.css-এ সম্পূর্ণ ম্যাটেরিয়াল থিম রয়েছে।
  • registry.json shadcn CLI কী ইনস্টল করে তা বর্ণনা করে। রেজিস্ট্রি বিল্ড সাইটের জন্য public/r/-ও তৈরি করে।
  • src/components/ui/-এ প্রদর্শিত shadcn/ui এবং Solid Glass কম্পোনেন্টগুলো রয়েছে।
  • src/create/ এবং src/pages/create.tsx ম্যাটেরিয়াল কাস্টমাইজেশন পেজটি বাস্তবায়ন করে।
  • src/examples/-এ প্রতিটি উদাহরণের জন্য একটি করে ছোট ফাইল রয়েছে।
  • content/-এ কম্পোনেন্ট ও প্রকল্পের ডকুমেন্টেশন সংরক্ষিত থাকে।
  • scripts/build-docs.mjs ডকুমেন্টেশনকে src/docs/generated.json-এ রূপান্তর করে।

একটি Solid Glass কম্পোনেন্ট তৈরি করুন

নিজের একটি কম্পোনেন্ট যোগ করতে প্রকল্পে ব্যবহৃত একই সংগঠন অনুসরণ করুন:

  1. src/components/ui/<name>.tsx তৈরি করুন। এটিকে shadcn/ui কম্পোনেন্টের মতো লিখুন, ফাংশন কম্পোনেন্ট ব্যবহার করুন, প্রতিটি অংশে একটি data-slot যোগ করুন এবং @/lib/utils থেকে cn() ব্যবহার করুন।
  2. src/examples/<name>-demo.tsx যোগ করুন, পাশাপাশি প্রতিটি অতিরিক্ত উদাহরণের জন্য একটি করে ফাইল রাখুন।
  3. content/solid/<name>.mdx তৈরি করুন। এতে title ও description-সহ front matter, একটি কম্পোনেন্ট প্রিভিউ, ইনস্টলেশনের নির্দেশনা, ব্যবহারের নির্দেশনা এবং প্রতিটি উদাহরণের জন্য একটি heading অন্তর্ভুক্ত করুন।

ম্যাটেরিয়ালটিকে এর চারটি ডিজাইন নিয়মের সঙ্গে সামঞ্জস্যপূর্ণ রাখুন: ফিনিশ প্রান্তে থাকবে, সারফেসগুলো হালকা নয় বরং ভারী অনুভূত হবে, গভীরতা পুরুত্বের মাধ্যমে প্রকাশ পাবে এবং ইন্টারফেসে একটি মাত্র অবস্থা ব্যবহার করা হবে।

Create পেজ দিয়ে উন্নত কাস্টমাইজেশন

ম্যাটেরিয়ালটি ইন্টার‌্যাক্টিভভাবে সামঞ্জস্য করতে Create পেজ খুলুন। প্রিভিউ আপডেট হওয়ার সময় পুরুত্ব, টিন্ট, চার্টের রং, ধরন, রেডিয়াস, রিম এবং ব্লার সামঞ্জস্য করুন। ফলাফলটি আপনার ইন্টারফেসের উপযোগী হলে ছোট CSS আউটপুটটি কপি করে আপনার প্রকল্পের স্টাইলশিটে প্রাসঙ্গিক ভেরিয়েবলগুলো সামঞ্জস্য করুন।

উপলভ্য পছন্দগুলো src/create/options.ts-এ সংজ্ঞায়িত করা হয়েছে, আর প্রিভিউ কার্ডগুলো shadcn/ui কম্পোনেন্ট ব্যবহার করে। ফলে পেজটি ডিজাইন টুল এবং থিমের ভেরিয়েবলগুলো কীভাবে ম্যাটেরিয়ালকে প্রভাবিত করে তার রেফারেন্স, উভয় হিসেবেই কার্যকর।

উপসংহার

বিদ্যমান shadcn/ui অ্যাপ্লিকেশনে গঠনমূলক ও পাঠযোগ্য গ্লাস নান্দনিকতা যোগ করার একটি সহজ উপায় হলো Solid Glass। আপনার স্বাভাবিক থিম ফাইলগুলোর পরে এর স্টাইলশিট ইনস্টল করুন, প্রয়োজনে রেজিস্ট্রি থেকে এজেন্ট-কেন্দ্রিক কম্পোনেন্ট যোগ করুন এবং ফলাফল পরিমার্জন করতে স্থানীয় উদাহরণ বা Create পেজ ব্যবহার করুন। প্রকল্পটি MIT License-এর অধীনে প্রকাশিত; shadcn/ui থেকে নেওয়া কম্পোনেন্ট ও ডকুমেন্টেশন তাদের লেখকদের MIT License-এর অধীনেই থাকে, যেমন NOTICE.md-তে উল্লেখ করা হয়েছে।