Neobrutalistthành phần React UI
Các thành phần React dễ tiếp cận theo phong cách neo-brutalist — viền dày, đổ bóng mạnh, màu sắc rực rỡ. Mỗi thành phần có cả bản Radix UI, Base UI và React Aria, cài bằng shadcn CLI và bàn giao dưới dạng mã nguồn thuộc về bạn.
Nút
01/07Nhấn chìm vào bóng đổ cứng của chính nó.
npx shadcn add neobrutalism.com/r/base/button.json- 50+ các thành phần
- Đường viền dày, bóng đổ đậm
- shadcn CLI cài đặt
- Radix · Base UI · React Aria
- Radix · Base UI · React Aria
- Mặc định là có thể truy cập được
- Mã này là của bạn
- MCP hỗ trợ máy chủ
- Chế độ tối & RTL
- Những nhãn hiệu nhỏ nhưng nổi bật
Tất cả thành phần
Accordion
Một bộ các phần có thể mở rộng được xếp chồng theo chiều dọc dành cho mục Câu hỏi thường gặp (FAQ), cài đặt và các trang có nhiều nội dung — với phong cách thiết kế theo trường phái tân thô mộc, kết hợp giữa đường viền và bóng đổ.
Ảnh đại diện
Hình đại diện người dùng kèm tùy chọn hiển thị chữ viết tắt thay thế cho menu hồ sơ, chuỗi bình luận và danh sách nhóm — với hiệu ứng viền dày theo phong cách tân thô mộc.
Bảng
Một bảng HTML mang tính ngữ nghĩa dành cho hóa đơn, danh sách quản trị và bảng giá — các hàng có viền, tiêu đề in đậm và hiệu ứng bóng theo phong cách tân thô mộc.
Bảng bên
Một bảng điều khiển trượt vào từ mép màn hình để hiển thị các thanh điều hướng, bộ lọc và biểu mẫu chỉnh sửa — với hiệu ứng viền và bóng theo phong cách tân thô mộc.
Băng chuyền
Một trình chiếu có thể vuốt để xem các bộ sưu tập sản phẩm, lời chứng thực và các phần nổi bật — được thiết kế với các đường viền theo phong cách tân thô mộc và hiệu ứng bóng đậm.
Bảng dữ liệu
Các bảng có thể sắp xếp, lọc và phân trang dành cho bảng điều khiển quản trị, bảng điều khiển tổng quan và danh sách đơn hàng — với phong cách thiết kế “neobrutalist” kết hợp đường viền và bóng đổ.
Bật/tắt
Nút bật/tắt hai trạng thái dành cho các chức năng định dạng thanh công cụ, tắt tiếng và ghim — với hiệu ứng viền và bóng theo phong cách tân thô mộc.
Cảnh báo
Một hộp chú thích hiển thị ngay trong biểu mẫu để thông báo lỗi, cảnh báo và xác nhận thành công — các ô có màu theo trạng thái, viền theo phong cách tân thô mộc và bóng đổ đậm.
Chọn
Một menu thả xuống để chọn một tùy chọn — các trường quốc gia, thứ tự sắp xếp, cài đặt chủ đề — với đường viền dày theo phong cách tân thô mộc và bóng đổ đậm.
Chọn ngày
Một lịch dạng popover dùng để chọn ngày đơn lẻ, khoảng thời gian và ngày sinh nhật trong các biểu mẫu và bộ lọc — với viền theo phong cách neobrutalist và hiệu ứng bóng đậm.
Chú thích
Gợi ý khi di chuột và khi nhấn vào các nút biểu tượng, phím tắt và nhãn bị cắt ngắn — với hiệu ứng viền và bóng theo phong cách tân thô mộc.
Có thể đổi kích thước
Các khung chia đôi có thể kéo thả dành cho trình soạn thảo mã nguồn, cây thư mục và bố cục bảng điều khiển — với phong cách viền và bóng theo trường phái tân thô mộc.
Công tắc
Một nút gạt bật/tắt để điều chỉnh cài đặt ngay lập tức — thông báo, chế độ tối, các tính năng thử nghiệm — với phong cách thiết kế theo trường phái tân thô mộc, kết hợp giữa đường viền và bóng đổ.
Đường dẫn
Hiển thị vị trí của trang trong hệ thống phân cấp của trang web — các đường dẫn liên kết cho tài liệu, danh mục cửa hàng và bảng điều khiển — bằng phông chữ kiểu tân-brutalist in đậm.
Hộp kiểm
Công tắc nhị phân cho các ô đồng ý, bộ lọc chọn nhiều mục và tính năng chọn hàng hàng loạt — với hiệu ứng viền và bóng theo phong cách tân thô mộc.
Hộp thoại
Một cửa sổ bật lên dùng để xác nhận, điền biểu mẫu nhanh và hiển thị thông báo cảnh báo trước các thao tác có thể gây mất dữ liệu — hiển thị chồng lên trang với viền dày và bóng đổ đậm.
Hộp thoại cảnh báo
Một cửa sổ bật lên ngăn chặn quá trình thực hiện các hành động gây mất dữ liệu — xóa, đăng xuất, hủy bỏ — với phong cách thiết kế theo trường phái tân thô mộc, kết hợp giữa đường viền và bóng đổ.
Hộp tổ hợp
Một trường nhập liệu có tính năng tự động hoàn thành, lọc các tùy chọn khi bạn gõ — các trường chọn quốc gia, trường nhập thẻ, danh sách thả xuống dài — với viền và bóng theo phong cách neobrutalist.
Hướng
Một trình cung cấp bối cảnh giúp chuyển đổi các thành phần giữa hướng từ trái sang phải (LTR) và từ phải sang trái (RTL), nhờ đó các menu, thanh trượt và tab sẽ hiển thị đúng hướng trong tiếng Ả Rập, tiếng Do Thái và tiếng Ba Tư.
Huy hiệu
Một kiểu nhãn nhỏ dành cho trạng thái, số lượng và thẻ trên các thẻ, bảng và mục điều hướng — với phong cách viền và bóng theo trường phái tân thô mộc.
Khung xương
Một khối giữ chỗ nhấp nháy dành cho thẻ, ảnh đại diện và bảng trong khi dữ liệu đang được tải — với hiệu ứng viền dày theo phong cách tân thô mộc.
Lệnh
Một bảng lệnh điều khiển bằng bàn phím dành cho các menu ⌘K, tính năng tìm kiếm toàn cục và các thao tác nhanh — với phong cách thiết kế theo trường phái tân thô mộc, kết hợp đường viền và bóng đổ.
Lịch
Công cụ chọn ngày theo dạng lưới tháng dành cho đặt chỗ, lập lịch và chọn khoảng thời gian — với phong cách thiết kế theo trường phái tân thô mộc, kết hợp đường viền và bóng đổ.
Menu điều hướng
Một thanh ngang chứa các liên kết và các bảng thả xuống dành cho phần đầu trang, thanh điều hướng tài liệu và giao diện ứng dụng — với các đường viền theo phong cách tân thô mộc và hiệu ứng bóng đậm.
Menu ngữ cảnh
Menu chuột phải dành cho các hàng tệp, khung vẽ và lưới dữ liệu — các thao tác theo ngữ cảnh với hiệu ứng viền và bóng theo phong cách tân thô mộc.
Menu thả xuống
Một menu được kích hoạt bằng nút bấm dành cho các thao tác trên hàng, công cụ chuyển đổi tài khoản và các tùy chọn hiển thị — với phong cách thiết kế theo trường phái tân thô mộc, kết hợp viền và bóng đổ.
Mục
Một hàng linh hoạt với các ô dành cho phương tiện, tiêu đề, mô tả và hành động, dùng cho các nguồn thông báo, danh sách cài đặt và các hàng tệp — theo phong cách neobrutalist.
Ngăn kéo
Một giao diện điều khiển bằng cử chỉ, có thể trượt vào từ bất kỳ cạnh nào, dành cho các menu trên thiết bị di động, bộ lọc và biểu mẫu nhanh — với các đường viền và hiệu ứng bóng theo phong cách tân thô mộc.
Nhãn
Chú thích cho các trường nhập liệu, ô chọn, công tắc và nhóm nút radio — nhấp chuột sẽ kích hoạt điều khiển, được hiển thị bằng phông chữ tiêu đề theo phong cách tân thô mộc.
Nhập OTP
Nhập mã dùng một lần cho xác thực hai yếu tố (2FA), xác minh đăng nhập và màn hình nhập mã PIN — các ô hỗ trợ dán mã với viền theo phong cách tân brutalist và hiệu ứng bóng đậm.
Nhóm bật/tắt
Các nhóm nút hai trạng thái dành cho thanh công cụ trình soạn thảo, công cụ chuyển đổi chế độ xem và thanh lọc — với hiệu ứng viền và bóng theo phong cách tân thô mộc.
Nhóm nút
Fuses kết hợp các nút chia nhỏ, thanh công cụ và tiện ích nhập liệu thành một đơn vị có khung — một đường viền dày, một bóng đổ đậm, một thao tác nhấn chung.
Nhóm ô nhập
Gắn các biểu tượng, nút bấm và chú thích bàn phím vào các trường nhập liệu dành cho thanh tìm kiếm, trường URL và trình soạn thảo trò chuyện — với viền và bóng theo phong cách neobrutalist.
Nhóm radio
Một bộ nút radio chọn một tùy chọn duy nhất dành cho các biểu mẫu về gói cước, tùy chọn vận chuyển và cài đặt — với phong cách thiết kế theo trường phái tân thô mộc, kết hợp viền và bóng đổ.
Nút
Một nút kích hoạt có thể nhấp để gửi biểu mẫu, thanh công cụ và các hộp xác nhận hủy bỏ — với viền dày và hiệu ứng bóng mờ xuất hiện khi nhấp vào.
Ô nhập
Trường văn bản một dòng dành cho các ô đăng nhập, thanh tìm kiếm và biểu mẫu thanh toán — với hiệu ứng viền dày và bóng đổ đậm theo phong cách tân thô mộc.
Phân cách
Một đường kẻ ngang hoặc dọc dùng để phân chia các menu, thanh công cụ và danh sách — được vẽ bằng cùng màu viền đậm như các khung theo phong cách tân thô mộc.
Phân trang
Các liên kết trang được đánh số kèm theo các nút điều hướng “trước”/“sau” dành cho kết quả tìm kiếm, bảng dữ liệu và kho lưu trữ — theo phong cách “neobrutalist” với đường viền và bóng đổ.
Phím
Nắp phím bàn phím hiển thị gợi ý phím tắt trong menu, chú giải công cụ và bảng lệnh — một phần tử `kbd` gốc với viền và bóng theo phong cách tân thô mộc.
Popover
Một bảng điều khiển nổi được gắn với một bộ kích hoạt dành cho các công cụ chọn ngày, bộ lọc và biểu mẫu nhúng — với phong cách viền và bóng theo trường phái tân thô mộc.
Select gốc
Thành phần select HTML gốc được thiết kế lại dành cho biểu mẫu, bộ lọc và công cụ chọn quốc gia — menu thả xuống được hệ điều hành hiển thị với viền và bóng theo phong cách neobrutalist.
Sonner
Các thông báo dạng “toast” xếp chồng lên nhau cho các thao tác xác nhận lưu, tải lên và cửa sổ hoàn tác — với hiệu ứng viền và bóng theo phong cách “neobrutalist”.
Tab
Chuyển đổi giữa các bảng nội dung xếp lớp — trang cài đặt, bảng điều khiển và bản xem trước mã — với hiệu ứng đường viền và bóng theo phong cách tân thô mộc.
Thanh bên
Một thanh điều hướng dạng vỏ ứng dụng có thể thu gọn dành cho bảng điều khiển, tài liệu và công cụ quản trị — với phong cách thiết kế “neobrutalist” kết hợp đường viền và bóng đổ.
Thanh menu
Một thanh ngang chứa các menu thả xuống dành cho thanh công cụ, trình soạn thảo và bảng điều khiển theo phong cách ứng dụng — với hiệu ứng viền và bóng theo phong cách tân thô mộc.
Thanh trượt
Một trường nhập liệu có thể kéo thả để chọn giá trị hoặc phạm vi — chẳng hạn như mức âm lượng, bộ lọc giá, cài đặt — với hiệu ứng viền và bóng theo phong cách neobrutalist.
Thẻ
Một khung có viền dành cho bảng điều khiển, các gói giá và bảng danh sách sản phẩm — bao gồm phần đầu trang, nội dung và phần chân trang, được áp dụng hiệu ứng bóng cứng theo phong cách tân thô mộc.
Thẻ khi hover
Một cửa sổ xem trước nổi hiện ra khi di chuột qua — xem trước hồ sơ, xem trước liên kết, các thuật ngữ trong từ điển — với hiệu ứng viền và bóng theo phong cách tân thô mộc.
Thu gọn
Một cặp nút kích hoạt và bảng điều khiển dành cho cây thư mục, cài đặt nâng cao và các phần “hiển thị thêm” — với hiệu ứng viền và bóng theo phong cách tân thô mộc.
Tiến trình
Một thanh mỏng sẽ được lấp đầy khi một tác vụ hoàn tất — tải lên, cài đặt, quy trình hướng dẫn sử dụng nhiều bước — với hiệu ứng viền và bóng theo phong cách tân thô mộc.
Trống
Một biểu tượng đại diện cho các kết quả tìm kiếm trống, bảng điều khiển trống và màn hình khởi động lần đầu — bao gồm biểu tượng, tiêu đề và hành động được bao quanh bởi các đường viền theo phong cách tân thô mộc.
Trường
Các trường dành cho nhãn, trường điều khiển, văn bản hướng dẫn và thông báo lỗi trong các bảng cài đặt, biểu mẫu thanh toán và quy trình đăng ký — với phong cách thiết kế biểu mẫu theo trường phái tân thô mộc.
Tỷ lệ khung hình
Giữ cho hình ảnh, video nhúng và bản đồ duy trì tỷ lệ cố định khi thay đổi kích thước — tiện ích bố cục giúp các thẻ theo phong cách tân thô mộc luôn nằm gọn trong lưới.
Typography
Các mẫu thiết kế đa dụng dành cho tiêu đề, nội dung chính, danh sách, bảng và mã nhúng — được định dạng theo phong cách “neobrutalist” đậm nét.
Vòng tải
Một chỉ báo tải động dành cho các thao tác gửi, truy xuất đang chờ xử lý và các trạng thái bận trong nội dung — một biểu tượng có thể tích hợp ngay vào bất kỳ thành phần điều khiển theo phong cách neobrutalist nào.
Vùng cuộn
Một vùng chứa có thể cuộn với thanh cuộn tùy chỉnh, tương thích trên nhiều trình duyệt dành cho các khung trò chuyện, thanh bên và cây thư mục — kèm theo nút cuộn kiểu neobrutalist dày dặn.
Vùng văn bản
Một trường nhập văn bản nhiều dòng dành cho bình luận, tiểu sử và tin nhắn hỗ trợ — với hiệu ứng viền và bóng theo phong cách tân thô mộc.