Component Gallery
Every component from @jpg/design-system, shown with realistic data. All interactive elements are live — try clicking, toggling, and typing.
UI Primitives
Buttons
Badges
Cards
Standard Card
White background with subtle warm shadow.
Default for most content areas. Clean and professional.
Warm Card
Cream background evokes parchment.
Use for featured content or special sections.
Decorative Elements
Gold Divider (gradient)
Gold Divider (with ornament)
Form Controls
Please enter a valid email address
Choose your lunch for the week.
Drag & drop files here, or click to browse
JPG, PNG, or WebP. Max 5MB.
Max file size: 5.0 MB
Data Display
Table
Consistent tabular data with striped rows, interactive states, sorting, and pagination.
Standard — Striped with Footer
Compact — Interactive Rows
Sortable Header Variations
chevrons
caret
text
DataTable — Sorted & Paginated
Avatar
Size Scale
PersonChip
Status Indicators
StatusDot
StatusBadge
StatusIndicator
AttendanceIndicator
Calendar
March 2026
NotificationBell
Feedback
Alerts
Heads Up
Success
Warning
Error
Empty & Error States
No Lunch Orders
There are no lunch orders for this week yet.
All Caught Up
No pending time off requests to review.
No students found
Try adjusting your search or filters.
Failed to Load Data
There was a problem connecting to the server. Please try again.
Toast Notifications
Click to trigger live toasts.
Skeleton / Loading
Basic Shapes
Compound Skeletons
Stepper
Progress Bar
Overlays
Drawer / Sheet
Confirm Dialog
Modal
Tooltip
Popover
Command Palette
Press ⌘K or click the button.
Display
SchoolBrand
variant="full" + showMotto
variant="short" horizontal — header/sidebar
variant="short" vertical — login/about
variant="mark" — favicon/avatar
Crest — Size Scale
ID Cards
AppHeader
Lunch Orders
App content area below the header.
HorizontalNav
Lunch Orders
Nav content area with active tab indicator.