Empty State

Core

Trạng thái rỗng hiện đại với animation mượt mà. 13 preset có sẵn theo ngữ cảnh, hỗ trợ override icon, text và action tuỳ ý.

Cài đặt

Run command sau: npx basuicn add empty

Import

TSX

Tất cả Preset

13 tình huống empty state được thiết kế sẵn với icon và màu sắc riêng biệt.

Chưa có người dùng

Bắt đầu bằng cách mời thành viên đầu tiên vào hệ thống.

Chưa có tài liệu

Tạo tài liệu đầu tiên để bắt đầu quản lý nội dung.

Không có thông báo

Bạn đã đọc hết tất cả thông báo. Tuyệt vời!

Không tìm thấy kết quả

Thử thay đổi từ khóa hoặc điều chỉnh bộ lọc của bạn.

Chưa có dữ liệu

Dữ liệu sẽ hiển thị tại đây sau khi bạn thêm thông tin.

Hộp thư trống

Không có tin nhắn nào. Thưởng thức khoảnh khắc yên bình!

Chưa có đơn hàng

Các đơn hàng sẽ xuất hiện ở đây sau khi được tạo.

Chưa có tin nhắn

Bắt đầu cuộc trò chuyện mới để kết nối với mọi người.

Chưa có hình ảnh

Tải lên hình ảnh đầu tiên để xây dựng thư viện media.

Thư mục trống

Chưa có file nào. Kéo thả hoặc nhấn để thêm mới.

Chưa có thống kê

Dữ liệu phân tích sẽ hiển thị khi có hoạt động.

Mất kết nối

Không thể tải dữ liệu. Kiểm tra kết nối mạng và thử lại.

Không có gì ở đây

Nội dung sẽ xuất hiện sau khi bạn thêm dữ liệu mới.

Kích thước

Ba kích thước sm, md, lg — dùng tuỳ theo vùng hiển thị.

size=sm

Chưa có tài liệu

Tạo tài liệu đầu tiên để bắt đầu quản lý nội dung.

size=md

Chưa có tài liệu

Tạo tài liệu đầu tiên để bắt đầu quản lý nội dung.

size=lg

Chưa có tài liệu

Tạo tài liệu đầu tiên để bắt đầu quản lý nội dung.

Với Action

Kết hợp action button để hướng dẫn người dùng bước tiếp theo.

Chưa có người dùng

Bắt đầu bằng cách mời thành viên đầu tiên vào hệ thống.

Chưa có tài liệu

Tạo tài liệu đầu tiên để bắt đầu quản lý nội dung.

Không tìm thấy kết quả

Thử thay đổi từ khóa hoặc điều chỉnh bộ lọc của bạn.

Mất kết nối

Không thể tải dữ liệu. Kiểm tra kết nối mạng và thử lại.

Thư mục trống

Chưa có file nào. Kéo thả hoặc nhấn để thêm mới.

Hộp thư trống

Không có tin nhắn nào. Thưởng thức khoảnh khắc yên bình!

Tuỳ chỉnh

Override title và description của preset để phù hợp ngữ cảnh cụ thể.

Chưa có báo cáo tháng này

Báo cáo sẽ tự động tổng hợp vào cuối mỗi tháng từ dữ liệu giao dịch.

Mọi thứ đều ổn!

Không có cảnh báo hay thông báo quan trọng nào cần xử lý.

API Reference

Prop	Type	Default	Mô tả
`preset`	`"users" \| "documents" \| "notifications" \| "search" \| "data" \| "inbox" \| "orders" \| "messages" \| "images" \| "folders" \| "stats" \| "offline" \| "general"`	`"general"`	Bộ thiết kế có sẵn với icon, màu sắc và text phù hợp theo ngữ cảnh
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Kích thước tổng thể của empty state
`icon`	`React.ElementType`	—	Override icon mặc định của preset bằng component Lucide tuỳ chọn
`title`	`string`	—	Override tiêu đề mặc định của preset
`description`	`string`	—	Override mô tả mặc định của preset
`action`	`ReactNode`	—	Nút hành động hoặc các element hiển thị bên dưới mô tả
`className`	`string`	—	Class tuỳ chỉnh cho root element
`children`	`ReactNode`	—	Nội dung bổ sung render sau action