<div class="sui-alert sui-alert-info">
  <svg>...</svg>
  <div class="sui-alert-content">Treść alertu</div>
</div>

<span class="sui-tag sui-tag-primary">Primary</span>
<span class="sui-tag sui-tag-success">Success</span>
<span class="sui-tag sui-tag-warning">Warning</span>
<span class="sui-tag sui-tag-danger">Danger</span>
<span class="sui-tag sui-tag-neutral">Neutral</span>

<span class="sui-status-dot sui-status-dot-success">Aktywny</span>

<span class="sui-stock-badge sui-stock-in">128</span>
<span class="sui-stock-badge sui-stock-low">5</span>
<span class="sui-stock-badge sui-stock-out">0</span>

<button class="sui-btn sui-btn-primary">Primary</button>
<button class="sui-btn sui-btn-secondary">Secondary</button>
<button class="sui-btn sui-btn-ghost">Ghost</button>
<button class="sui-btn sui-btn-danger">Danger</button>
<button class="sui-btn sui-btn-success">Success</button>

<button class="sui-btn sui-btn-primary sui-btn-sm">Small</button>
<button class="sui-btn sui-btn-primary">Default</button>
<button class="sui-btn sui-btn-primary sui-btn-lg">Large</button>

Treść karty. Klasa sui-card zawiera cały kontener.

Użyj sui-card-header, sui-card-body i sui-card-footer.

<div class="sui-card">
  <div class="sui-card-header">
    <h3 class="sui-card-header-title">Tytuł</h3>
    <div class="sui-card-header-actions">
      <button class="sui-btn">Akcja</button>
    </div>
  </div>
  <div class="sui-card-body">
    Treść karty...
  </div>
  <div class="sui-card-footer">
    Stopka karty
  </div>
</div>

<div class="sui-dropdown">
  <button class="sui-btn sui-dropdown-toggle">
    Wybierz
    <svg>...</svg>
  </button>
  <div class="sui-dropdown-menu">
    <a href="#" class="sui-dropdown-item">Opcja 1</a>
    <a href="#" class="sui-dropdown-item">Opcja 2</a>
    <div class="sui-dropdown-divider"></div>
    <a href="#" class="sui-dropdown-item sui-dropdown-item-danger">Usuń</a>
  </div>
</div>

<div class="sui-card" id="my-tabs">
  <nav class="sui-tabs-nav">
    <button class="sui-tab-btn active" data-tab="tab1">Tab 1</button>
    <button class="sui-tab-btn" data-tab="tab2">Tab 2</button>
  </nav>
  <div class="sui-tabs-content">
    <div class="sui-tab-panel active" data-panel="tab1">...</div>
    <div class="sui-tab-panel" data-panel="tab2">...</div>
  </div>
</div>

<script>SuiTabs.init('#my-tabs');</script>

<!-- Prosty tooltip z title -->
<button title="Podpowiedź">Hover</button>

<!-- Tooltip z klasą sui-tooltip -->
<span class="sui-tooltip" data-tooltip="Treść">
  Element
</span>

<span class="sui-spinner sui-spinner-sm"></span>
<span class="sui-spinner"></span>
<span class="sui-spinner sui-spinner-lg"></span>

<div class="sui-skeleton sui-skeleton-title"></div>
<div class="sui-skeleton sui-skeleton-text"></div>
<div class="sui-skeleton sui-skeleton-text" style="width: 80%;"></div>

// Użycie JavaScript API
SuiToast.info('Informacja');
SuiToast.success('Zapisano pomyślnie!');
SuiToast.warning('Sprawdź dane');
SuiToast.error('Wystąpił błąd');

// Z opcjami
SuiToast.show('Wiadomość', {
  type: 'success',
  duration: 5000
});

<div class="sui-stat-card">
  <div class="sui-stat-icon sui-stat-icon-primary">
    <svg>...</svg>
  </div>
  <div class="sui-stat-content">
    <div class="sui-stat-label">Label</div>
    <div class="sui-stat-value">Wartość</div>
    <div class="sui-stat-secondary">Dodatkowa info</div>
  </div>
</div>

<div class="sui-form-group">
  <label class="sui-form-label">Etykieta</label>
  <input type="text" class="sui-form-input" placeholder="...">
</div>

<textarea class="sui-form-textarea" rows="4"></textarea>

<div class="sui-form-group">
  <label class="sui-form-label">Kategoria</label>
  <select class="sui-form-select">
    <option value="">-- Wybierz --</option>
    <option value="1">Opcja 1</option>
    <option value="2">Opcja 2</option>
  </select>
</div>

<label class="sui-toggle">
  <input type="checkbox" class="sui-toggle-input">
  <span class="sui-toggle-slider"></span>
  <span class="sui-toggle-label">Label</span>
</label>

<label class="sui-form-check">
  <input type="checkbox" class="sui-form-check-input">
  <span class="sui-form-check-label">Label</span>
</label>

<div class="sui-grid sui-grid-2">
  <div class="sui-form-group">...</div>
  <div class="sui-form-group">...</div>
</div>

<div class="sui-grid sui-grid-3">...</div>
<div class="sui-grid sui-grid-4">...</div>

<table class="sui-table">
  <thead>
    <tr>
      <th>Kolumna</th>
      <th class="cell-number">Liczba</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Wartość</td>
      <td class="cell-number">123</td>
    </tr>
  </tbody>
</table>

Klasy pomocnicze:
- cell-mono - font mono (dla SKU, ID)
- cell-number - wyrównanie do prawej
- cell-actions - akcje w wierszu

<table class="sui-table sui-table-sortable" id="my-table">
  <thead>
    <tr>
      <th class="sortable" data-sort="name">Nazwa</th>
      <th class="sortable" data-sort="price">Cena</th>
    </tr>
  </thead>
  ...
</table>

<script>
SuiTable.initSort('#my-table');
</script>

<div class="sui-pagination">
  <span class="sui-pagination-info">
    Wyświetlono 1-25 z 1,234 produktów
  </span>
  <div class="sui-pagination-controls">
    <button class="sui-btn sui-btn-secondary sui-btn-sm" disabled>
      ← Poprzednia
    </button>
    <span class="sui-text-sm">Strona 1 z 50</span>
    <button class="sui-btn sui-btn-secondary sui-btn-sm">
      Następna →
    </button>
  </div>
</div>

<!-- Inline SVG (zalecane) -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 
     stroke-width="2" width="16" height="16">
  <line x1="12" y1="5" x2="12" y2="19"/>
  <line x1="5" y1="12" x2="19" y2="12"/>
</svg>

Używamy Feather Icons style:
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"