Showroom

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

Sizes
States

Badges

FacultyStudentNewPendingApprovedReviewRejectedInfo

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.

Lunch Options
Vegetarian
House Assignment

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

StudentGradeHomeroomLunchStatus
Baker, John Paul9thMrs. DupreChicken Caesarordered
Cormier, Marie10thMr. Broussardmissing
Fontenot, Luke11thMrs. GuidryTurkey Clubordered
Hebert, Claire9thMrs. DuprePBJmodified
Landry, Thomas12thDr. Melanconmissing
5 Students — 3 Ordered, 1 Modified, 2 Missing60% Complete

Compact — Interactive Rows

NameTypeDatesStatus
Mrs. DupreSick LeaveMar 28 – Mar 29Pending
Dr. MelanconPersonalApr 2Approved
Mr. BroussardProfessional DevApr 5 – Apr 6In Review

Sortable Header Variations

chevrons

Student Grade

caret

Grade Homeroom

text

Status Updated

DataTable — Sorted & Paginated

Student Grade Status
Baker, John Paul9thPending
Cormier, Marie10thApproved
Fontenot, Luke11thModified
Hebert, Claire9thApproved
Landry, Thomas12thPending
Page 1 of 3Showing 15 of 12 students

Avatar

Size Scale

xs
sm
md
lg

PersonChip

Dr. Smith
Mrs. Johnson
Mr. Williams
Ms. Chen

Status Indicators

StatusDot

Online
Away
Offline
Busy
Pulse

StatusBadge

PresentAbsentTardyApprovedPendingRejected

StatusIndicator

Online2 min ago
Away1 hr ago
Offline

AttendanceIndicator

PresentAbsentTardyExcusedUnrecorded

Calendar

March 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
March 2026
M
T
W
T
F
S
S

NotificationBell

Feedback

Alerts

Empty & Error States

JPG Academy crest

No Lunch Orders

There are no lunch orders for this week yet.

All Caught Up

No pending time off requests to review.

JPG Academy crest

No students found

Try adjusting your search or filters.

JPG Academy crest
Page not found
404

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

Loading...
Loading...
Loading...

Compound Skeletons

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Stepper

Progress Bar

Profile Completion
Lunch Orders This Month
Enrollment Complete

Overlays

Drawer / Sheet

Confirm Dialog

Tooltip

⌘K

Popover

Command Palette

Press ⌘K or click the button.

Display

SchoolBrand

JPG Academy crest
John Paul the Great AcademyA Catholic, Classical School for Acadiana

variant="full" + showMotto

JPG Academy crest
JPG Academy

variant="short" horizontal — header/sidebar

JPG Academy crest
JPG Academy

variant="short" vertical — login/about

JPG Academy crest

variant="mark" — favicon/avatar

Crest — Size Scale

JPG Academy crest
xs24px
JPG Academy crest
sm32px
JPG Academy crest
md40px
JPG Academy crest
lg56px
JPG Academy crest
xl80px

ID Cards

No Photo
JPG ACADEMY
MARIA GONZALEZ
STUDENT
ID NUMBER
2024-0089
AMDG
VERIFY ID
John Paul the Great Academy
123 Main Street Lafayette, LA 70503 (337) 555-0123
Ad Majorem Dei Gloriam
If found, please return to the school office.

AppHeader

Lunch Orders

App content area below the header.

HorizontalNav

Lunch Orders

3 New

Nav content area with active tab indicator.