SHIFT UX Component Demo

Live examples of all UI components and patterns used in the application

Navigation

Sidebar navigation with active states and icons

Header Bar

Top header with title and action buttons

Page Title

Tabs

Tab navigation for switching between content sections

Overview Content

This is the overview tab content.

Extended Button Colors

Additional button color options with hover states

Stats Grid

Statistics cards displaying key metrics

Line Items 12
Total Hours 420 All time
This Month 105 Hours logged
Invoiced (Oct) $3,450 Time + Costs
Team Members 8 Assigned

Cards

Content containers with headers and sections

Card Title

This is a standard section card with a header and content area.

Card content goes here. Can include any elements.

Filters

Filter controls for data tables

Data Grid

Grid layout for displaying tabular data

Date
User
Client
Project
Hours
Status
Actions
Oct 20, 2025
John Smith
Senior Developer
CHS
QR Meal Scanner
7
APPROVED
Oct 21, 2025
Sarah Johnson
Mid-Level Developer
Quidzi
Web App Development
8
SUBMITTED

Project List

List view for projects or clients

QR Meal Scanner
CHS-QR
Line Items
5
Hours
120
Web App Development
QUIDZI-WEB
Line Items
8
Hours
240

Team Members

Team member cards with avatars

JS
John Smith
Senior Developer
SJ
Sarah Johnson
Mid-Level Developer
ED
Emily Davis
Frontend Developer

Activity Feed

Timeline-style activity feed

John Smith Oct 20, 2025
Logged 7h on Backend Development
QR code generation logic
approved
Sarah Johnson Oct 21, 2025
Logged 8h on Mobile Development
Reservation flow UI
submitted
Emily Davis Oct 22, 2025
Logged 7h on Frontend Development
Dashboard components
draft

Form Elements

Input fields, selects, and textareas

Text Input
Select Dropdown
Textarea
Date Input
Checkbox

Modal

Modal dialog for detailed views and forms

Empty States

Placeholder content when no data is available

No projects yet

Add your first project to get started

Alerts & Notifications

Alert messages for different states (pastel colors)

Information
This is an informational message to provide context.
Success
Your changes have been saved successfully!
Warning
Please review your entries before submitting.
Error
An error occurred while processing your request.
Feature
New feature available! Check out the latest updates.
Tip
Pro tip: Use keyboard shortcuts to work faster!

Loading States

Spinners and skeleton loaders

Spinner
Skeleton Loader

Tooltips & Hints

Contextual help and information

Helpful hint or tip goes here

Progress Indicators

Progress bars with softer colors

Project Progress 75%
Hours Logged 120 / 200
Budget Used $8,500 / $10,000
Tasks Completed 12 / 20

Breadcrumbs

Navigation path indicators

Home Clients CHS QR Meal Scanner

Pagination

Page navigation controls

...

Dropdown Menus

Action menus and context menus

Search

Search input with icon

Tags & Chips

Labels and removable tags with pastel colors

Frontend Backend Active Urgent Critical Feature Design Testing

Dividers

Section separators

Horizontal Line
With Text
OR
Dashed

Dual List Box

Assign and unassign items between lists

Available Team Members
5
MC
Mike Chen
Senior Developer
DL
David Lee
AI Engineer
AL
Anna Liu
Designer
RP
Robert Park
DevOps
LW
Lisa Wang
QA Engineer
Assigned Team Members
3
JS
John Smith
Senior Developer
SJ
Sarah Johnson
Mid-Level Developer
ED
Emily Davis
Frontend Developer

Selectable List

List with checkboxes and bulk actions

Select All (3 selected)
Project Alpha
Last updated: 2 hours ago
Active
Project Beta
Last updated: 5 hours ago
On Hold
Project Gamma
Last updated: 1 day ago
Active
Project Delta
Last updated: 3 days ago
Archived

Transfer List (Compact)

Simple permission assignment interface

Available Permissions
view_reports
Reporting
manage_billing
Billing
export_data
Data Management
Assigned Permissions
manage_projects
Project Management
view_timesheet
Time Tracking
manage_team
Team Management