Xây dựng giao diện AI công nghiệp với chủ đề Solid Glass shadcn/ui

Solid Glass làm gì

Solid Glass là một giao diện trực quan cho shadcn/ui, được thiết kế cho các bảng điều khiển AI công nghiệp, console vận hành và dashboard. Giao diện tạo ra những tấm nền dày, khói, trông rắn chắc từ xa và chỉ bộc lộ đặc tính kính chủ yếu ở các cạnh.

Khác với hiệu ứng kính lỏng, Solid Glass không khiến nền cạnh tranh với văn bản. Bề mặt sử dụng màu xám trung tính, không uốn cong, chuyển động hay lấy màu từ nội dung phía sau. Hiệu ứng hoàn thiện đến từ một đường sáng ở phía trên, đường viền mảnh và bóng đổ bên dưới bề mặt.

Dự án bao gồm bộ component shadcn/ui và một tập hợp component dành cho các giao diện nơi một tác nhân AI đang làm việc. Trang Solid Glass chính thức trình bày chất liệu này trên các component hiện có và bao gồm trang Create để điều chỉnh các biến giao diện.

Tính năng và component chính

• Một stylesheet duy nhất áp dụng giao diện cho các component shadcn/ui bằng cách sử dụng các thuộc tính data-slot và class có sẵn.
• Giao diện định nghĩa các tên biến của shadcn/ui, bao gồm ba độ dày kính, màu sắc, chuyển động và trạng thái trực quan duy nhất.
• Chế độ tối là thiết kế chất liệu chính, đồng thời có sẵn giao diện sáng.
• Trang Create cho phép điều chỉnh độ dày, sắc màu, màu biểu đồ, kiểu, bán kính, viền và độ mờ, sau đó sao chép CSS kết quả.
• Registry cung cấp các component Solid Glass có thể cài đặt thông qua shadcn CLI.

Các component riêng của Solid Glass gồm status-glyph, panel, tag và dot-loader. Các component định hướng cho tác nhân gồm turn-status, composer, tool-steps, diff-view, ask-card, context-ring, task-notice và reasoning.

Cài đặt giao diện

1. Bắt đầu với một dự án shadcn/ui

Sử dụng dự án shadcn/ui dựa trên React 19, Tailwind CSS 4 và các component Base UI. Nếu bắt đầu từ đầu, hãy khởi tạo bằng:

npx shadcn@latest init

2. Thêm stylesheet Solid Glass

Bạn có thể cài stylesheet từ registry được lưu trữ hoặc trực tiếp từ 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. Import sau các stylesheet hiện có

Import Solid Glass sau stylesheet của Tailwind và shadcn/ui. Giao diện định nghĩa cùng các tên biến màu được tạo bởi shadcn init, vì vậy hãy xóa các khối biến màu :root và .dark được tạo tự động trước khi thêm import.

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

Sau import này, các component shadcn/ui hiện có của bạn có thể sử dụng chất liệu mà không cần thay đổi component. Để xem hướng dẫn cài đặt đầy đủ, hãy truy cập trang cài đặt Solid Glass.

Cài đặt component Solid Glass

Các component riêng của Solid Glass sử dụng cùng quy trình registry của shadcn. Ví dụ, cài đặt chỉ báo trạng thái bằng:

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

Lặp lại lệnh với URL registry của component khác. Các mục registry hiện có bao quát phần hiển thị trạng thái, panel, nhãn, chỉ báo tải, thông tin lượt của tác nhân, vùng soạn thảo, các bước công cụ, diff, câu hỏi, mức sử dụng ngữ cảnh, thông báo tác vụ và chế độ xem suy luận.

Chạy dự án cục bộ

Để làm việc trên showcase Solid Glass hoặc kiểm tra mã nguồn, hãy clone repository, cài đặt các dependency và khởi động development server:

npm install
npm run dev

Website phát triển chạy tại http://localhost:5191. Các lệnh build và kiểm tra là:

npm run build
npm run typecheck

Build ghi đầu ra production vào dist/.

