Component Library
All available ERP theme components — Shadcn-inspired design
Contents
Basic
Advanced
Badges / Status Labels
Cards
Total Revenue
$1,245,890
12.5% vs last month
Card Title
Card description
Card content goes here. This is a simple content card with header and body.
With Actions
Card with header action button for navigation.
Form Fields
This field is required
Drag and drop files here, or browse
PDF, DOC, XLS up to 10MB
Inline Forms
Inline Search Bar
Inline Edit Row
Inline Filter Bar
Form Validation
Create Account
All fields with * are required. Click Submit to trigger validation.
DataTable
| ID | Name | Department | Status | Amount | Actions |
|---|
Modals & Dialogs
Toast Notifications
Tabs
This is the Overview tab content. Tabs use the data-tabs-group container with data-tab-target triggers and data-tab-panel panels.
Accordion
A comprehensive, modular ERP system covering 46 business modules across 9 domains including finance, HR, supply chain, manufacturing, and more.
HTML5, Tailwind CSS (CDN), jQuery, jQuery DataTables, and Chart.js. No build step required — just open with VS Code Live Server.
Copy one of the sample pages (list, form, detail, or dashboard), update the data-module and data-breadcrumb attributes, and customize the content. Refer to theme-guide.md for patterns.
Charts
Bar Chart
Line Chart (Area)
Doughnut Chart
Multi-Line Chart
Empty States
No records found
There are no records matching your criteria.
No results
Try adjusting your search or filter criteria.
Miscellaneous
Tooltips
Alerts
Information
This is an informational alert message.
Success
Operation completed successfully.
Warning
Please review before proceeding.
Error
Something went wrong. Please try again.
Avatars
Command Palette
Press Ctrl+K or click the button below.
Advanced Components
Complex, ERP-grade components for data-heavy enterprise workflows
SweetAlert-style Alerts
Full-screen centered alerts with animated icons — a built-in alternative to SweetAlert2.
Searchable Select (Select2-style)
Drop-in replacement for native select — with search, keyboard nav, single and multi-select.
Progress & Meters
Progress Bars
Segmented Progress
Circular Progress
Timeline
Order #ORD-2024-1892 fulfilled
Shipped via FedEx — Tracking #FX29381
Invoice #INV-2024-0901 attached
Uploaded by Sarah Chen
Payment overdue — 5 days past due
Auto-reminder sent to billing@acme.com
Note added by David Kim
Record created
Created by Admin User
Stats Grid
1,284
Total Orders
$842K
Revenue
97.3%
Fulfillment
23
Pending
4
Overdue
4.8
Avg. Rating
Monthly Sales
12%$128,430
Active Users
8%2,847
Avg. Order Value
3%$342
Tickets Resolved
24%894
Kanban Board
To Do
4Fix GL reconciliation report mismatch
Add multi-currency support for AP module
In Progress
2Implement payroll batch processing
Update user manual for Inventory module
Review
1Procurement workflow approval chain
Done
3Setup CI/CD pipeline for staging
Calendar View
March 2026
Date & Time Pickers (Flatpickr)
jQuery Validation
Contact Form with jQuery Validate
Real-time validation using jQuery Validation plugin
Number Stepper
OTP / PIN Input
Enter the 6-digit code sent to your email
Enter code to verify
File Upload with Progress
Drag and drop files here, or browse
PDF, DOC, XLS, PNG, JPG up to 10MB each
quarterly-report.pdf
product-mockup.png
Activity Feed
Recent Activity
David Kim commented on INV-2024-0901
15 minutes ago
System auto-generated invoice INV-2024-0902 from SO-2024-0445
1 hour ago
Alice Brown uploaded contract-renewal.pdf to Contract #SC-2024-089
3 hours ago
File Manager
Drawer / Slide-over
Side panels for quick view/edit without leaving the page.
Tree View
Skeleton Loading
Card Skeleton
Table Skeleton
KPI Card Skeleton
Form Skeleton
Stepper / Wizard Variants
Numbered Stepper
Dot Stepper
Vertical Stepper
Order placed
Mar 15, 2026 at 10:00 AM
Payment confirmed
Mar 15, 2026 at 10:05 AM
Processing
Estimated: Mar 17, 2026
Shipped
Pending
Description List
Vendor Details
- Company Name
- Acme Corporation
- Vendor Code
- VEN-00142
- Tax ID
- 12-3456789
- Payment Terms
- Net 30
- Credit Limit
- $250,000.00
- Status
- Active
Order Summary
- Order Number
- ORD-2024-1892
- Order Date
- Mar 19, 2026
- Ship Method
- FedEx Express
- Warehouse
- WH-East (NJ)
- Priority
- High
- Total
- $12,500.00
Notification Panel
Notifications
New approval request — PO-2024-0892 awaiting your review
2 minutes ago
Payment overdue — INV-2024-0898 is 5 days past due
1 hour ago
Payroll batch PAY-2026-03 processed successfully
3 hours ago
Sarah Chen was added to your team
Yesterday
Pricing Table
Starter
For small teams getting started
- Up to 10 users
- 5 modules
- Email support
- API access
- Custom reports
Professional
For growing businesses
- Up to 50 users
- All 46 modules
- Priority support
- API access
- Custom reports
Enterprise
For large organizations
- Unlimited users
- All 46 modules
- 24/7 dedicated support
- Full API + webhooks
- On-premise deployment
Rating & Stars
Star Rating Display
Rating Breakdown
Pagination
Standard
With Info & Page Size
Showing 1 to 10 of 97 results
Range Slider
Transfer List
Available (5)
Selected (3)
Sortable List
Approval Chain Order
Department Manager
Finance Manager
VP Operations
CFO
Required if amount > $50,000
Comparison Table
| Feature | Starter | Professional | Enterprise |
|---|---|---|---|
| Users | 10 | 50 | Unlimited |
| Modules | 5 | All 46 | All 46 + Custom |
| API Access | |||
| Multi-Company | |||
| Support SLA | 48h email | 4h priority | 1h dedicated |
Data Cards
Sarah Chen
Senior Financial Analyst
24
Tasks
98%
On Time
4.9
Rating
Industrial Widget A-200
SKU: WDG-A200-BLK
Unit Price
$142.50
Stock
1,284 units
Reorder Point
200 units
Lead Time
14 days
ERP Phase 2 Rollout
Manufacturing & Quality modules deployment
Comments / Discussion
Discussion (3 comments)
I've reviewed the numbers — the tax amount on line 3 seems off. Can someone double-check the rate applied?
Good catch — the rate should be 10% not 12%. I'll fix it and re-submit.
Updated and resubmitted. Ready for final approval.