Component Examples
Custom Tailwind components + Material UI components
Button
Colors (Solid)
Colors (Outline)
Sizes
Disabled
Loading (click to trigger)
With Icons
Full Width
onClick Examples
Date Picker
Modal
Basic Modal
Size Variants
Task Modal (Create / Update)
Image
Basic Usage
Default (cover)
Default (logo)
Contain
Fill
Rounded Variants
none
sm
md
lg
full
Aspect Ratio (responsive container)
16 / 9
4 / 3
1 / 1 (square)
Avatar Sizes
32px
48px
64px
96px
Custom Styles via className
Shadow
Border
Grayscale
Hover effect
Custom MUI input field with label
Email address
MUI · Autocomplete & Country Select
Country select - flag emoji, name & dial code
Single select - assignee
Multi-select - issue labels
Free solo - type or select a sprint
MUI · Text Field
Variants
With maxLength helper
0 / 100
Multiline - description
Max 500 characters
Error states
Enter a valid email address
Password must be at least 8 characters
Input adornments
.git
Disabled
MUI · Select, Radio & Number Input
Select - issue status
Select with icons - issue type
Select - error state
An assignee is required before moving to In Review
Radio group - priority
Number field - story points
Fibonacci: 1, 2, 3, 5, 8, 13, 21...
Figma checkbox using MUI
Remember me
MUI · Checkbox
States
Colors
Parent / child (indeterminate)
Filter group - issue types
Active: Bug
MUI · Avatar, Badge & Chip
Avatar - variants
Avatar group - team members
Badge - counts & indicators
Chip - labels & tags (click × to delete)
Chip - variants & colors
MUI · Icons
Hover for icon name. From @mui/icons-material - 2,100+ icons available.
MUI · Table
| ID | Title | Status | Priority | Assignee | Points |
|---|---|---|---|---|---|
| KS-1 | Set up authentication | Done | high | AJ | 5 |
| KS-10 | Dark mode support | Done | medium | EM | 5 |
| KS-11 | Performance audit | To Do | low | AJ | 3 |
| KS-12 | Unit test coverage | In Progress | high | BS | 8 |
| KS-2 | Design database schema | Done | high | BS | 8 |
MUI · Tooltip, Progress & Snackbar
Tooltip - placements & arrow
Linear progress
Circular progress
Toast - via useToast()
MUI · Floating Action Button
Circular - sizes
Colors
Extended - pill shape with label
Disabled