Skip to content
⌘K
How-To 6 patterns · 3 frameworks

Cookbook patterns

Composition recipes for common UI scenarios. Each pattern shows the intended way to combine atomic components — Card with Form, Dialog with Alert, Table with Badge — and ships in Angular, React, and Vue.

01

Login Form

The most frequent AI-generated page. Shows Card composition, validation error display, and loading states.

LlmCardLlmInputLlmButtonLlmAlertLlmCheckbox
Read full guide

Sign in

Enter your credentials to continue

 
<llm-card variant="elevated" padding="lg">
  <llm-card-header>
    <h3>Sign in</h3>
  </llm-card-header>
  <llm-card-content>
    @if (showError()) {
      <llm-alert variant="danger">Invalid email or password.</llm-alert>
    }
    <llm-input type="email" placeholder="you@example.com" [invalid]="showError()" />
    <llm-input type="password" placeholder="••••••••" [invalid]="showError()" />
    <llm-checkbox>Remember me</llm-checkbox>
  </llm-card-content>
  <llm-card-footer>
    <llm-button variant="primary" [loading]="loading()" (click)="signIn()">
      Sign in
    </llm-button>
  </llm-card-footer>
</llm-card>
02

Settings Page

Exercises tabs, form controls, and layout composition. The bread and butter of SaaS applications.

LlmTabGroupLlmToggleLlmSelectLlmInputLlmButtonLlmAlert
Read full guide

Settings

Manage your account preferences.

 
<llm-tab-group [(selectedIndex)]="activeTab">
  <llm-tab label="Account">
    <llm-input label="Full Name" placeholder="John Doe" />
    <llm-input label="Email" placeholder="john@example.com" />
  </llm-tab>
  <llm-tab label="Notifications">
    <llm-toggle [(checked)]="emailOn">Email notifications</llm-toggle>
    <llm-toggle [(checked)]="pushOn">Push notifications</llm-toggle>
  </llm-tab>
</llm-tab-group>
<llm-button variant="primary" (click)="save()">Save changes</llm-button>
03

Confirmation Dialog

Accessible modal flow for destructive actions. Shows trigger → dialog → action logic.

LlmDialogLlmAlertLlmButton
Read full guide

Danger Zone

Deleting your account is permanent.

Delete Account

Are you sure you want to delete your account?

 
<llm-button variant="primary" (click)="isOpen.set(true)">Delete account</llm-button>


<llm-dialog [(open)]="isOpen" size="sm">
  <llm-dialog-header>Delete Account</llm-dialog-header>
  <llm-dialog-content>
    <llm-alert variant="warning">This action cannot be undone.</llm-alert>
  </llm-dialog-content>
  <llm-dialog-footer>
    <llm-button variant="outline" (click)="isOpen.set(false)">Cancel</llm-button>
    <llm-button variant="primary" (click)="confirm()">Yes, delete</llm-button>
  </llm-dialog-footer>
</llm-dialog>
04

Data List with Actions

Inline actions on a list of items. The core pattern for dashboards and admin panels — Card + Badge + Button composition.

LlmCardLlmBadgeLlmButtonLlmMenuLlmTooltip
Read full guide

Projects

Marketing WebsiteActive

Brand-refresh landing page

Mobile App v2In Review

Cross-platform rewrite in Flutter

API GatewayDraft

Microservices ingress layer

Legacy MigrationPaused

PHP monolith → Node services

 
<div class="list-header">
  <h2>Projects</h2>
  <llm-button variant="primary" size="sm">New project</llm-button>
</div>
@for (item of items(); track item.id) {
  <llm-card variant="outlined" padding="md">
    <llm-card-content>
      <span>{{ item.name }}</span>
      <llm-badge [variant]="item.statusVariant" size="sm">{{ item.status }}</llm-badge>
      <p>{{ item.description }}</p>
      <llm-button variant="outline" size="sm" llmTooltip="View details">View</llm-button>
      <llm-button
        variant="outline"
        size="sm"
        [llmMenuTriggerFor]="actionsMenu"
        llmTooltip="More actions"
      >...</llm-button>
      <ng-template #actionsMenu>
        <llm-menu>
          <llm-menu-item>Edit</llm-menu-item>
          <llm-menu-item>Duplicate</llm-menu-item>
          <llm-menu-separator />
          <llm-menu-item>Delete</llm-menu-item>
        </llm-menu>
      </ng-template>
    </llm-card-content>
  </llm-card>
}
05

Notification Center

Structural feedback grouping using Accordion and Alert. Useful for monitoring and admin tools.

LlmAccordionGroupLlmAlertLlmBadgeLlmButton
Read full guide

Notifications

 
<llm-accordion-group [multi]="true" variant="separated">
  <llm-accordion-item [expanded]="true">
    <span llmAccordionHeader>
      Errors <llm-badge variant="danger" size="sm">2</llm-badge>
    </span>
    <llm-alert variant="danger">Database failed.</llm-alert>
    <llm-alert variant="danger">Service 503.</llm-alert>
  </llm-accordion-item>
  <llm-accordion-item>
    <span llmAccordionHeader>
      Warnings <llm-badge variant="warning" size="sm">1</llm-badge>
    </span>
    <llm-alert variant="warning">Disk at 89%.</llm-alert>
  </llm-accordion-item>
</llm-accordion-group>
06

Management Dashboard

The densest cookbook pattern — metric cards, activity table, and quota indicators combined. Shows how Card, Table, TabGroup, Badge, Alert, and Progress fit together.

LlmCardLlmTableLlmTabGroupLlmBadgeLlmAlertLlmProgressLlmButton
Read full guide

Operations Overview

Snapshot across the selected range

Active users
8,412+12%

vs. previous period

Sessions
24,390+4%

vs. previous period

Revenue
$42,108-2%

vs. previous period

Avg. response
184 ms+18 ms

P95 across edges

Recent Activity

UserActionStatusTime
alex@acme.devRotated API keySuccess2m ago
maria@acme.devInvited new memberPending14m ago
deploy-botPushed build v3.2.1Success1h ago
lee@acme.devRemoved webhookFailed2h ago

Plan Usage

API requests87%
Storage42%
Seats9 / 12
 
<!-- Metric cards + activity table + quota widget.
     Uses Card, Table, TabGroup, Badge, Alert, Progress. -->
<llm-tab-group variant="pills" [(selectedIndex)]="range">
  <llm-tab label="7D" />
  <llm-tab label="30D" />
  <llm-tab label="90D" />
</llm-tab-group>
@if (quota() >= 85) {
  <llm-alert variant="warning">API quota at {{ quota() }}%.</llm-alert>
}
<!-- ...metric cards grid (LlmCard + LlmBadge delta)... -->
<llm-table variant="striped" size="sm">
  <llm-thead>
    <llm-tr><llm-th>User</llm-th><llm-th>Action</llm-th></llm-tr>
  </llm-thead>
  <llm-tbody>
    @for (row of activity(); track row.id) {
      <llm-tr>
        <llm-td>{{ row.user }}</llm-td>
        <llm-td>{{ row.action }}</llm-td>
      </llm-tr>
    }
  </llm-tbody>
</llm-table>
<llm-progress [value]="quota()" variant="warning" size="sm" />