App Patterns

Functional patterns from the product app. These combine layer components into standard application layouts — forms, lists, modals, and dashboards.

Form Layout

A form wrapper with labeled inputs, section headers, a save bar, and a danger zone. The standard pattern for every create/edit page in the app.

When to use: Building settings pages, edit forms, or any CRUD interface.

MDC

<FormWrapper position="left">
  <UxInput label="Name" name="name" :error="errors.name">
    <input class="w-full" type="text" v-model="record.name" />
  </UxInput>

  <UxInput label="Description" name="description">
    <input class="w-full" type="text" v-model="record.description" />
  </UxInput>

  <div class="-mt-5">
    <FormSmallHeader>
      Config
      <template #right>
        <UxToggle size="small" :label="record.enabled ? 'Active' : 'Inactive'">
          <input type="checkbox" v-model="record.enabled" class="sr-only peer">
        </UxToggle>
      </template>
    </FormSmallHeader>
  </div>

  <UxInput label="Check Interval" name="interval">
    <select class="w-full" v-model="record.checkInterval">
      <option value="5m">5 Minutes</option>
      <option value="15m">15 Minutes</option>
      <option value="1h">1 Hour</option>
    </select>
  </UxInput>

  <FormSaveBar @save="save" @cancel="reset"
    :saving="saving" :dirty="isDirty"
    :disabled="!isDirty || !isComplete || !isValid" />
</FormWrapper>

<FormWrapper position="left" class="mt-5">
  <FormSmallHeader>Danger</FormSmallHeader>
  <UxDangerDelete @delete="remove" :verify="true" target="Stack" />
</FormWrapper>

Managed List

A title bar with an add button, followed by a flat list of items with toggle controls and manage actions. The standard pattern for resource index pages.

When to use: Showing a browsable list of resources with enable/disable and navigation to detail pages.

Rules

New Rule

New Vendor Discovery

Alert when a new vendor is detected

Manage

Bandwidth Threshold

Alert when bandwidth exceeds 10GB/hour

Manage

Risk Delta

Alert on risk score changes above 20%

Manage

MDC

<PageTitle :breadcrumb="['Alerting']">
  Rules
  <template #right>
    <UxAddBtn @add="addRule">New Rule</UxAddBtn>
  </template>
</PageTitle>

<div class="flex flex-col">
  <UxListItem v-for="rule in rules" :key="rule.id"
    :description="rule.description"
    manageTxt="Manage"
    @manage="manage(rule.id)"
  >
    <template #left>
      <UxToggle>
        <input type="checkbox" v-model="rule.enabled"
          class="sr-only peer"
          @change="toggle(rule.id, rule.enabled)">
      </UxToggle>
    </template>
    {{ rule.name }}
  </UxListItem>
</div>

Modal Picker

A section header with an add trigger that opens a modal containing a searchable list. Selected items appear below as a removable list. Used for assigning integrations, members, or any many-to-many relationship.

When to use: Assigning items from a pool — integrations to a rule, members to a team, stacks to a policy.

Report Integrations

Add Integration

Slack — Security

Posts to #security channel

Remove

Webhook — PagerDuty

https://hooks.example.com/alert

Remove

MDC

<FormSmallHeader class="mb-5">
  Report Integrations
  <template #right>
    <UxAddBtn @click="showPicker = true">Add Integration</UxAddBtn>
  </template>
</FormSmallHeader>

<UxModal v-model:open="showPicker">
  <div class="mt-5 mb-3">
    <UxInput label="Search">
      <input class="w-full" type="text" v-model="searchTerm" />
    </UxInput>

    <div class="mt-5">
      <UxListItem v-for="item in availableItems" :key="item.id"
        :description="item.description"
        manageTxt="Add" :show-arrow="false" :clickable="false"
        @manage="add(item.id)">
        {{ item.name }}
      </UxListItem>
    </div>
  </div>
</UxModal>

<div class="flex flex-col -gap-1">
  <UxListItem v-for="item in selectedItems" :key="item.id"
    manageTxt="Remove" :show-arrow="false" :clickable="false"
    @manage="remove(item.id)">
    {{ item.name }}
  </UxListItem>
</div>

Metric Dashboard

A row of DataMetricBase cards showing key metrics with optional trend data and navigation links. The standard overview pattern for dashboard sections.

When to use: Showing a high-level summary of metrics — traffic stats, inventory counts, or security scores.

Connections

48.3

Connections/s

12.4

Bandwidth In

2.65

Bandwidth Out

849.92

MDC

<div class="flex items-center gap-10">
  <DataMetricBase label="Connections"
    :val="summary.connections" size="26"
    to="/traffic/connections" />

  <DataMetricBase label="Connections/s"
    :val="summary.connectionsPerSecond" size="26"
    to="/traffic/connections" />

  <DataMetricBase label="Bandwidth In"
    :val="summary.bytesReceived" unit="bytes" size="26"
    to="/traffic/bandwidth" />

  <DataMetricBase label="Bandwidth Out"
    :val="summary.bytesSent" unit="bytes" size="26"
    to="/traffic/bandwidth" />
</div>

Data Table

A sortable, searchable, expandable data table built from 8 composable sub-components. The standard pattern for traffic lists, inventory tables, and any tabular data view.

When to use: Displaying tabular data with column sorting, inline search filtering, expandable row details, and optional infinite scroll.

	requests	bytes in	errors

api.github.com	45,230	12.3 MB	23
api.stripe.com	32,456	8.7 MB	12
api.cloudflare.com	28,901	15.2 MB	5
api.twilio.com	15,678	3.4 MB	8

See full compositional guide →

MDC

<template>
  <UxTableList>
    <template #header>
      <tr>
        <UxTableListColumnHeader
          v-for="metric in sortMetrics"
          :key="metric.name"
          :metric="metric"
          :sortBy="sortBy"
          @sortUp="onSort(metric.name, 'up')"
          @sortDown="onSort(metric.name, 'down')"
        />
      </tr>
      <tr><th class="h-[5px] p-0 bg-black" colspan="100%"></th></tr>
    </template>

    <UxTableListExpandRow v-for="item in items" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.requests }}</td>

      <template #details>
        <div class="p-6 bg-white shadow-lg rounded-12">
          Detail content here
        </div>
      </template>
    </UxTableListExpandRow>
  </UxTableList>
</template>

<script setup>
const sortMetrics = [
  { name: 'name', width: '200px', search: (needle) => { search.value = needle } },
  { name: 'requests', width: '120px' },
]

const sortBy = ref('requests')
const sortDirection = ref('down')

function onSort(metric, direction) {
  sortBy.value = metric
  sortDirection.value = direction
}
</script>

Notification Rule

A notification rule card composed as readable inline sentences. Condition/action/throttling rows adapt reactively — selecting a dropdown changes which subsequent segments appear.

When to use: Building alert configuration UIs where users define rules for policy violations, thresholds, or event-driven notifications.

Active

Condition :

Action :

Throttling :

Inactive

Condition :

Action :

Throttling :

MDC

<AlertConfig
  v-for="(rule, i) in rules"
  :key="i"
  v-model="rules[i]"
  @delete="rules.splice(i, 1)"
/>

<!-- Each card has reactive sentence rows:
  Condition: "for every violation" or threshold mode
  Action: HTTP request or Slack message
  Throttling: none or rate-limited

  Selecting a dropdown value changes which
  subsequent segments appear in the row. -->