Khám phá các công cụ phát triển

Repository bao gồm các route chỉ dành cho phát triển, giúp bạn kiểm tra giao diện và các ví dụ:

• /dev/banner hiển thị banner phát triển được dự án sử dụng.
• /dev/examples mount mọi ví dụ và báo cáo những ví dụ bị lỗi.
• /dev/examples?q=button,card lọc các ví dụ được hiển thị.
• /dev/examples?theme=light xem trước các ví dụ trong giao diện sáng.
• /dev/examples?hover=<selector> hiển thị một phần tử khớp như thể con trỏ đang ở trên đó.
• /dev/examples?click=<selector> nhấn một phần tử khớp để bạn kiểm tra nội dung nó mở ra.

Khi triển khai website bên ngoài vị trí GitHub Pages mặc định của repository, hãy đặt SOLID_GLASS_ORIGIN thành địa chỉ nơi website được cung cấp và SOLID_GLASS_BASE thành đường dẫn của website. Các component Solid Glass sử dụng origin khi tham chiếu lẫn nhau.

Tìm hiểu cấu trúc dự án

Các tệp và thư mục quan trọng nhất gồm:

• src/solid-glass.css chứa toàn bộ giao diện material.
• registry.json mô tả những gì shadcn CLI cài đặt. Quá trình build registry cũng tạo public/r/ cho website.
• src/components/ui/ chứa các component shadcn/ui và Solid Glass được hiển thị.
• src/create/ và src/pages/create.tsx triển khai trang tùy chỉnh material.
• src/examples/ chứa một tệp nhỏ cho mỗi ví dụ.
• content/ lưu tài liệu về component và dự án.
• scripts/build-docs.mjs chuyển tài liệu thành src/docs/generated.json.

Tạo component Solid Glass

Để thêm component riêng, hãy tuân theo cách tổ chức hiện có của dự án:

1. Tạo src/components/ui/<name>.tsx. Viết component theo kiểu shadcn/ui, sử dụng function component, thêm data-slot vào mọi phần tử và dùng cn() từ @/lib/utils.
2. Thêm src/examples/<name>-demo.tsx, cùng một tệp cho mỗi ví dụ bổ sung.
3. Tạo content/solid/<name>.mdx. Bao gồm front matter với tiêu đề và mô tả, phần xem trước component, hướng dẫn cài đặt, hướng dẫn sử dụng và một tiêu đề cho mỗi ví dụ.

Hãy giữ material nhất quán với bốn quy tắc thiết kế: lớp hoàn thiện nằm ở viền, bề mặt cần tạo cảm giác chắc nặng thay vì thoáng nhẹ, chiều sâu được thể hiện qua độ dày và giao diện sử dụng một trạng thái duy nhất.

Tùy chỉnh nâng cao với trang Create

Mở trang Create để điều chỉnh material một cách tương tác. Thay đổi độ dày, màu phủ, màu biểu đồ, kiểu, bán kính, viền và độ mờ trong khi phần xem trước được cập nhật. Khi kết quả phù hợp với giao diện của bạn, hãy sao chép đoạn CSS ngắn và điều chỉnh các biến liên quan trong stylesheet của dự án.

Các lựa chọn có sẵn được định nghĩa trong src/create/options.ts, còn các thẻ xem trước sử dụng component shadcn/ui. Nhờ đó, trang này vừa là công cụ thiết kế vừa là tài liệu tham khảo về cách các biến giao diện tác động đến material.

Kết luận

Solid Glass là một cách đơn giản để mang phong cách kính chắc, dễ đọc vào ứng dụng shadcn/ui hiện có. Cài stylesheet của nó sau các tệp giao diện thông thường, thêm các component tập trung cho agent từ registry khi cần và sử dụng các ví dụ cục bộ hoặc trang Create để tinh chỉnh kết quả. Dự án được phát hành theo MIT License; các component và tài liệu có nguồn gốc từ shadcn/ui vẫn thuộc MIT License của tác giả tương ứng như ghi chú trong NOTICE.md.