Đăng nhập
Form đăng nhập với email, mật khẩu và SSO
Blocks
Blocks
Các cụm giao diện ghép sẵn từ component của Yugen UI — đăng nhập, cài đặt, thống kê, danh sách… Copy nguyên khối vào dự án rồi chỉnh nội dung.
Mỗi block là một file trong
src/docs/block-library/. Tab “Code” hiển thị đúng mã nguồn của file đó.Thống kê
Thẻ KPI kèm xu hướng và biểu đồ cột mini
Doanh thu
1,28 triệu US$
+12,4% so với tháng trướcKhách hàng mới
2.341
+5,2% so với tháng trướcTỉ lệ rời bỏ
3,1%
−0,8% so với tháng trướcNgưỡng thanh toán
Cấu hình số tiền tối thiểu với Slider và ghi chú
Ngưỡng thanh toán
Số dư tối thiểu trước khi hệ thống chuyển tiền.
Số tiền tối thiểu250 US$
50 US$1.000 US$
Số dư vượt ngưỡng sẽ được chuyển vào ngày 15 hằng tháng.
Thành viên nhóm
Mời thành viên và phân quyền bằng Menu
Thành viên nhóm
Mời đồng đội và chọn quyền truy cập.
Nguyễn Văn An
an@sakura.dev
Trần Thị Bình
binh@sakura.dev
Lê Hoàng Cường
cuong@sakura.dev
Tuỳ chọn
Cài đặt tài khoản với Select, Switch và Toast
Tuỳ chọn
Quản lý cài đặt tài khoản và thông báo.
Áp dụng cho báo cáo và hoá đơn mới.
Thống kê công khai
Cho phép người khác xem tổng số lượt nghe của bạn.
Thông báo qua email
Báo cáo hằng tháng và cập nhật thanh toán.
Tính năng thử nghiệm
Dùng sớm các tính năng đang phát triển.
Giao dịch gần đây
Danh sách List với icon, mô tả và số tiền
Giao dịch gần đây
5 giao dịch trong 7 ngày qua.
- Quán cà phê Hoa Anh ĐàoĂn uống · Hôm nay−6,50 US$
- Siêu thị XanhMua sắm · Hôm qua−48,20 US$
- Lương tháng 10Thu nhập · 15/10+4.250,00 US$
- Đặt xe công nghệDi chuyển · 14/10−12,40 US$
- Gói xem phimGiải trí · 12/10−15,99 US$
Mục tiêu tiết kiệm
Theo dõi tiến độ bằng ProgressBar
Mục tiêu tiết kiệm
Các mục tiêu đang theo dõi trong năm 2026.
Quỹ hưu trí
70%
42.000 US$ / 60.000 US$
Du lịch Kyoto mùa hoa
80%
3.400 US$ / 4.250 US$
Quỹ khẩn cấp
21%
2.100 US$ / 10.000 US$
Đặt lịch hẹn
Calendar kết hợp ToggleGroup chọn khung giờ
Đặt lịch tư vấn
Chọn ngày và khung giờ phù hợp (30 phút).
Tháng Mười Một 2026
| T2 | T3 | T4 | T5 | T6 | T7 | CN |
|---|---|---|---|---|---|---|
Khung giờ
Gửi phản hồi
Form với RadioGroup, Textarea và validation
Gửi phản hồi
Góp ý của bạn giúp Yugen UI tốt hơn mỗi ngày.
Hộp thư trống
Tabs lọc kèm trạng thái Empty có hành động
Thông báo
Bạn đã đọc hết thông báo
Thông báo mới sẽ xuất hiện ở đây. Hãy tận hưởng khoảng lặng nhé.
Bảng phân tích
KPI, xu hướng, xếp hạng và tỉ trọng — một bộ lọc thời gian cho mọi thẻ
Tổng quan bán hàng
Cập nhật 20/10/2026
Doanh thu
101,1 N US$
Tăng+12,6%so với 30 ngày trước
Đơn hàng
1.743
Tăng+9,1%so với 30 ngày trước
Tỉ lệ chuyển đổi
3,4%
Tăng+1,2%so với 30 ngày trước
Giá trị đơn trung bình
59,57 US$
Tăng+2,7%so với 30 ngày trước
Lượt khách
30 ngày gần nhất
Doanh thu theo danh mục
USD
Thiết bị
Tỉ trọng phiên truy cập
- Di động57,2%
- Máy tính33,5%
- Máy tính bảng9,2%
Trợ lý AI
MessageScroller, ChatComposer và Trace hiển thị từng bước agent đang làm
Trợ lý Sakura
AI có thể nhầm — hãy kiểm tra thông tin quan trọng.
Trợ lý Sakura
Xin chào! Mình có thể xếp lịch, tóm tắt email hoặc tra tài liệu giúp bạn.
Đăng ký bản tin
Field gắn nhãn và gợi ý cho ô email, Switch và toast xác nhận
Bản tin Yugen
Mỗi tháng một email: component mới và mẹo dùng.
Chọn số lượng
ButtonGroup tăng / giảm có nhãn, giới hạn min / max và aria-live
Ấm trà gốm Bát Tràng
10 sản phẩm còn trong kho
Số lượng: 1
38,00 US$
Hộp thoại chào mừng
Dialog giữ focus bên trong, đóng bằng Esc và trả focus về nút mở
Lần đầu đăng nhập
Giới thiệu ngắn trước khi người dùng bắt đầu, có thể để sau.
Tiến độ dự án
Slider điều khiển ProgressBar; màu success khi hoàn thành
Ra mắt website mới
Đang làmMức hoàn thành64
Kéo thanh trượt hoặc dùng phím mũi tên để cập nhật.
Đang trực tuyến
Persona có trạng thái hiện diện và AvatarGroup gọn khi đông người
Bùi Thanh NamThiết kế sản phẩm · đang trình bày
6 đang trực tuyến