Component Library

Production-ready UI primitives built for speed, consistency, and accessibility.

Buttons
<button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-outline">Outline</button> <button class="btn btn-ghost">Ghost</button>
Forms
We'll never share your email.
Preferences
<label class="form-label">Email</label> <input type="email" class="form-input" placeholder="user@webui.io">
Cards
Project Overview Active
Track your deployments, monitor performance metrics, and manage team access directly from this dashboard.
<div class="card"> <div class="card-header"><span class="card-title">Title</span></div> <div class="card-body">Content goes here...</div> <div class="card-footer">Actions</div> </div>
Tables
Name Role Status Actions
Alice Chen Product Designer Active
Marcus Rivera Frontend Lead Review
Sarah Kim Backend Dev Active
<div class="table-container"> <table>\n <thead>\n <tr><th>Name</th><th>Role</th></tr>\n </thead>\n <tbody>\n <tr><td>Data</td><td>Info</td></tr>\n </tbody>\n </table> </div>
Modals
<div class="modal-overlay active">\n <div class="modal">\n <div class="modal-header">\n <h3 class="modal-title">Confirm Action</h3>\n <button class="modal-close">×</button>\n </div>\n <div class="modal-body">...</div>\n <div class="modal-footer">...</div>\n </div>\n</div>
Alerts & Feedback
ℹ️
A new version of Webui is available for download.
✅
Your changes have been saved successfully.
⚠️
Storage usage is at 90%. Consider upgrading your plan.
<div class="alert alert-success">\n <span class="alert-icon">✅</span>\n <div>Operation completed successfully.</div>\n</div>