Webui 🎨 Components

Button Variants

Buttons

<button class="comp-btn primary">Primary</button>
<button class="comp-btn secondary">Secondary</button>
<button class="comp-btn ghost">Ghost</button>

Text Input

Forms

<input type="text" class="comp-input" placeholder="Enter email..." />

Toggle Switch

Forms

<div class="comp-toggle active" onclick="this.classList.toggle('active')"></div>

Content Card

Cards

Analytics

Track performance metrics

<div class="comp-card">
  <div class="icon-box"></div>
  <div class="title">Analytics</div>
  <div class="desc">Track metrics</div>
</div>

Status Badges

Feedback

Active Pending Failed Info

<span class="comp-badge success">Active</span>
<span class="comp-badge warning">Pending</span>
<span class="comp-badge error">Failed</span>

Alert Messages

Feedback

✓ Changes saved successfully

ℹ Session expires in 5 minutes

<div class="comp-alert success">✓ Changes saved</div>
<div class="comp-alert info">ℹ Session expires</div>

Avatar & Meta

Data

JD

Jane Doe

jane@webui.io

<div class="comp-avatar">JD</div>
<div>
  <strong>Jane Doe</strong>
  <small>jane@webui.io</small>
</div>

Table Row

Data

ProjectStatusPriority

Dashboard UI Active Medium

<div class="table-row">
  <span>Dashboard UI</span>
  <span class="comp-badge success">Active</span>
  <span class="comp-badge warning">Medium</span>
</div>