Component Guide - Wireframe Kit

Buttons

Button Variants

<button class="wf-btn">Default</button>
<button class="wf-btn wf-btn-primary">Primary</button>
<button class="wf-btn wf-btn-danger">Danger</button>
<button class="wf-btn wf-btn-warning">Warning</button>
<button class="wf-btn wf-btn-info">Info</button>

Button Sizes

<button class="wf-btn text-sm py-1 px-2">Small</button>
<button class="wf-btn">Normal</button>
<button class="wf-btn text-lg py-3 px-6">Large</button>

Full Width Button

<button class="wf-btn wf-btn-primary w-full justify-center">Full Width</button>

Badges

Temel Badge'ler

Default Primary Success Warning Error

<span class="wf-badge">Default</span>
<span class="wf-badge wf-badge-primary">Primary</span>
<span class="wf-badge wf-badge-success">Success</span>
<span class="wf-badge wf-badge-warning">Warning</span>
<span class="wf-badge wf-badge-error">Error</span>

Kategori Badge'leri

Combo Slot Parking Locker Equipment F&B Experience Seasonal Group

<span class="wf-badge wf-badge-combo">Combo</span>
<span class="wf-badge wf-badge-slot">Slot</span>
<span class="wf-badge wf-badge-parking">Parking</span>
<span class="wf-badge wf-badge-locker">Locker</span>
<span class="wf-badge wf-badge-equipment">Equipment</span>
<span class="wf-badge wf-badge-fnb">F&B</span>
<span class="wf-badge wf-badge-experience">Experience</span>
<span class="wf-badge wf-badge-seasonal">Seasonal</span>
<span class="wf-badge wf-badge-group">Group</span>

Inputs

Text Input

<input type="text" class="wf-input" placeholder="Default input">
<input type="text" class="wf-input" value="Filled input">
<input type="text" class="wf-input" placeholder="Disabled" disabled>

Input with Label & Help Text

E-posta Adresi *

Dogrulama kodu bu adrese gonderilecek

<div class="wf-form-group">
  <label class="block text-sm font-medium mb-1">E-posta *</label>
  <input type="email" class="wf-input" placeholder="ornek@email.com">
  <p class="wf-form-help">Yardimci metin</p>
</div>

Textarea

Phone Input with Country Code

<div class="flex gap-2">
  <select class="wf-select w-24">
    <option>+90</option>
  </select>
  <input type="tel" class="wf-input flex-1" placeholder="5XX XXX XX XX">
</div>

Select & Dropdown

Select

<select class="wf-select">
  <option value="">Secin...</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Checkbox & Radio

Checkbox

Unchecked Checked Disabled

<label class="flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="wf-checkbox">
  <span>Label</span>
</label>

<input type="checkbox" class="wf-checkbox" checked>

Radio Buttons

Option A Option B Option C

<div class="wf-radio-group">
  <label class="flex items-center gap-2">
    <input type="radio" name="group" class="wf-radio" checked>
    <span>Option A</span>
  </label>
  <label class="flex items-center gap-2">
    <input type="radio" name="group" class="wf-radio">
    <span>Option B</span>
  </label>
</div>

Checkbox Group (Horizontal)

Yurtici Yurtdisi Gunubirlik

<div class="wf-checkbox-group horizontal">
  <label>...</label>
  <label>...</label>
</div>

Toggle Switch

Toggle

Bildirimler kapali Bildirimler acik

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

Cards

Basic Card

Bu bir temel kart ornegi. Icerik buraya gelir.

<div class="wf-card">
  <p>Card content</p>
</div>

Card with Header

Kart Basligi

Kart icerigi buraya gelir.

<div class="wf-card">
  <h2 class="text-xl mb-4 pb-2 border-b-2 border-gray-300">Baslik</h2>
  <p>Content</p>
</div>

Tables

Kullanici	Rol	Durum	Islem
AY Ahmet Yilmaz ahmet@email.com	Admin	Aktif
MK Mehmet Kaya mehmet@email.com	Operator	Pasif

<table class="wf-table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Modals

