Skip to main content
UDSUrban Design SystemBuild a multi-component HTML demoSITE 2026.06.10.1
Color
Brand
Font
Scale
Density

Composition Recipes

Curated multi-component patterns. Each recipe shows the target Web Component API for composing common UI patterns.

Modal form with validation

Dialog + Text Input + Dropdown + Notification + primary/secondary buttons. Demonstrates focus trap, validation, and confirm/cancel actions.

Riverbend Estates Saving will send a welcome email automatically.
Cancel Save tenant
Show code
html
<udc-dialog heading="Add Tenant" open>
  <udc-text-input label="Full name" required></udc-text-input>
  <udc-dropdown label="Property">
    <udc-dropdown-item value="riverbend">Riverbend Estates</udc-dropdown-item>
  </udc-dropdown>
  <udc-notification tone="info" inline>
    Saving will send a welcome email automatically.
  </udc-notification>
  <div slot="actions">
    <udc-button variant="secondary">Cancel</udc-button>
    <udc-button variant="primary">Save tenant</udc-button>
  </div>
</udc-dialog>

Searchable data table

Search + Chip filters + Data Table + bulk action bar. Shows the canonical pattern for a list page.

Active
…
Show code
html
<!-- Filter bar: Search + Chips -->
<div style="display:flex;gap:12px;">
  <udc-search label="Search tenants"></udc-search>
  <udc-chip variant="filter" selected>Active</udc-chip>
</div>

<!-- Table -->
<udc-data-table>
  <table>…</table>
</udc-data-table>

Settings panel with tabs

Tabs + List + Text Input + Checkbox + Save action. Pattern for grouped settings or preferences.

General Notifications Send weekly summary email Save changes
Show code
html
<udc-tabs selected-panel="general">
  <udc-tab panel="general">General</udc-tab>
  <udc-tab panel="notifications">Notifications</udc-tab>
  <udc-tab-panel panel="general">
    <udc-text-input label="Display name"></udc-text-input>
    <udc-checkbox name="summary">Send weekly summary email</udc-checkbox>
    <udc-button variant="primary">Save changes</udc-button>
  </udc-tab-panel>
</udc-tabs>

App shell with nav

Nav Header + Nav Vertical + content area. The standard authenticated app layout.

Boardroom
Dashboard Leasing
…
Show code
html
<udc-nav-header>
  <span slot="brand">Boardroom</span>
  <udc-button slot="actions" variant="ghost" leading-icon="notifications" icon-only aria-label="Notifications"></udc-button>
</udc-nav-header>
<div style="display:flex;min-height:calc(100vh - 64px);">
  <udc-nav-vertical aria-label="Main">
    <udc-nav-item href="/dashboard" current>Dashboard</udc-nav-item>
    <udc-nav-item href="/leasing">Leasing</udc-nav-item>
  </udc-nav-vertical>
  <main style="flex:1;">…</main>
</div>