Component Library
Production-ready UI components for rapid development. Copy, paste, and customize.
Forms & Inputs .form-input
Accessible form controls with consistent styling and focus states.
<input type="text" class="form-input" placeholder="Enter email..."/>\n<select class="form-select">\n <option>Option A</option>\n</select>Cards .card
Flexible containers for grouping related content.
Basic Card
Card content goes here. Add text, images, or components.
Elevated Card
Uses a stronger shadow for emphasis or floating elements.
<div class="card">\n <div class="card-header">Title</div>\n <div class="card-body">Content</div>\n</div>Alerts .alert
Contextual feedback messages for user actions.
✔ Successfully saved your changes.
⚠️ Your subscription expires in 3 days.
✖ Failed to connect to the server.
ℹ A new version is available for download.
<div class="alert alert-success">✔ Action completed successfully.</div>\n<div class="alert alert-error">✖ An error occurred.</div>Tables .table
Responsive data display with optional striping and hover effects.
| Name | Role | Status | Action |
|---|---|---|---|
| Alice Chen | Developer | Active | |
| Bob Smith | Designer | Pending | |
| Carol Davis | Manager | Active |
<table class="table table-striped table-hover">\n <thead><tr><th>Header</th></tr></thead>\n <tbody><tr><td>Data</td></tr></tbody>\n</table>Modals .modal
Dialog windows for confirmations, forms, or focused interactions.
<div id="demoModal" class="modal-overlay">\n <div class="modal">\n <div class="modal-header">\n <h3>Confirm Action</h3>\n <button class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('active')">✕</button>\n </div>\n <div class="modal-body">\n <p>Are you sure you want to proceed?</p>\n </div>\n <div class="modal-footer">\n <button class="btn btn-outline" onclick="this.closest('.modal-overlay').classList.remove('active')">Cancel</button>\n <button class="btn btn-primary">Confirm</button>\n </div>\n </div>\n</div>