← back
Mirage
/
UI/UX
/
UI Components Reference
UI/UX
UI/UX
UI Components Reference
Every UI component named, shown, and explained. Buttons, inputs, cards, modals, tooltips, toasts, tables, skeletons.
Hero / Landing Section
eyebrow text
Build Something
Amazing
this is the hero subtitle. it explains what the product does in one sentence.
Primary CTA
Secondary CTA
Hero Section
Eyebrow Text
Primary CTA
Secondary CTA
Navigation
MyApp
Dashboard
Projects
Settings
🔔
3
AK
Navbar
Logo / Brand
Nav Links
Active Link
Notification Badge
Avatar
Breadcrumb
Home
›
Projects
›
StudentOS
›
Dashboard
Breadcrumb Trail
Current Page
Pagination
‹
1
2
3
4
›
Pagination
Active Page
Disabled
Sidebar
Main
Dashboard
Goals
Learning Log
Account
Profile
Settings
Sidebar
Section Header
Active Item
Nav Item
Buttons
Button Variants, Sizes and States
Primary
Secondary
Ghost
Danger
Success
Small
Medium
Large
⟳ Loading
Disabled
⚙
⬆ With Icon
+
Buttons
Primary
Secondary
Ghost
Danger
Success
Small
Medium
Large
Loading
Disabled
Icon Button
With Icon
FAB
Form Inputs
Text Inputs
Default Input
With Icon
✉
Error State
✕ Please enter a valid email
With Hint
Must be 3-20 characters
Input Field
Error State
Hint Text
Select, Textarea, Search
Dropdown / Select
Choose option...
React
Vue
Textarea
Search Bar
⌕
✕
Select / Dropdown
Textarea
Search Bar
Controls
Toggle / Switch
Dark mode (on)
Notifications (off)
Auto-save (on)
Toggle / Switch
On
Off
Checkbox & Radio
HTML
CSS
JavaScript
Beginner
Intermediate
Advanced
Checkbox
Radio Button
Slider & File Upload
Volume
0
65%
100
📁
Drop files or click to upload
PNG, JPG, PDF up to 10MB
Slider / Range
File Upload / Dropzone
Tags, Chips, Badges & Avatars
Tags / Chips / Badges
Status Badges
Active
Error
Pending
Archived
New
Selectable Chips / Tags
React
✕
TypeScript
✕
Vue
Angular
Svelte
Badges
Chips / Tags
Selected Chip
Avatars
AK
RK
PP
V
With Online Status
AB
RK
Avatar Group
A
B
C
+5
Avatar
Online Status
Avatar Group
Cards
Technology
How to Learn React in 2026
A comprehensive guide to learning React from scratch with modern patterns.
Card
Card Image
Card Tag
Card Title
Card Text
Card Footer
Stat Card
Goals Done
24
↑ 12% vs last week
Streak
7
↑ days
142
Posts
4.2k
Followers
89%
Rating
Stat Card
Card Stats Row
List Items
AK
Abhishek Kumar
abhishek@example.com
Active
⋯
RK
Rahul Kumar
rahul@example.com
Pending
⋯
PP
Priya Patel
priya@example.com
Offline
⋯
List Item
Context Menu ⋯
Feedback & Status
Toast / Snackbar Notifications
✓
Goal saved successfully!
✕
✕
Failed to connect to server
✕
⚠
Session expires in 5 minutes
✕
ℹ
New version available
✕
Toast / Snackbar
Success
Error
Warning
Info
Alert Boxes
✓ Success
Your changes have been saved.
✕ Error
Something went wrong. Please try again.
⚠ Warning
This action cannot be undone.
ℹ Info
Your trial ends in 7 days.
Alert / Callout
Loading States
Spinner / Loader
Spinner / Loader
Skeleton Screen
Skeleton Screen
Progress Bars
React
85%
Python
70%
Goals Today
3/5
Disk Usage
92%
Progress Bar
Overlays
Delete Goal
✕
Are you sure you want to delete "Study React Hooks"? This action cannot be undone and will permanently remove this goal from your history.
Modal / Dialog
Modal Header
Modal Body
Cancel
Confirm Action
Dropdown Menu
Sort by: Newest
▾
✓ Newest First
Oldest First
Alphabetical
Most Popular
✕ Clear Filter
Dropdown Menu
Trigger Button
Active Item
Divider
Destructive Item
Tooltip & Popover
Tooltip — appears on hover
This is a tooltip
Hover me
Success action
Success button
Right aligned tip
Another element
Tooltip
Tooltip Arrow
Tabs & Accordion
Tabs
Overview
Goals
Analytics
Settings
Active tab content displays here. switch tabs to see different content panels.
Tabs
Active Tab
Inactive Tab
Tab Content Panel
Accordion
What is React?
▴
React is a JavaScript library for building user interfaces, maintained by Meta.
What is TypeScript?
▾
What is Supabase?
▾
Accordion
Expanded Item
Collapsed Item
Table / Data Grid
Table
Name
Status
Role
Joined
Actions
A
Abhishek Kumar
Active
Admin
Mar 2026
Edit
Delete
R
Rahul Kumar
Pending
Member
Feb 2026
Edit
Delete
P
Priya Patel
Inactive
Viewer
Jan 2026
Edit
Delete
Table / Data Grid
Table Header (th)
Table Row (tr / td)
Progress, Timeline & States
Stepper
✓
Account
✓
Profile
3
Goals
4
Done
Stepper
Completed
Active
Upcoming
Timeline
Today, 9:00 AM
Completed React module
Finished hooks and context chapter
Yesterday, 3:00 PM
Started SQL notes
Covered SELECT and JOINs
Mar 4
Deployed StudentOS
Live at app.abhishekkumar.xyz
Timeline
Empty State
📭
No goals yet
You haven't added any goals for today. Start by adding your first micro goal.
+ Add First Goal
Empty State
Empty Icon
CTA Button
Mobile & Misc
Bottom Navigation Bar (mobile)
🏠
Home
📋
Goals
📝
Log
📊
Stats
👤
Profile
Bottom Navigation Bar
Active Tab
Inactive Tab
Dividers & Misc
or continue with
G Google
f Facebook
section break
Tooltip demo
keyboard shortcut: Ctrl+S
Save
cannot undo!
Delete
Divider
OAuth Buttons
Tooltips
UI Components Reference · every building block of every interface · =^._.^=