Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Những Thư Viện  UI Cho React, Vue Và Angular

Những Thư Viện UI Cho React, Vue Và Angular


Ngày 29 Tháng 11 Năm 2020

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.

MATERIAL-UI(React)

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.

React Bootstrap

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...

React Suite

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.

Chakra UI

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.

Blueprint

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.

PRIMEREACT

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.

Treact

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.

Carolina React Admin Dashboard

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...

Semantic UI React

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.

React Toolbox

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...

Elastic UI

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é!

Evergreen

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...

Bumbag

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...

Bumbag

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.

Rimble

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.

Grommet

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...

ReactAdmin

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...

Primer

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...

Vuetify

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.

Buefy

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...

Quasar

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.

BootstrapVue

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...

VueJS Example

Nguồn

KeenUI

KeenUI là thư viện UI Vue.js theo thiết kế Google Material cho trang web.

KeenUI

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...

Vuesax

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.

TC Component

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.

Angular Material

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...

PRIMENG

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...

Ng-Bootstrap

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.

Nebular

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.

Clarity

Nguồn

Một Số UI Khác

Ant Design

Ant Design

Nguồn

Onsen UI

Onsen UI

Nguồn

Shard

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ẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.