Complete showcase of all reusable components in the BeFix Admin Panel
Loader, Skeleton, and EmptyState components
Small
Medium
Large
Extra Large
Loading data...
Text Line
Multiple Text Lines
Rectangle
Circle (Avatar)
There are no items to display at the moment.
Try adjusting your search or filter criteria.
We couldn't load the data. Please try again.
Get started by creating your first item.
Buttons, Cards, Badges, Modals, Tabs, and Pagination
This is a basic card with default padding.
With subtitle
Card with a custom header section.
This card has action buttons in the footer.
Hover over this card to see the shadow effect.
Click the buttons below to see different modal variations
This is the overview tab content with line variant styling.
Components working together
John Doe
john@example.com
Jane Smith
jane@example.com
Bob Johnson
bob@example.com
Table components with sorting, actions, and responsive design
Name | Email | Role | Status |
|---|---|---|---|
| John Doe | john@example.com | Admin | Active |
| Jane Smith | jane@example.com | User | Active |
| Bob Johnson | bob@example.com | User | Pending |
Name | Email | Role | Status |
|---|---|---|---|
| John Doe | john@example.com | Admin | Active |
| Jane Smith | jane@example.com | User | Active |
| Bob Johnson | bob@example.com | User | Pending |
| Alice Williams | alice@example.com | Manager | Inactive |
| Charlie Brown | charlie@example.com | User | Active |
Click on column headers to sort. This table also features striped rows and hover effects.
Name | Email | Role | Status | Actions |
|---|---|---|---|---|
| John Doe | john@example.com | Admin | Active | |
| Jane Smith | jane@example.com | User | Active | |
| Bob Johnson | bob@example.com | User | Pending | |
| Alice Williams | alice@example.com | Manager | Inactive | |
| Charlie Brown | charlie@example.com | User | Active |
Name | Email | Role | Status | Actions |
|---|---|---|---|---|
| John Doe | john@example.com | Admin | Active | |
| Jane Smith | jane@example.com | User | Active | |
| Bob Johnson | bob@example.com | User | Pending | |
| Alice Williams | alice@example.com | Manager | Inactive | |
| Charlie Brown | charlie@example.com | User | Active |
Compact mode shows actions in a dropdown menu to save space on mobile devices.
Complete example with all table features
Name | Email | Role | Status | Actions |
|---|---|---|---|---|
J John Doe | john@example.com | Admin | Active | |
J Jane Smith | jane@example.com | User | Active | |
B Bob Johnson | bob@example.com | User | Pending | |
A Alice Williams | alice@example.com | Manager | Inactive | |
C Charlie Brown | charlie@example.com | User | Active |
Tables automatically scroll horizontally on small screens
Click column headers to sort data ascending or descending
Inline or compact dropdown actions for CRUD operations
All tables use CSS variables for seamless theme switching
Optional alternating row colors for better readability
Rows highlight on hover for better user interaction