Buttons #

Buttons trigger actions or navigate between pages. Use primary for main actions, secondary for alternatives.

HTML / CSS
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-primary" disabled>Disabled</button>
<button class="btn btn-primary btn-sm">Small</button>

Forms & Inputs #

Collect user data with accessible, validated form controls. Includes inputs, selects, textareas, and toggles.

We'll never share your email with anyone else.

Enable notifications
HTML / CSS
<label class="form-label">Email</label>
<input type="email" class="form-input" placeholder="you@example.com" />
<select class="form-select">
  <option>Starter</option>
</select>

Cards #

Container elements for grouping related content. Hover effects and flexible layouts built-in.

📊

Analytics Dashboard

Track user engagement, conversion rates, and revenue metrics in real-time.

🚀

Deployment

Ship to production with zero-downtime deploys and automatic rollbacks.

HTML / CSS
<div class="card">
  <div class="card-icon">📊</div>
  <h3>Analytics</h3>
  <p>Track metrics...</p>
  <div class="card-footer">
    <button class="btn btn-primary btn-sm">View</button>
  </div>
</div>

Badges #

Status indicators and labels for tags, categories, or notifications.

Primary Success Warning Error Neutral

Alerts #

Contextual feedback messages for success, warning, info, or error states.

â„šī¸
Your trial will expire in 3 days. Upgrade to keep your settings.
✅
Changes saved successfully!
âš ī¸
High disk usage detected. Consider upgrading your storage.
❌
Failed to connect to the API. Please check your network.

Tables #

Structured data display with hover states and responsive overflow handling.

Project Status Team Due Date
Dashboard Redesign In Progress Design & Frontend Oct 24, 2025
API Integration Review Backend Team Oct 20, 2025
User Onboarding Completed Product Oct 15, 2025

Modals #

Dialog boxes for confirmations, form inputs, or focused interactions.