Chakra UI là một thư viện thành phần để xây dựng các ứng dụng React. Nó có một bộ các thành phần dễ dàng tạo kiểu, linh hoạt, có thể kết hợp và có thể truy cập. Mỗi thành phần tuân theo thông số kỹ thuật hướng dẫn của WAI-ARIA. Hầu hết các thành phần là chế độ tối tương thích.
Page 2
Ngày hôm nay chúng ta sẽ đi vào tìm hiểu những thư viện UI cho React, Vue và Angular được các lập trình viên hay sử dụng trong quá trình thiết kế và phát triển web nhé!
Thư Viện UI Cho React
MATERIAL-UI(React)
MATERIAL-UI(React) component giúp bạn dễ dàng thiết lập và phát triển nhanh chóng cho trang web theo phong cách thiết kế Material.
Nguồn
React Bootstrap
React Bootstrap là một trong những thư viện React lâu đời với hơn 18k sao trên github. Nó lấy Bootstrap làm trọng tâm và không cần phải phụ thuộc vào thư viện Jquery. Và nó có hai phiên bản chính là v0.33.1 cho Bootstrap3 và v1.4.0 cho Bootstrap 4.5.
Nguồn
React Suite
React Suite là một tthư viện component cho react dành cho các doanh nghiệp vừa và nhỏ. Các điểm mạnh của nó là thiết kế giao diện thân thiện với người dùng, dễ dàng chỉnh sửa, đa dạng các loại component...
Nguồn
Chakra UI
Chakra UI cung cấp các component cho React với khả năng truy cập dễ dàng (accessible), có thể sử dụng lại (reusable), kết hợp với các component khác. Ngoài ra nó còn có chế độ dark-mode cho bạn nào thích phồng nền đen cho trang web.
Nguồn
Blueprint
Blueprint là một bộ công cụ xây dựng giao diện cho người dùng dựa trên React cho trang web. Nó được tối ưu hóa để xây dựng các trang web phức tạp với dữ liệu lớn và có thể chạy trên nhiều trình duyệt phổ biến ngày nay.
Nguồn
PRIMEREACT
PRIMEREACT là một thư viện cung cấp hơn 70 component cho thiết kế web. Nó là mã nguồn mở nên bạn có thể hoàn toàn sử dụng cho dự án cá nhân và thương mại. Một điểm mạnh của nó mà mình thích nhất là cách tối ưu hóa các component trên thiết bị điện thoại.
Nguồn
Treact
Treact là thư viện UI được xây dựng bởi sự kết hợp giữa React và TailwindCSS. Nó cung cấp hơn 52 component dành chuyên cho trang landing page, 7 ví dụ về landing page và 8 demo inner page. Ngoài ra nó cũng thiết kế các component để responsive trên nhiều màn hình thiết bị khác nhau cho trang web.
Nguồn
Carolina React Admin Dashboard
Carolina React Admin Dashboard là thư viện UI dành chuyên việc thiết kế bảng điều khiển dành cho các quản trị viên web. Nó được thiết kế theo phong cách tối giản và gọn gàng của Material Google. Ngoài ra nếu bạn muốn thêm nhiều component khác thì có thể nâng cấp lên gói pro với khoảng 59$/năm.
Nguồn
Semantic UI React
Semantic UI React là thư viện UI dành cho React với hơn 50 component được thiết kế responsive trên nhiều màn hình thiết bị khác nhau. Do nó là mã nguồn mở nên bạn có thể hoàn toàn sử dụng cho nhiều dự án khác nhau từ cá nhân cho đến thương mại...
Nguồn
React Toolbox
React Toolbox là nơi tập hợp các component React được thiết kế theo phong cách Material. Nó được xây dựng dựa trên một số đề xuất xu hướng như là mô-đun CSS (được viết bằng SASS), webpack và ES6. Theo mình thấy nó có phần hướng dẫn rất chi tiết cho việc áp dụng các đoạn mã của thư viện vào việc phát triển web.
Nguồn
Elastic UI
Elastic UI là thư viện UI React Component cho việc xây dựng và phát triển web. Nó có một số điểm mạnh như là sử dụng bảng màu đa dạng, độ tương phản cao, dễ dàng thay đổi chủ đề cho trang web, đáp ứng được cho nhiều loại dự án web khác nhau, các đoạn mã dễ dàng sử dụng cho người mới...
Nguồn
Evergreen
Evergreen là React UI Framework để xây dựng các sản phẩm với thiết kế đẹp mắt và cng cấp đầy đủ tính năng cho trang web. Ngoài ra nó cũng cho bạn toàn quyền kiểm soát và tùy chỉnh các component khi cần thiết. Do là mã nguồn mở nên bạn có thể sử dụng cho nhiều dự án khác nhau mà không cần phải quan tâm đến vấn đề bản quyền nhé!
Nguồn
Bumbag
Bumbag là một Ract UI Kit thân thiện phù hợp với các MVP hoặc các ứng dụng có quy mô lớn. Một số tiện ích của thư viện này là tuân theo tiêu chuẩn WAI-ARIA, có khả năng tự kiểm soát và tùy chỉnh bất kỳ component nào trong trang web, linh hoạt xây dựng và phát triển các component khác...
Nguồn
Bumbag
Bumbag là một Ract UI Kit thân thiện phù hợp với các MVP hoặc các ứng dụng có quy mô lớn. Một số tiện ích của thư viện này là tuân theo tiêu chuẩn WAI-ARIA, có khả năng tự kiểm soát và tùy chỉnh bất kỳ component nào trong trang web, linh hoạt xây dựng và phát triển các component khác...
Nguồn
Rimble
Rimble là thư viện mã nguồn mở dành cho React Component với các hướng dẫn chi tiết dành cho việc thiết kế và phát triển trang web.
Nguồn
Grommet
Grommet là trang web tập hợp nhiều component React hữu ích dành cho trang web với tiêu chí là xây dựng và thiết kế responsive cho thiết bị điện thoại trước.
Nguồn
ReactAdmin
ReactAdmin là thư viện mã nguồn mở chuyên cung cấp các component dành cho việc phát triển giao diện quản trị web với nhiều tiện ích như là cung cấp chức năng quản lý dữ liệu, hỗ trợ việc tạo liên hệ giữa các bảng, cung cấp bộ lọc, trình soạn thảo văn bản...
Nguồn
Primer
Primer là thư viện component dành cho React với nhiều tính năng như là dễ dàng áp dụng cho nhiều loại dự án web khác nhau, tối giản độ phức tạp component đến múc ít nhất có thể, dễ dàng mở rộng và tinh chỉnh component...
Nguồn
Thư Viện UI Cho Vue
Vuetify
Vuetify là thư viện UI component dành cho VueJs với thiết kế đẹp mắt với mục đích là dễ dàng sử dụng cho người mới bắt đầu với hàng trăm component được xây dựng và thiết kế tỉ mỷ. Ngoài ra nó cũng có một số điểm mạnh khác như là ưu tiên cho việc hiển thị trên thiết bị mobile trước, hỗ trợ lâu dài...
Nguồn
Buefy
Buefy là thư viện mã nguồn mở được xây dựng dựa trên Vue.js và Bulma. Tất cả các component đều được responsive trên nhiều màn hình thiết bị và không phụ thuộc vào các thư viện khác.
Nguồn
Quasar
Quasar là framework mã nguồn mở giúp việc xây dựng giao diện bằng Vuejs được dễ dàng và nhanh chóng hơn. Ngoài việc dành cho trang web thì nó còn có thể xây dựng ứng dụng SSR, PWA, tiện ích mở rộng cho trình duyệt, ứng dụng mobile...
Nguồn
BootstrapVue
BootstrapVue là thư viện được xây dựng dựa trên sự kết hợp của Vue và Bootstrap với các điểm nổi bật như là xây dựng trên thiết bị điện thoại trước, có thể truy cập ARIA, cung cấp hơn 85 component và 45 plugin, hơn 1100 icon... Do là mã nguồn mở nên bạn có thể hoàn toàn sử dụng cho tất cả các loại dự án khác nhau.
Nguồn
VueJS Example
VueJS Example là nơi tập hợp nhiều ví dụ component sử dụng cho Vue như là danh sách, bảng, card, layout, timline...
Nguồn
KeenUI
KeenUI là thư viện UI Vue.js theo thiết kế Google Material cho trang web.
Nguồn
Vuesax
Vuesax là thư viện mã nguồn mở dành cho Vue Js Component với một số tính năng nổi bật như là dễ dàng tái sử dụng, khả năng tùy biến cao, hỗ trợ thích ứng trên nhiều thiết bị, dễ dàng triển giao diện từ đơn giản đến phức tạp...
Nguồn
TC Component
TC Component là thư viện giao diện được xây dựng dựa trên VueJS giúp cải thiện quá trình và thời gian xây dựng phát triển web.
Nguồn
Thư Viện UI Cho Angular
Angular Material
Angular Material là thư viện UI component Angular với nhiều component được thiết kế đẹp mắt và hiệu suất cao cho trang web. Nó cung cấp API đơn giản có tính nhất quán cao, cung cấp các công cụ giúp các lập trình viên có thể phát triển component dành riêng cho mình.
Nguồn
PRIMENG
PRIMENG là thư viện mã nguồn mở cung cấp hơn 80 component cho Angular, đa dạng sự lụa chọn mẫu thiết kế như là Bootstrap và Material, khả năng tùy biến cao, được cộng đồng hỗ trợ đông đảo, dễ dàng xử lý các giao diện người dùng phức tạp, nâng cao trải nghiệm người dùng cho thiết bị di động...
Nguồn
Ng-Bootstrap
Ng-Bootstrap là thư viện UI Angular được xây dựng dựa trên việc lấy giao diện Bootstrap làm cốt lõi với nhiều component như là carousel, modal, popover, tooltip...
Nguồn
Nebular
Nebular là thư viện giúp bạn dễ dàng tạo ra các component cho Angular với tính tùy chỉnh cao, độ bảo mật cao, tốc độ nhanh... Do là mã nguồn mở nên bạn hoàn toàn yên tâm sử dụng cho nhiều loại dự án web khác nhau nha.
Nguồn
Clarity
Clarity là sự kết hợp giữa việc sử dụng framwork HTML, CSS cho thiết kế dữ liệu và Angular cho các thành phần liên kết dữ liệu, hiệu suất cho trang web.
Nguồn
Một Số UI Khác
Ant Design
Nguồn
Onsen UI
Nguồn
Shard
Nguồn
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thư viện UI hữu ích việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!