Components library
Every UI element, in one page.
Browse, copy, paste. 80+ ready-to-use components built with vanilla HTML & CSS.
Buttons
.btn .btn-primary | .btn-outline | .btn-light
Badges
.badge .badge-primary | .badge-secondary | .badge-success
Primary
Secondary
Success
Warning
Danger
New
Featured
Alerts
.alert .alert-info | .alert-success | .alert-warning
Info: This is an informational message for your users.
Success: Your changes have been saved.
Warning: Your subscription expires in 3 days.
Error: We couldn't process your request.
Form elements
.form-control · .form-label · .form-check
Cards
.feature-card · .team-card · .stat-card · .pricing-card
Feature card
For listing product benefits with icon + heading + body.
Person name
Role title
Stats
.stat-card
4.9
Rating
12k+
Users
98%
Uptime
$2M
ARR
Avatars & avatar groups
.avatar · .avatar-group
+12
Tabs
.tabs · .tab-list · .tab-button
Tab panel content shows here. Click tabs to switch.
Accordion
<details> .accordion-item
Question one with an open state
Answer to the first question. Uses native HTML <details> — no JS needed.
Question two, collapsed by default
Click the summary line to expand. Animates open smoothly.
Question three
You can nest any HTML inside.
Breadcrumbs
.breadcrumb · .breadcrumb-item
Pagination
.pagination
Progress bars
.progress · .progress-bar
Design92%
Development76%
Marketing48%
Tables
Pricing cards
.pricing-card · .pricing-card.featured
Tooltips & popovers
CSS-only tooltips via [data-tooltip]
Hover meTooltip text
With help icon