1 · Input & Selection
Text Inputs
Password Field
Search Bar
Textarea
Checkboxes
Radio Buttons
Toggle / Switch
Dark Mode
Email Notifications
Auto-save
Disabled Toggle
Range Sliders
Number Stepper
File Uploader
Drag & drop files here, or browse
PNG, JPG, PDF up to 10MB
2 · Date & Time Pickers
Calendar Date Picker
Date Range Picker
Time Picker
Date-Time Combo
Week & Month Picker
Wheel / Scroll Picker
Selected: 10:30
000102030405060708091011121314151617181920212223
:
000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
Quick-Tile Date Picker
3 · Dropdowns & Selects
Standard Select (Native)
Combobox (Searchable Dropdown)
Multi-Select with Chips / Tags
React
Cascading Select (Country → City)
Grouped Dropdown
Bootstrap Dropdown Button
4 · Tables & Data Display
Data Grid (Sortable + Filterable)
| Id ↑ | Name ↕ | Role ↕ | Dept ↕ | Status ↕ | Salary ↕ |
|---|---|---|---|---|---|
| 1 | Alice Martin | Engineer | Engineering | Active | $95,000 |
| 2 | Bob Chen | Designer | Product | Active | $88,000 |
| 3 | Cara Diaz | Manager | Engineering | On Leave | $110,000 |
| 4 | Dan Lee | Analyst | Finance | Active | $75,000 |
| 5 | Eva Patel | Intern | Marketing | Inactive | $35,000 |
Cards Grid
Conversion Rate
3.8%
▲ 12% vs last month
Monthly Revenue
$128K
▲ 8% vs last month
Active Users
14,234
▲ 23% vs last month
Support Tickets
42
▲ -5% vs last month
Avg Session
4m 21s
▲ 3% vs last month
NPS Score
71
▲ 6% vs last month
Bento Grid
Hero Metric99.9% Uptime
Revenue+28%
Churn1.2%
Traffic SourcesOrganic · Paid · Social
Reviews★ 4.8
Deploys42 today
Accordion
Automation testing uses software tools to execute pre-scripted tests on a software application before it is released into production.
Selenium, Playwright, Cypress, WebDriverIO, and Puppeteer are among the most widely used automation testing frameworks.
The Page Object Model (POM) is a design pattern that creates an object repository for web UI elements, improving test maintenance and reducing code duplication.
5 · Dynamic & Feedback Elements
Badges & Pills
PrimarySecondarySuccessDangerWarningInfoDark
Alerts
Toast / Snackbar Notifications
Tooltips & Popovers
Progress Bars
Upload progress0%
Completion65%
Memory82%
Disk Space95%
Skeleton Loaders
Spinners & Loaders
Border
Grow
Small
Button Spinner
Dot Pulse
Modal / Dialog
6 · Navigation Elements
Breadcrumbs
Tabs
High-level product overview with key features and highlights.
Bootstrap Pills Navigation
Pagination
Page 3 of 10
Multi-Step Progress Tracker
✓
Account✓
Details3
Review4
DoneSidebar Drawer
Infinite Scroll Simulation
1
Feed Item #1
Scroll down to load more items automatically
2
Feed Item #2
Scroll down to load more items automatically
3
Feed Item #3
Scroll down to load more items automatically
4
Feed Item #4
Scroll down to load more items automatically
5
Feed Item #5
Scroll down to load more items automatically
7 · Bootstrap Components
Buttons – All Variants
Button Group
List Group
Cards with Bootstrap
Success Card
A success-themed card with header.
Dark Card
Dark background variant.
Offcanvas (Sidebar Overlay)
Collapse
This content is hidden by default and revealed when you click the button above. Bootstrap's collapse component handles the show/hide animation.
Tables – Bootstrap Variants
| # | Name | Score | Grade |
|---|---|---|---|
| 1 | Alice | 95 | A |
| 2 | Bob | 82 | B |
| 3 | Carol | 74 | C |
| 4 | Dan | 91 | A- |
Input Groups (Bootstrap)
@
.00
8 · jQuery Interactions
jQuery Effects & Methods
fadeToggle target — click the button above
slideToggle target — click slideToggle
Chain target
// jQuery output appears here…
jQuery Event Handling
Click / Hover / Right-click me
Mouse Down / Up
// events appear here…
9 · Forms & Validation
Complete Form with Validation
10 · Modern UI Extras
Star Rating
Code Snippet with Copy
JavaScript
const greet = (name) => `Hello, ${name}!`Dark Mode Preview
Dark Mode: Off
Preview Card
This card demonstrates how content would appear in dark mode. Toggle the switch above to see the transition.
Drag & Drop (HTML5)
Item Alpha
Item Beta
Item Gamma
Item Delta