Repo này làm gì
Solid Glass là một design system cho ứng dụng AI, viết bằng TypeScript, chạy trên React, Tailwind CSS và shadcn/ui. Nói ngắn gọn: nó là một file CSS định nghĩa lại toàn bộ biến màu, độ dày, shadow, motion của shadcn/ui, biến giao diện mặc định thành một bề mặt “kính đặc” có viền mảnh, highlight ở cạnh và shadow mềm.
Vấn đề nó giải quyết khá cụ thể. Flat design thì khô, không có chiều sâu. Liquid glass (kiểu Apple) thì trong veo, mà trên trang nhiều chữ thì người đọc phải vật lộn với background để đọc được nội dung. Solid Glass chọn điểm giữa: chỉ cho đường viền lọt qua, đủ để biết đây là kính, không đủ để cản việc đọc.
README giải thích lý do khá thẳng: app AI có đặc thù thông tin liên tục thay đổi, response đang stream, agent đang chạy task, quyết định đang chờ người dùng bấm. Giao diện cần bình tĩnh, chữ đọc được, màu và motion chỉ dùng cho feedback có nghĩa. Nghe hợp lý, và đó cũng là thứ nhiều chat UI hiện nay làm hỏng.
Vì sao đang hot
Repo mới tạo ngày 2026-10-12, cập nhật 2026-10-16, tức là 4 ngày sau đã có 1.678 sao. Con số đó nói lên hai chuyện: thứ nhất là tốc độ lan truyền, thứ hai là có một khoảng trống thật trong nhu cầu của dev làm AI app.
Điểm khác biệt nằm ở chỗ nó không bắt bạn đổi component. Solid Glass là một stylesheet duy nhất, nó tìm từng phần của component shadcn/ui qua thuộc tính data-slot và các class sẵn có. Component bạn đang dùng không cần sửa gì. Với ai đã có project shadcn/ui, đây là kiểu tích hợp dễ chịu nhất: thêm một file CSS, xóa vài biến màu trùng tên, xong.
Nó cũng có sẵn bộ component riêng cho ngữ cảnh agent: status-glyph (ba điểm sáng báo agent đang làm gì), composer, tool-steps, diff-view, ask-card, context-ring, task-notice, reasoning. Đây là những thứ ai build agent UI cũng phải tự viết lại từ đầu, ít nhất một lần.
Cài và dùng thử
Yêu cầu xuất phát điểm là project shadcn/ui với React 19, Tailwind CSS 4 và Base UI components:
npx shadcn@latest initThêm stylesheet trực tiếp từ repo:
npx shadcn@latest add deeplethe/solid-glass/solid-glassImport nó sau Tailwind và stylesheet của shadcn, đồng thời xóa biến màu :root và .dark mà shadcn init đã ghi (Solid Glass định nghĩa trùng tên):
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "./solid-glass.css";Component riêng của Solid Glass cũng cài qua cùng cơ chế registry:
npx shadcn@latest add deeplethe/solid-glass/status-glyphChạy site demo cục bộ:
npm install
npm run dev # http://localhost:5191
npm run build # into dist/README ghi rõ dark là bản được thiết kế chính, light có nhưng là bản phụ. Ai làm app chủ yếu light mode thì nên xem kỹ trước khi commit.
Ai nên dùng, dùng vào việc gì
Rõ nhất là dev đang build chat UI hoặc agent UI trên nền shadcn/ui. Bạn có sẵn một dashboard nội bộ cho LLM, cần thêm panel hiển thị tool steps, diff của code agent sửa, hỏi lại người dùng qua ask-card, hiển thị context còn bao nhiêu qua context-ring. Những mảnh đó Solid Glass có sẵn, và nó có trang Blocks với cả màn hình hoàn chỉnh để đọc và copy.
Nhóm thứ hai là ai muốn thử nghiệm giao diện mà không muốn viết CSS từ đầu. Trang Create cho phép chỉnh các “núm” (thickness, tint, chart colour, type, radius, rim, blur), preview cập nhật theo từng lựa chọn, và xuất ra vài dòng CSS tương ứng. Đây là kiểu tooling mà design system nào cũng nên có, nhất là khi theme là một file CSS duy nhất như trường hợp này.
Không phù hợp lắm với ai đang dùng Material UI, Chakra hay Ant Design. Solid Glass bám vào shadcn/ui và Tailwind 4, đổi stack để dùng nó là cái giá không đáng.
So sánh ngắn
So với shadcn/ui mặc định: shadcn cho bạn component không style, bạn tự quyết định hình dáng. Solid Glass là một quyết định hình dáng có sẵn, đổi lại bạn mất tính trung lập. Nhưng nếu bạn thích hướng của nó thì tiết kiệm được kha khá thời gian.
So với các thư viện “glassmorphism” nổi trên mạng: phần lớn trong số đó chỉ là vài utility class blur và border trắng, dán lên là xong, không có hệ thống độ dày hay state. Solid Glass có ba độ dày kính, một trạng thái, và một bộ motion được định nghĩa trong cùng file. Khác biệt về mức độ hoàn chỉnh khá rõ.
Ưu điểm và những chỗ cần cân nhắc
Ưu điểm thực tế: MIT license, không ràng buộc thương mại. CSS thuần, nhẹ, không kéo theo runtime. Tích hợp không xâm lấn component hiện có. Có sẵn component cho agent UI, đúng phần đang thiếu ở nhiều dự án.
Mặt hạn chế thì cũng thật. Repo 4 ngày tuổi, 1.678 sao đến từ đợt lan truyền đầu, chưa có gì chứng minh nó sống được qua vài tháng refactor. README ghi rõ một số component shadcn/ui trong repo (button, input, tabs, dialog, dropdown-menu, sheet, sidebar và vài form control) khác bản gốc ở những điểm nhỏ. Họ nói stylesheet không phụ thuộc vào khác biệt đó, nhưng đây là chỗ dễ vỡ khi shadcn/ui lên version.
Tài liệu nằm trong thư mục content/, render thành site ở deeplethe.github.io/solid-glass. Đủ để bắt đầu, chưa đủ dày cho một team lớn onboarding. Và vì là một file CSS định nghĩa lại biến của shadcn, mọi thay đổi upstream ở shadcn/ui đều có thể làm lệch theme, bạn nên pin version và đọc diff trước khi update.
Kết luận
Nếu bạn đang có project shadcn/ui và cần một giao diện cho app AI mà chữ vẫn đọc được trên nền tối, thử deeplethe/solid-glass mất khoảng 10 phút: một lệnh shadcn add, một dòng import, xóa vài biến màu. Rủi ro thấp, vì gỡ ra cũng chỉ là xóa file CSS. Còn chuyện đưa nó vào production thì nên chờ thêm, 4 ngày và 1.678 sao chưa nói được gì về độ ổn định.
