Wireframe Kit

<!-- Top bar slots: org switcher, search, action icons, avatar -->
<wf-navbar
  org="Moderne, Inc."
  search="Search recipes, repos, runs…"
  actions="✦,?,◐"
  avatar="AC">
</wf-navbar>

<!-- Rail slots: home (top), items (Label|icon pairs), tenant (bottom) -->
<wf-sidebar
  home="Moderne"
  items="Moddy|sparkles,DevCenter|pie-chart,Trigrep|search,Artifacts|package,Marketplace|globe,Builder|blocks,Activity|history,Changelog|activity"
  active="0"
  tenant="MOD">
</wf-sidebar>

<!-- L-shape app shell: rail on left (full height), top bar over main only -->
<div class="wf-page">
  <wf-sidebar home="App" items="Moddy|sparkles,Trigrep|search" active="0" tenant="ACM"></wf-sidebar>
  <wf-navbar org="Org name" search="Search…" actions="✦,?" avatar="AC"></wf-navbar>
  <main class="wf-main">...</main>
</div>

<!-- No-rail variant for catalog/auth pages -->
<div class="wf-page wf-page--no-sidebar">
  <wf-navbar org="Org name"></wf-navbar>
  <main class="wf-main">...</main>
</div>

<!-- Inside main: Grid (2/3/4 cols), Stack (vertical), Row (horizontal) -->
<div class="wf-grid wf-grid--3">...</div>
<div class="wf-stack">...</div>
<div class="wf-row">...</div>

<wf-button>Default</wf-button>
<wf-button variant="primary">Primary</wf-button>
<wf-button variant="secondary">Secondary</wf-button>
<wf-button variant="ghost">Ghost</wf-button>
<wf-button variant="destructive">Destructive</wf-button>
<wf-button size="sm">Small</wf-button>
<wf-button size="lg">Large</wf-button>

<wf-button-group items="Day,Week,Month"></wf-button-group>

<wf-button-tab items="Overview,Details,History" active="0"></wf-button-tab>

<wf-input label="Email address" placeholder="you@example.com"></wf-input>
<wf-input label="With error" error="This field is required"></wf-input>

<wf-textarea label="Description" placeholder="Enter a description..."></wf-textarea>

<wf-select placeholder="Choose option..."></wf-select>
<wf-select value="Selected value"></wf-select>

<wf-search placeholder="Search recipes..."></wf-search>

<wf-datepicker value="Jun 4, 2026"></wf-datepicker>

<wf-checkbox label="Option A"></wf-checkbox>
<wf-checkbox label="Option B" checked></wf-checkbox>

<wf-radio label="Option A" selected></wf-radio>
<wf-radio label="Option B"></wf-radio>

<wf-toggle label="Dark mode"></wf-toggle>
<wf-toggle label="Enabled" on></wf-toggle>

<wf-dropdown items="Edit,Duplicate,Archive,Delete" label="Actions"></wf-dropdown>

<wf-badge>Default</wf-badge>
<wf-badge filled>Filled</wf-badge>

<wf-tag>Java</wf-tag>

<wf-chip>Filter</wf-chip>
<wf-chip removable>Removable</wf-chip>

<wf-avatar initials="AC"></wf-avatar>
<wf-avatar size="sm" initials="S"></wf-avatar>
<wf-avatar size="lg" initials="LG"></wf-avatar>

<wf-kv key="Author" value="Moderne Team"></wf-kv>

<wf-list-item title="Spring Boot Migration" subtitle="Java - 342 runs" trailing="2m ago"></wf-list-item>

<wf-table rows="5" cols="4" headers="Name,Status,Role,Date"></wf-table>

<wf-data-grid rows="5" cols="4" headers="Recipe,Status,Repos,Date"></wf-data-grid>

<wf-progress value="72"></wf-progress>

<wf-diffstat additions="24" deletions="8"></wf-diffstat>

<wf-breadcrumb items="Home,Recipes,Java,Spring Boot"></wf-breadcrumb>

<wf-tabs items="Overview,Code Changes,History,Settings" active="0"></wf-tabs>

<wf-pagination pages="12" active="3"></wf-pagination>

<wf-alert variant="info" title="Info">Message here.</wf-alert>
<wf-alert variant="success" title="Done">All good.</wf-alert>
<wf-alert variant="warning" title="Heads up">Check this.</wf-alert>
<wf-alert variant="error" title="Error">Failed.</wf-alert>

<wf-banner>Your message here.</wf-banner>

<wf-toast>Recipe run completed</wf-toast>

<wf-modal title="Confirm action" open>
  <p>Are you sure?</p>
</wf-modal>

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

<wf-empty-state
  title="No recipes found"
  message="Try adjusting your search"
  action="Create Recipe">
</wf-empty-state>

<wf-card title="Card Title" footer>
  Your content here
</wf-card>

<wf-stat-card label="Active Recipes" value="247" change="+12 this week"></wf-stat-card>

<wf-chart title="Weekly Recipe Runs" bars="7"></wf-chart>

<wf-code-snippet language="yaml" lines="5"></wf-code-snippet>

<!-- Or with real content: -->
<wf-code-snippet language="java">
public class Main {
  public static void main(String[] args) {}
}
</wf-code-snippet>

<wf-tree depth="3" items="4"></wf-tree>

<wf-card-table title="Recipe Runs" rows="4"></wf-card-table>

<wf-filter-results rows="4" headers="Repository,Status,Changes,Date" filters="Status,Language"></wf-filter-results>

<wf-data-table-layout rows="5" headers="Name,Status,Type,Modified"></wf-data-table-layout>

<wf-changelog-feed entries="4"></wf-changelog-feed>

<wf-recipe-results recipe="Migrate to Java 17" status="completed" repos="24" changes="18" errors="2"></wf-recipe-results>

<wf-activation headline="Welcome to Moderne" cta="Run your first recipe"
  prereqs="Connect an SCM:done,Add repositories:done,Run first recipe:pending">
</wf-activation>