<!-- Trigger -->
<button @click="showModal = true">Modal Ac</button>

<!-- Modal -->
<div x-show="showModal" class="fixed inset-0 z-50 flex items-center justify-center p-4">
  <div class="fixed inset-0 bg-black/50" @click="showModal = false"></div>
  <div class="wf-card relative z-10 w-full max-w-md">
    <h2>Modal Basligi</h2>
    <p>Modal icerigi</p>
    <div class="flex justify-end gap-3 mt-6">
      <button @click="showModal = false">Kapat</button>
    </div>
  </div>
</div>

Alerts

Bilgi: Bu bir bilgi mesajidir.

Basarili: Islem basariyla tamamlandi.

Uyari: Dikkat edilmesi gereken bir durum var.

Hata: Bir hata olustu.

<div class="wf-alert wf-alert-info">Info message</div>
<div class="wf-alert wf-alert-success">Success message</div>
<div class="wf-alert wf-alert-warning">Warning message</div>
<div class="wf-alert wf-alert-error">Error message</div>

Annotation Notes

Bu bir wireframe notudur. Tasarim aciklamalari icin kullanilir.

<div class="wf-note">
  Annotation note content
</div>

Sidebar Items

<a href="#" class="wf-sidebar-item">
  <div class="wf-icon">H</div>
  <span>Dashboard</span>
</a>

<a href="#" class="wf-sidebar-item active">
  <div class="wf-icon">T</div>
  <span>Aktif Item</span>
</a>

Tabs

Tab 1 icerigi burada gorunur.

<div class="wf-tabs">
  <button class="wf-tab active">Tab 1</button>
  <button class="wf-tab">Tab 2</button>
</div>
<div class="wf-tab-content">
  Tab content
</div>

Stepper

Vertical Stepper

1

Bilet Secimi

Tamamlandi

2

Eklentiler

Seciliyor

3

Odeme

Bekliyor

<div class="wf-stepper">
  <div class="wf-step completed">
    <div class="wf-step-number">1</div>
    <div class="wf-step-content">
      <div class="wf-step-title">Step 1</div>
    </div>
  </div>
  <div class="wf-step active">...</div>
  <div class="wf-step">...</div>
</div>

Timeline

Siparis Onaylandi

08 Oca 2026, 14:35

Odeme basarili

Odeme Islendi

08 Oca 2026, 14:34

Uyari

08 Oca 2026, 14:33

Hata Olustu

08 Oca 2026, 14:32

<div class="wf-timeline">
  <div class="wf-timeline-item success">
    <div class="wf-timeline-dot"></div>
    <div class="wf-timeline-content">
      <div class="wf-timeline-title">Title</div>
      <div class="wf-timeline-time">Time</div>
      <div class="wf-timeline-description">Desc</div>
    </div>
  </div>
  <!-- info, warning, error variants -->
</div>

Calendar

Ocak 2026

Pt

Sa

Ca

Pe

Cu

Ct

Pz

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

Available Limited Full Today Selected

<div class="wf-calendar">
  <div class="wf-calendar-header">...</div>
  <div class="wf-calendar-grid">
    <div class="wf-calendar-weekdays">...</div>
    <div class="wf-calendar-days">
      <div class="wf-calendar-day">1</div>
      <div class="wf-calendar-day today">2</div>
      <div class="wf-calendar-day selected">3</div>
      <div class="wf-calendar-day available">4</div>
      <div class="wf-calendar-day limited">5</div>
      <div class="wf-calendar-day full">6</div>
      <div class="wf-calendar-day disabled">7</div>
      <div class="wf-calendar-day other">8</div>
    </div>
  </div>
</div>

Number Input

2

<div class="wf-number-input">
  <button class="wf-number-btn">-</button>
  <div class="wf-number-value">2</div>
  <button class="wf-number-btn">+</button>
</div>

Fieldset

Kisisel Bilgiler

Ad *

Soyad *

<fieldset class="wf-fieldset">
  <legend class="wf-fieldset-legend">Section Title</legend>
  <!-- Form content -->
</fieldset>

Wireframe Kit Components