21st.dev - kho hơn 12.000 component, template và theme React dán thẳng vào Claude Code, repo mở hơn 5.400 sao
Bạn gõ cho AI: "làm cho tôi cái hero section thật xịn" (hero section là mảng đầu trang, thứ người ta nhìn thấy trước nhất). Nhận về một trang nhàn nhạt, na ná mấy trang đã thấy đâu đó.
Không phải AI kém. Nó có mỗi lời bạn tả để dựng nên, chứ không có sẵn kho mẫu đẹp nào để lấy ra dùng.
21st.dev đưa cho nó đúng cái đang thiếu.
Đây là một chợ component React (những mảnh giao diện dựng sẵn: nút bấm, thẻ, menu, hero...) viết theo chuẩn Tailwind CSS và shadcn/ui. Trang chủ ghi hơn 12.000 component, template và theme, do các design engineer thật đăng lên, mỗi cái đều có tên tác giả.
Điểm hay nhất: mỗi component là một prompt.
Bạn thấy cái nút đẹp, bấm copy, dán vào Claude Code. Source code rơi thẳng vào repo của bạn, React và Tailwind thật, sửa được thoải mái. Không phải ảnh chụp màn hình để bạn ngồi tả lại.
Cắm thẳng vào Claude Code:
Trang chính chủ có sẵn một plugin gộp hết vào một lần cài.
Bạn cần lấy một API key (chìa khóa để công cụ gọi được dịch vụ) trên trang, đặt vào biến môi trường là chạy.
Xong rồi thì Claude tự tìm component trong kho, tự lấy code về và cài vào dự án, thay vì ngồi bịa giao diện. Trang cũng có hướng dẫn riêng cho Codex, Cursor, Lovable, và cách cắm thẳng vào bất cứ công cụ nào đọc được MCP (cầu nối để AI gọi công cụ bên ngoài).
Vài điểm nói cho rõ ràng:
Nhưng dịch vụ thì không phải mọi thứ đều miễn phí. Trang chính chủ ghi rõ: tìm kiếm, đăng component và quản lý là miễn phí, phần cài giới hạn 2 lượt một ngày, còn phần sinh giao diện bằng AI thì tiêu credit. Muốn cài không giới hạn thì phải trả tiền.
Nói trước để mọi người khỏi hụt hẫng lúc vào. Nhưng riêng phần duyệt kho và copy prompt đã đủ để có ý tưởng làm giao diện rồi.
Bạn nào đang vibe coding mà mãi chưa ưng giao diện thì vào kho này xem thử. Lưu bài lại lúc nào cần dùng.
Đăng nhận xét