VVUSD UI Component Library

A complete glass morphism design system for building beautiful dashboards

KPI Cards

KPICard.js

Standard KPI Cards

Recovery Days
2,847
Total banked days
Unique Students
1,234
Participating students
Hours Recovered
8,521
Total accumulated hours
Aeries Entry Rate
87.5%
Days entered in system
Total Events
156
Recovery activities held

KPI Card Variants

Default Card
1,234
Standard style
Highlight Card
98.5%
Gradient text
Revenue Card
$425,000
Green gradient

Small Value Variant

Small Value
2,847 / 3,500
Fraction display

6-Column KPI Grid

Total Recovery
4,521
In-Person + Online
In-Person Days
2,847
Banked recovery
Online Days
1,674
PLP completions
Days Applied
3,892
In Aeries system
Est. ADA Revenue
$354,172
Applied × $91
Total Events
156
Recovery activities

Glass Cards

GlassCard.js

Card Variants

Default Glass Card

Standard glass morphism container with backdrop blur and hover glow effect.

Compact Card

Reduced padding variant.

Static Card

No hover effects.

Chart Containers

ChartContainer.js

Line Chart with Time Controls

Recovery Progress Over Time

Chart Grid Layout

Hours by Subject Area
Completion by Grade Level

Scatter Chart with Custom Legend

Recovery Correlation Analysis
Elementary Middle High School

Stacked Area Chart

Combined Recovery Progress Over Time

Stacked Bar & Horizontal Bar Charts

AR vs PLP by School Type
Top Schools Comparison

Combo Chart (Bar + Line)

Recovery Hours by School Type with Trend

Radar & Polar Area Charts

School Performance Metrics
Recovery by Category

Bubble Chart (3 Dimensions)

School Performance Analysis (Size = Students)
Elementary Middle High School Bubble size = Student count

Multi-Axis Line Chart

Recovery Days vs Revenue Over Time

Gauge Charts (Progress Indicators)

AR Progress
87%
PLP Completion
65%
Aeries Entry
92%
Target Met
78%

Data Tables

DataTable.js

Searchable & Sortable Table

Combined School Performance
Rank School Name Type In-Person Days Online Completions PLP Rate Combined Score
1 Oak Grove Elementary Elementary 245 189
92%
 434
2 Maple Ridge Middle Middle 198 167
85%
 365
3 Pine Valley High High 312 145
78%
 457
4 Cedar Creek Elementary Elementary 156 134
88%
 290
5 Birch Hill Academy High 267 112
72%
 379

Simple Data Table

Recent Events
Date Description Subject Duration Staff
Jan 14, 2026 Math Tutoring Session Mathematics 2.0 hrs J. Smith
Jan 13, 2026 Reading Recovery Workshop ELA 1.5 hrs M. Johnson
Jan 12, 2026 Science Lab Make-up Science 3.0 hrs K. Williams

Leaderboards

Leaderboard.js

Leaderboard Variants

Top Performing Schools
  • 1 Oak Grove Elementary
    245 days
  • 2 Maple Ridge Middle
    198 days
  • 3 Pine Valley High
    187 days
  • 4 Cedar Creek Elem
    156 days
  • 5 Birch Hill Academy
    134 days
Needs Attention
  • 1 Valley View School
    23%
  • 2 Mountain Ridge
    31%
  • 3 Desert Springs
    35%
Top Events
  • 1
    Math Recovery Day
    Oak Grove Elementary
    45 students
  • 2
    Reading Workshop
    Maple Ridge Middle
    38 students
  • 3
    Science Lab
    Pine Valley High
    32 students

Skeleton Loading State

Loading...

Progress Bars

ProgressBar.js

Days Banked vs Applied (Dashboard Style)

Days Banked vs Days Applied to Aeries
Attendance Recovery (In-Person)
Applied: 2,487 Banked: 2,847
Gap: 360 days available
SchoolsPLP (Online)
Completed: 1,405 Total Assigned: 2,156
Pending: 751 assignments
AR Applied
AR Unused
PLP Complete
PLP Pending
Total Gap: 1,111 days

Inline Completion Bars

92%
75%
45%

Badges & Labels

Badge.js

Basic Badges

Primary Secondary Accent Warning Danger Mixed

Soft Badges

Primary Secondary Accent Warning Danger

Rank Badges (Circular)

Sizes
1 2 3
Medal Colors
1 2 3
Color Variants
1 2 3 4

Category Badges

Solid
Elementary Middle High
Soft
Elementary Middle High Other

Subject Badges

Mathematics ELA Science Social Studies Elective

Combined Score Badge

434 365 290

Status Badges (with Indicator)

Active Pending Inactive In Progress

Section Labels

Attendance Recovery (In-Person) SchoolsPLP (Online)

Heatmaps

Heatmap.js

GitHub-Style Activity Heatmap

District Event Activity

Less
More
2,847 total events
89 active days
32.0 avg/day

Calendar-Style Heatmap

January 2026 Activity

Less
More
Sun Mon Tue Wed Thu Fri Sat

Heatmap Color Levels

Level 0
Level 1
Level 2
Level 3
Level 4

Form Controls

forms.css

Text Inputs

Select Dropdowns

Site Selector Pattern

Search Input

Buttons

Time Period Filter Buttons

Layout Grids

layouts.css

2-Column Grid (.ui-grid-2)

Column 1
Column 2

3-Column Grid (.ui-grid-3)

Column 1
Column 2
Column 3

4-Column Grid (.ui-grid-4)

Col 1
Col 2
Col 3
Col 4

2:1 Split Grid (.ui-grid-2-1)

2fr - Main Content
1fr - Sidebar

Auto-fit Grid (.ui-grid-auto)

Auto 1
Auto 2
Auto 3
Auto 4
Auto 5