Tất cả component

74 primitive, sinh tự động từ registry.json

Trạng thái biên

Lỗi, rỗng, đang tải, vô hiệu hoá — những trạng thái mà một trang chỉ đi đường thành công sẽ không bao giờ chạm tới.

Quá hạnSắp hết hạnHoàn tấtĐang xử lý

Email không hợp lệ.

Không có dữ liệu

0–0 trên 0
Số dòng mỗi trang
Trang 1 / 1
Đang tải...
0–0 trên 0
Số dòng mỗi trang
Trang 1 / 1
0–0 trên 0
Số dòng mỗi trang
Trang 1 / 1

Form 21 component

Button

button

Checkbox

checkbox

CodeEditor

code-editor

223 ký tự

Combobox

combobox

Đã chọn: Hà Nội

ComboboxCreatable

combobox-creatable

Đã chọn: Hướng dẫn

FileUpload

file-upload

Kéo thả tệp vào đây

Định dạng: image/*,.pdf - Tối đa 5.0 MB mỗi tệp

  • anh-san-pham.webp

    243 KB

  • video-gioi-thieu.mp4

    18 MB

  • tai-lieu.pdf

    9.3 MB

    Tệp vượt quá 5 MB.

Form

form

Tên hiển thị trên hồ sơ của bạn.

ImageCropper

image-cropper

Dùng phím mũi tên để di chuyển vùng cắt, giữ Shift và bấm mũi tên để đổi kích thước.

Kéo vùng cắt rồi bấm Cắt ảnh để nhận File.

Input

input

Email không hợp lệ.

Input OTP

input-otp

Label

label

NumberInput

number-input

Radio Group

radio-group

RichText

rich-text
HTML
<h2>Khoá học React nâng cao</h2>
<p>Khai giảng <strong>12/09</strong>. Còn <em>8 chỗ</em>, xem <a href="/dang-ky">trang đăng ký</a>.</p>
<ul><li>Server Components</li><li>Suspense và streaming</li></ul>
<blockquote>Học xong là làm được, không phải học xong là biết.</blockquote>

SaveBar

save-bar

2 thay đổi chưa lưu

Select

select

Slider

slider

Switch

switch

Textarea

textarea

Toggle

toggle

ToggleGroup

toggle-group

Overlay 10 component

Alert Dialog

alert-dialog

Command

command

Context Menu

context-menu
Chuột phải vào đây

Dialog

dialog

Drawer

drawer

Dropdown Menu

dropdown-menu

Hover Card

hover-card

Popover

popover

Sheet

sheet

Tooltip

tooltip

Layout 10 component

Accordion

accordion

Aspect Ratio

aspect-ratio
Ảnh minh hoạ 16:9

Card

card
Gói Chuyên nghiệp
Dành cho đội nhóm cần nhiều tính năng hơn.

Bao gồm báo cáo nâng cao, hỗ trợ ưu tiên và tối đa 20 thành viên.

Carousel

carousel
Bài 1
Bài 2
Bài 3
Bài 4
Bài 5

Collapsible

collapsible

3 dự án đang mở

reno-ui

PageHeader

page-header

Nhân viên

Tháng 10/2026 · GMT+7

Resizable

resizable
Danh sách
Chi tiết

Scroll Area

scroll-area

Danh sách lớp

Học viên 1
Học viên 2
Học viên 3
Học viên 4
Học viên 5
Học viên 6
Học viên 7
Học viên 8
Học viên 9
Học viên 10
Học viên 11
Học viên 12
Học viên 13
Học viên 14
Học viên 15
Học viên 16
Học viên 17
Học viên 18
Học viên 19
Học viên 20

Separator

separator

reno-ui

Thư viện thành phần cho nhiều sản phẩm.

Thành phần
Khối
Chủ đề

Tabs

tabs
Cập nhật thông tin tài khoản của bạn tại đây.

Data 18 component

AttentionCard

attention-card
Chờ duyệtCũ nhất 2 ngày

12

Đơn nghỉ phép đang chờ bạn duyệt.

Thất bại3 lần thử

4

Bản đồng bộ lương không chạy được.

AudioPlayer

audio-player
0:000:00

Avatar

avatar
ANANBC

BulkActionBar

bulk-action-bar
Đã chọn 10
Đã chọn 10 người trên trang này.

Calendar

calendar
Tháng Mười 2026

Chart

chart
Khách hàng theo tháng
  • Khách mới
  • Khách quay lại

DataGrid

data-grid
Trạng thái
Đang tải...
0–0 trên 0
Số dòng mỗi trang
Trang 1 / 1

Server mode trên tập 10.000 dòng: mỗi lần chỉ tải 1 trang, sort và tìm kiếm chạy phía “server”. Đổi theme preset ở góc trên để thấy density đổi chiều cao dòng mà không sửa dòng code nào.

DataGrid Toolbar

data-grid-toolbar
Trạng thái: Đã thanh toán
{
  "globalFilter": "",
  "columnFilters": [
    {
      "id": "status",
      "value": "Đã thanh toán"
    }
  ],
  "columnVisibility": {}
}

Date Picker

date-picker

KvRow

kv-row
Mã đơn
SO-2026-01042
Khách hàng
Công ty CP Đại Việt
Trạng thái
Đã thanh toán
Email liên hệ
ke-toan@dai-viet-rat-dai.example.com
Giá trị
128.500.000 ₫

PermissionMatrix

permission-matrix
Ma trận phân quyền: vai trò theo cột, quyền theo hàng
QuyềnAdminGiảng viênHọc viên
Tài khoản và vai trò
Xem
Tạo và sửaPhạm vi khác
Xóa
Toàn quyền

QuotaWidget

quota-widget
Điểm còn lại2.155 / 4.300
Điểm còn lại kỳ này310 / 4.300
Gia hạn 12/10/2026

RowActions

row-actions

StatCard

stat-card
Tổng nhân sự
240
3,4%so với tháng trước
Tuyển mới tháng 8
19
12,5%so với tháng 7
Tỉ lệ nghỉ việc
3,8%
0,6 điểmso với tháng 7
Chi phí lương tháng 8

Table

table
Danh sách học viên đang theo dõi trong hệ thống.
Mã học viênHọ tênKhoá họcTrạng thái
HV001Nguyễn Văn AnLập trình webĐang học
HV002Trần Thị BìnhThiết kế UI/UXHoàn thành
HV003Lê Minh ChâuQuản trị dữ liệuTạm dừng
Tổng số học viên3

Timeline

timeline
  1. Đã thanh toán đơn SO-1042
    Nguyễn Thu Hà · 2 giờ trước
  2. Gọi tư vấn lần 2
    Trần Minh Quân · hôm quaKhách hẹn gọi lại sau 20/9, đang so sánh với hai đơn vị khác.
  3. Quá hạn theo dõi 3 ngày
    Hệ thống · 3 ngày trước
  4. Tạo lead từ form đăng ký
    Hệ thống · 12/08/2026

VideoPlayer

video-player
0:00

onProgress: chưa phát

Feedback 8 component

Alert

alert

Badge

badge
Mặc địnhPhụViềnHoàn tấtChờ duyệtMớiQuá hạn

EmptyState

empty-state

Chưa có khoá học nào

Tạo khoá học đầu tiên để bắt đầu.

Không tìm thấy kết quả nào khớp bộ lọc.

ErrorState

error-state

Progress

progress

Skeleton

skeleton

Sonner

sonner

Spinner

spinner

Tìm nhanh

Tìm màn hình trong showcase