### Stack Align Start Example

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/components/stack.md

Shows how to use the `align="start"` prop to align items to the beginning of the cross-axis in both column and row stacks.

```vue
<dt-stack
  gap="400"
  align="start"
>
  <div>Short</div>
  <div>
    Taller item<br>
    with more content
  </div>
  <div>Short</div>
</dt-stack>
<dt-stack
  direction="row"
  gap="400"
  align="start"
>
  <div>Short</div>
  <div>
    Taller item<br>
    with more content
  </div>
  <div>Short</div>
</dt-stack>
```

--------------------------------

### Install UI-Kits Packages

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/about/whats-new/posts/2026-3-30.md

Install the necessary UI-Kits packages using npm. Each kit can be installed independently.

```bash
npm install @dialpad/callbarkit
npm install @dialpad/chatkit
npm install @dialpad/formkit
npm install @dialpad/navigationkit
npm install @dialpad/workflowkit
```

--------------------------------

### Stack Justify: Start Example

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/components/stack.md

Demonstrates aligning items to the start of the main axis. Use this when items should be grouped at the beginning of the stack.

```html
<dt-stack
  justify="start"
>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</dt-stack>
```

--------------------------------

### Install Stylelint

Source: https://github.com/dialpad/dialtone/blob/staging/packages/stylelint-plugin-dialtone/README.md

Install Stylelint as a development dependency.

```sh
npm install -D stylelint
```

--------------------------------

### ESLint Rule Configuration Example

Source: https://github.com/dialpad/dialtone/blob/staging/docs/prd/2026-05-07-eslint-deprecated-class-props.md

Provides an example of how the `deprecated-class-props` rule would be configured within an ESLint setup, noting that it is not included in the recommended preset.

```javascript
// Plugin recommended preset: `recommended: false` in rule meta
```

--------------------------------

### Search Components Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-mcp-server/README.md

Examples of queries to discover Dialtone Vue components, including their props, events, and slots.

```bash
button
modal
checkbox
```

--------------------------------

### Search Icons Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-mcp-server/README.md

Examples of queries to find icons from Dialtone's icon library.

```bash
notification
arrow up
profile
calendar
```

--------------------------------

### Install ESLint

Source: https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/README.md

Install ESLint as a development dependency in your project.

```shell
npm i eslint --save-dev
```

--------------------------------

### Search Utility Classes Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-mcp-server/README.md

Examples of queries to find CSS utility classes for styling HTML elements.

```bash
padding 8px
display flex
width 100%
margin top auto
text align center
```

--------------------------------

### Install PostCSS Responsive Variations Plugin

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/utilities/responsive/breakpoints.md

Install the necessary PostCSS plugin using npm.

```bash
npm install @dialpad/postcss-responsive-variations
```

--------------------------------

### Build and Start Dialtone Development Server

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/guides/getting-started/index.md

Builds Dialtone and starts the development server. Access the running instance at http://localhost:4000/.

```bash
nx run dialtone-documentation:start
```

--------------------------------

### Basic Component Usage Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-vue/docs/storybook/writing_docs.mdx

Shows a basic example of how to use a component with its default slot.

```jsx
<my-component some="prop">
  Default Slot
</my-component>
```

--------------------------------

### Install and Use Node Version Manager (nvm)

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/guides/getting-started/index.md

Installs and switches to the Node.js version specified in the .nvmrc file.

```bash
nvm install
nvm use
```

--------------------------------

### Install Dialtone Packages

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-docs/src/content/architecture/architecture-monorepo-structure.md

Install the main Dialtone package which bundles CSS, tokens, and Vue components, or install individual packages for better tree-shaking.

```bash
# Single install (bundles CSS + tokens + Vue)
pnpm add @dialpad/dialtone

# Individual installs (recommended for tree-shaking)
pnpm add @dialpad/dialtone-vue @dialpad/dialtone-css @dialpad/dialtone-tokens
```

--------------------------------

### Runtime Theme Switching JavaScript Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-docs/src/content/architecture/architecture-design-token-pipeline.md

Example demonstrating how to import and inject a JavaScript theme bundle into the DOM for runtime theme switching.

```javascript
// Import a theme
import dpDark from '@dialpad/dialtone-tokens/themes/dp-dark';

// Inject into DOM
const style = document.createElement('style');
style.textContent = dpDark.brand.css;
document.head.appendChild(style);

// All --dt-* custom properties now reflect dp dark theme
// Every component updates automatically
```

--------------------------------

### Install Dialtone CLI

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-cli/README.md

Install the Dialtone CLI globally using npm.

```bash
npm install -g @dialpad/dialtone-cli
```

--------------------------------

### Install Dialtone Vue and CSS

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-vue/README.md

Install the Dialtone Vue library and its associated CSS package using npm.

```bash
npm install @dialpad/dialtone-css @dialpad/dialtone-vue
```

--------------------------------

### Install PostCSS Dependencies

Source: https://github.com/dialpad/dialtone/blob/staging/packages/postcss-responsive-variations/README.md

Installs the necessary PostCSS and the responsive variations plugin using npm.

```sh
npm install --save-dev postcss @dialpad/postcss-responsive-variations
```

--------------------------------

### Example Component Usage

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-docs/tests/fixtures/public-docs/complete.md

This snippet shows the basic structure for using the example component within a Vue template.

```html
<code-well-header>
  <example-component />
</code-well-header>
```

--------------------------------

### Search Design Tokens Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-mcp-server/README.md

Examples of queries to find Dialtone design tokens, which are CSS variables.

```bash
color foreground primary
space 400
font family
font weight bold
```

--------------------------------

### Pinned Banner Example

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/components/banner.md

This example shows how to pin a banner to the top of the window. It includes a detailed description and an action button.

```html
<aside class="d-banner d-banner--base d-banner--pinned" role="alert" aria-hidden="false">...</aside>
```

```vue
<dt-banner
  :pinned="true"
  title="Optional banner title"
>
  Detailed description goes here.
  <template #action>
    <dt-button size="sm" kind="muted" importance="outlined">Action</dt-button>
  </template>
</dt-banner>
```

--------------------------------

### Commit Convention Examples

Source: https://github.com/dialpad/dialtone/blob/staging/CLAUDE.md

Examples demonstrating the required format for commit messages, including type, scope, Jira ticket ID, and subject.

```text
feat(select-menu): DLT-123 add leftIcon prop
```

```text
fix(combobox, combobox-with-popover): DLT-456 fix keyboard navigation
```

```text
chore: NO-JIRA update dependencies
```

--------------------------------

### Start Dialtone Vue Storybook

Source: https://github.com/dialpad/dialtone/blob/staging/README.md

Starts the Dialtone Vue Storybook development server. Access it at http://localhost:9011/.

```bash
nx run dialtone-vue:start
```

--------------------------------

### Install Dependencies Command

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-docs/src/content/architecture/architecture-build-system.md

Command to install all project dependencies from the repository root. Avoid running from within package directories to prevent lockfile corruption.

```bash
pnpm install

```

--------------------------------

### Import Component Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-vue/docs/storybook/writing_docs.mdx

Demonstrates how to import a component from the library.

```js
import { MyComponent } from '@dialpad/component';
```

--------------------------------

### Examples of Class Patterns for Configuration

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/utilities/responsive/breakpoints.md

Illustrates how to define exact class names or use regular expressions to specify multiple related classes for responsive variations.

```javascript
const classes = [
  // Exact match
  '.d-d-block',

  // Regex for multiple related classes
  /\.d-d-(flex|none|block)$/,     // Matches .d-d-flex, .d-d-none, .d-d-block
  /\.d-p[0-9]+$/,                 // Matches .d-p8, .d-p16, .d-p24, etc.
  /\.d-m[tblr]?[0-9]*$/,          // Matches .d-m8, .d-mt16, .d-ml24, etc.
];
```

--------------------------------

### Install Dialtone 9 with @latest

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/about/whats-new/posts/2024-5-15.md

Use this command to install the latest version of Dialtone, which is now Dialtone 9. Ensure exact versioning with `--save-exact`.

```bash
npm install @dialpad/dialtone@latest --save-exact
```

--------------------------------

### Run Development Server

Source: https://github.com/dialpad/dialtone/blob/staging/packages/combinator/README.md

Start the development server for the Dialtone Combinator.

```bash
pnpm run dev
```

--------------------------------

### Gradient Color Stops

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/utilities/backgrounds/gradients.md

Defines the starting and ending color stops for gradients. Use `d-bgg-from-{color}` for the start and optionally `d-bgg-to-{color}` for the end. The example shows CSS variables for opacity and color definition.

```html
<div
  class="d-fl-shrink0 d-m4 d-ml16 d-h32 d-w64 d-bar4 d-bgg-to-r d-bgg-from-black-100"
  :class="[`d-bgg-${direction}-${color}-${stop}`]"
>
</div>
```

--------------------------------

### Searchable Documentation Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-docs/src/content/standards/standard-ai-documentation.md

Use exact component names, package names, and technical terms for AI discoverability. This example shows good practices for searchable content.

```markdown
DtButton is a Vue 3 component from @dialpad/dialtone-vue package.
It integrates with dialtone-css utility classes and uses Dialtone design tokens.
Built with VuePress and deployed via GitHub Actions.
```

--------------------------------

### Vue Script Setup for Typography

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/design/typography/index.md

Imports necessary components and data for typography styles, and filters the main typography styles into categories like headlines, body, labels, helpers, and code. This setup is essential for rendering the typography examples and tables.

```javascript
<script setup>
  import { typographyVariants, typographyStyles } from '@data/type.json';
  import CopyButton from '@baseComponents/CopyButton.vue';
  import SvgLoader from '@baseComponents/SvgLoader.vue';
  import ClampedTableWrapper from '@baseComponents/ClampedTableWrapper.vue';

  const typographyStylesHeadlines = typographyStyles.filter(type => type.var.startsWith("d-headline"));
  const typographyStylesBody = typographyStyles.filter(type => type.var.startsWith("d-body"));
  const typographyStylesLabel = typographyStyles.filter(type => type.var.startsWith("d-label"));
  const typographyStylesHelper = typographyStyles.filter(type => type.var.startsWith("d-helper"));
  const typographyStylesCode = typographyStyles.filter(type => type.var.startsWith("d-code"));

  const example = "The quick brown fox jumps over the lazy dog.";
</script>
```

--------------------------------

### Flex Start Items - Flexbox Utilities

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/utilities/flex/align-items.md

Use `d-ai-flex-start` to align items to the beginning of the cross axis. This example shows varying item heights.

```html
<dt-stack direction="row" class="d-ai-flex-start">
  <div class="d-h32">1</div>
  <div class="d-h64">2</div>
  <div class="d-h16">3</div>
</dt-stack>
```

--------------------------------

### VuePress Build Flow Overview

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-docs/src/content/architecture/architecture-documentation-system.md

This diagram outlines the build process for the Dialtone documentation site, showing parallel dependency builds orchestrated by NX, including the generation of component documentation, followed by the VuePress build.

```bash
nx run dialtone-documentation:build

1. Parallel dependency builds (NX-orchestrated):
   ├── dialtone-tokens:build      → packages/dialtone-tokens/dist/
   ├── dialtone-css:build         → packages/dialtone-css/lib/dist/
   ├── dialtone-icons:build       → packages/dialtone-icons/dist/
   ├── dialtone-vue:build
   │   └── build-dialtone-vue-docs.mjs
   │       └── component-documentation.json
   └── combinator:build           → packages/combinator/dist/

2. VuePress build:
   ├── Parses all .md files in docs/
   ├── Extracts frontmatter (title, status, storybook, figma_url)
   ├── Loads _data/*.json for navigation and component data
   ├── Bundles with Vite
   └── Output: docs/.vuepress/dist/ (static HTML/CSS/JS)
```

--------------------------------

### Get Dialtone Component Documentation

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-cli/README.md

Retrieve full documentation for a specific Dialtone component. Options include displaying props, descriptions, specific prop details, events, slots, and usage examples.

```bash
dialtone component button
```

```bash
dialtone component DtModal
```

```bash
dialtone component button --props              # props table
```

```bash
dialtone component button --props --describe   # props with descriptions
```

```bash
dialtone component button --prop kind          # single prop detail
```

```bash
dialtone component button --events             # events only
```

```bash
dialtone component button --slots              # slots only
```

```bash
dialtone component button --examples           # usage example
```

--------------------------------

### Install NX Globally

Source: https://github.com/dialpad/dialtone/blob/staging/README.md

Installs the latest version of NX globally on your system. This is the recommended way to install NX for monorepo management.

```bash
pnpm add --global nx@latest
```

--------------------------------

### Story Template and Args Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-vue/docs/storybook/writing_storybook.mdx

Demonstrates a story template that wraps a component and how to set arguments for a specific story state, like a success message.

```javascript
import DtInput from './input';

... 

// Template of the story component, this is a harness Vue component that
// wraps the DtInput component
const Template = (args, { argTypes }) => {
  return {
    components: { DtInput },
    template: baseInputTemplate,
    props: Object.keys(argTypes),
    methods: { onInput: action('input') },
  };
};

... 

// Snapshotting props
export const WithSuccess = Template.bind({});
WithSuccess.args = {
  messages: [{ message: 'This is a success message', type: 'success' }],
};
```

--------------------------------

### Install Dialtone MCP Server (User-Scoped - Option B)

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/guides/mcp-server/index.md

Install the Dialtone MCP Server globally using npm for user-scoped access. After global installation, add it to Claude Code.

```bash
npm install -g @dialpad/dialtone-mcp-server
claude mcp add dialtone --scope user dialtone-mcp-server
```

--------------------------------

### Good: Shared Example using Object Structure

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-vue/docs/component_driven_development/writing_component_tests.mdx

Another approach to shared examples involves structuring them as objects, allowing for more complex or parameterized expectations. This example demonstrates sharing an 'equals' expectation.

```javascript
const itBehavesLikeEquals = (num) => ({
  itself: expectation => {
    expect(num).toBe(expectation);
  },
});

describe('My Tests', () => {
  let num;

  describe('When num is 1', () => {
    num = 1;

    it('equals itself', () => {
      itBehavesLikeEquals(num).itself(num);
    });
  });

  describe('When num is 2', () => {
    num = 2;

    it('equals itself', () => {
      itBehavesLikeEquals(num).itself(num);
    });
  });
});
```

--------------------------------

### Usage Examples for Dialtone Query Core

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-query-core/README.md

Demonstrates how to import and use the search functions for components, tokens, utility classes, and icons. Includes examples for basic searches and token searches with HSL inclusion.

```typescript
import {
  searchComponents, searchTokens, searchUtilityClasses, searchIcons,
  components, tokens, utilityClasses, icons,
} from '@dialpad/dialtone-query-core';

// Search components
const { results, notes } = searchComponents('button', components);

// Search tokens (HSL decomposition tokens filtered by default)
const tokenResults = searchTokens('color foreground', tokens);

// Include HSL tokens
const allTokens = searchTokens('color foreground', tokens, { includeHsl: true });

// Search utility classes
const classResults = searchUtilityClasses('padding 8px', utilityClasses);

// Search icons
const iconResults = searchIcons('notification', icons);
```

--------------------------------

### Attempt to Add Package with NX (Not Recommended)

Source: https://github.com/dialpad/dialtone/blob/staging/README.md

Do not use NX to add packages; it is not supported and will not work. Always use PNPM for package management.

```bash
nx add eslint --filter dialtone-icons
```

--------------------------------

### Install Stylelint Plugin Dialtone

Source: https://github.com/dialpad/dialtone/blob/staging/packages/stylelint-plugin-dialtone/README.md

Install the Dialtone Stylelint plugin as a development dependency.

```sh
npm install -D @dialpad/stylelint-plugin-dialtone
```

--------------------------------

### Admin View / Listening In

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-vue/recipes/item_layout/contact_info/contact_info.mdx

This example shows how to display contact information for an admin view, including agent names and status, in the header and bottom slots.

```html
<dt-recipe-contact-info>
  <template #header>
    <dt-stack direction="row" align="center" class="d-mb2">
      <div class="d-fw-bold d-fs-200">
        Joseph Lumaban & Justin H.
      </div>
      <div class="d-fs-200">
        (Agent)
      </div>
    </dt-stack>
  </template>
  <template #subtitle>
    <dt-stack direction="row" align="center">
      <div class="d-fs-100 d-mt2">
        +1 (415) 123-4567
      </div>
      <dt-icon name="check" size="100"
        class="d-fc-tertiary d-icon--size-100 d-va-text-bottom"
      />
    </dt-stack>
  </template>
  <template #bottom>
    <dt-stack direction="row" align="center" class="d-mtn6">
      <div class="d-w8 d-h8 d-mr4 d-bgc-magenta-200">
        &nbsp;
      </div>
      <div class="d-fs-100 d-mr4">
        Aerolabs Support
      </div>
    </dt-stack>
  </template>
</dt-recipe-contact-info>
```

--------------------------------

### Install Dialtone ESLint Plugin

Source: https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/README.md

Install the Dialtone ESLint plugin as a development dependency.

```shell
npm install @dialpad/eslint-plugin-dialtone --save-dev
```

--------------------------------

### Component and Prop Lookup Example

Source: https://github.com/dialpad/dialtone/blob/staging/docs/prd/2026-05-07-eslint-deprecated-class-props.md

Demonstrates how to programmatically find a specific component and check for the existence of a particular prop using the Dialtone query core library.

```javascript
const components = dialtoneQueryCore.Component[]; // Assume this is populated
const inputComponent = components.find(c => c.displayName === 'DtInput');
const hasRootClassProp = inputComponent?.props?.some(p => p.name === 'rootClass');

if (hasRootClassProp) {
  console.log('DtInput has a rootClass prop.');
} else {
  console.log('DtInput does not have a rootClass prop.');
}
```

--------------------------------

### Install Project Dependencies with pnpm

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/guides/getting-started/index.md

Installs Gulp and all other project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Vue 2 Component Import Migration Examples

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/about/whats-new/posts/2024-4-15.md

Examples demonstrating the migration of previous import statements to new ones, including options for enabling tree shaking.

```html
<code>import { DtEmoji } from '@dialpad/dialtone/vue2/emoji'</code>
```

```html
<code>import { DtEmoji } from '@dialpad/dialtone/vue2'</code>
```

```html
<code>import { DtEmoji } from '@dialpad/dialtone/vue2/lib/emoji.js'</code>
```

```html
<code>import { DtMessageInput } from '@dialpad/dialtone/vue2/message_input'</code>
```

```html
<code>import { DtMessageInput } from '@dialpad/dialtone/vue2'</code>
```

```html
<code>import { DtMessageInput } from '@dialpad/dialtone/vue2/lib/message-input.js'</code>
```

```html
<code>import { DtTooltipDirective } from '@dialpad/dialtone/vue2/directives'</code>
```

```html
<code>import { DtTooltipDirective } from '@dialpad/dialtone/vue2'</code>
```

```html
<code>import { DtTooltipDirective } from '@dialpad/dialtone/vue2/lib/tooltip-directive.js'</code>
```

```html
<code>import SpotBlankSpace from '@dialpad/dialtone/dist/css/vue/spot/SpotBlankSpace'</code>
```

```html
<code>import SpotBlankSpace from '@dialpad/dialtone/css/vue/spot/SpotBlankSpace.vue';</code>
```

```html
<code>import { DtIcon } from '@dialpad/dialtone/vue2'</code>
```

```html
<code>import { DtIcon } from '@dialpad/dialtone/vue2/icon';</code>
```

```html
<code>import { DtIconAccessibility } from '@dialpad/dialtone-icons';</code>
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/dialpad/dialtone/blob/staging/packages/combinator/README.md

Install project dependencies using the pnpm package manager.

```bash
pnpm i
```

--------------------------------

### Responsive Visibility Examples

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/utilities/responsive/breakpoints.md

Demonstrates how to make elements visible on all screens or only on screens wider than specific breakpoints using Dialtone's responsive classes.

```html
<div>...</div>
<div class="d-d-none xl:d-d-block">...</div>
<div class="d-d-none lg:d-d-block">...</div>
<div class="d-d-none md:d-d-block">...</div>
<div class="d-d-none sm:d-d-block">...</div>
```

--------------------------------

### Install Latest Dialtone Main Branch

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/about/whats-new/posts/2023-8-3.md

Install the latest version of Dialtone from the main branch.

```cmd
npm install @dialpad/dialtone@latest
```

--------------------------------

### Icon Sizing Examples

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/design/icons/index.md

Demonstrates how to size icons based on the surrounding text context. Use the provided size values (200-700) for consistent visual hierarchy.

```vue
<p class="d-body--sm"><dt-icon name="food" size="200" /> 200 when body small</p>
<p class="d-body--md"><dt-icon name="food" size="300" /> 300 when body base</p>
<p class="d-headline--lg"><dt-icon name="food" size="400" /> 400 when headline large</p>
<p class="d-headline--xl"><dt-icon name="food" size="500" /> 500  when headline extra large</p>
<p class="d-fs-300-tv"><dt-icon name="food" size="600" /> 600 when device 300</p>
<p class="d-fs-400-tv"><dt-icon name="food" size="700" /> 700 when device 400</p>
```

--------------------------------

### CSS Input Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/postcss-responsive-variations/README.md

Shows the basic CSS structure before applying responsive variations.

```css
.foo {
  .background-color: red;
}
```

--------------------------------

### Basic Toast Example

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/components/toast.md

Demonstrates a basic toast component with a title.

```html
<example-toast show title="Title" class="d-ps-relative d-zi-base d-t0" :fixed="false" />
```

--------------------------------

### Flat JSON Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-docs/src/content/architecture/architecture-design-token-pipeline.md

Example of a flat JSON output format generated by Style Dictionary.

```json
{ "dtColorForegroundPrimary": "#1C1C1C" }
```

--------------------------------

### LESS Variables Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-docs/src/content/architecture/architecture-design-token-pipeline.md

Example of a LESS variable generated by the Style Dictionary build process.

```less
@dt-color-foreground-primary
```

--------------------------------

### Install Dialtone via NPM

Source: https://github.com/dialpad/dialtone/blob/staging/README.md

Install the combined Dialtone package and the i18n package using NPM.

```shell
npm install @dialpad/dialtone @dialpad/i18n
```

--------------------------------

### Token Reference System Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-docs/src/content/architecture/architecture-design-token-pipeline.md

Demonstrates how semantic tokens reference raw tokens using curly brace syntax. This allows for theme overrides and consistent application across components.

```json
// tokens/theme/dp/default.json
{
  "color": {
    "foreground": {
      "primary":  { "value": "{color.black.900}", "type": "color" },
      "secondary": { "value": "{color.black.700}", "type": "color" },
      "critical":  { "value": "{color.red.450}",   "type": "color" }
    }
  }
}
```

--------------------------------

### CSS Output Example with Breakpoints

Source: https://github.com/dialpad/dialtone/blob/staging/packages/postcss-responsive-variations/README.md

Demonstrates the generated CSS with responsive variations for different media query breakpoints.

```css
.foo {
  .background-color: red;
}

@media (min-width: 480px){
  .sm\:foo {
    .background-color: red;
  }
}

@media (min-width: 640px){
  .md\:foo {
    .background-color: red;
  }
}

@media (min-width: 980px){
  .lg\:foo {
    .background-color: red;
  }
}

@media (min-width: 1264px){
  .xl\:foo {
    .background-color: red;
  }
}
```

--------------------------------

### Android XML Color Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-docs/src/content/architecture/architecture-design-token-pipeline.md

Example of an Android XML color resource generated by Style Dictionary.

```xml
<color name="dtColorForegroundPrimary">
```

--------------------------------

### Applying Minimum Width with Size Tokens

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/design/size/index.md

This example demonstrates setting a minimum width for an element using a Size Token. It's useful for ensuring elements have a base size while still allowing them to grow.

```html
<style>
.box {
  min-width: var(--dt-size-720);
}
</style>
<div class="box">Box</div>
```

--------------------------------

### Base Notice Example

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/components/notice.md

This is a basic example of a notice component. It can optionally include a title for better context.

```html
<example-notice kind="base" title="Base title (optional)" />
```

--------------------------------

### Install Dialtone MCP Server (User-Scoped - Option A)

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/guides/mcp-server/index.md

Install the Dialtone MCP Server in a dedicated directory for user-scoped access, making it available across all your projects. This method involves creating a directory, installing the package, and then adding it to Claude Code.

```bash
# Install in a dedicated directory
mkdir -p ~/.mcp-servers
cd ~/.mcp-servers
npm install @dialpad/dialtone-mcp-server

# Add to Claude Code
claude mcp add dialtone --scope user dialtone-mcp-server
```

--------------------------------

### Check Project-Scoped MCP Server Installation

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/guides/mcp-server/index.md

Verify that the Dialtone MCP Server package is installed within your project.

```bash
npm list @dialpad/dialtone-mcp-server
```

--------------------------------

### Migration Example: Flex with Wrap and Gap

Source: https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/prefer-stack-over-flex.md

Demonstrates migrating a flex layout that includes wrapping and gap utilities (`d-fw-wrap`, `d-g8`) to the `<dt-stack>` component, retaining the wrap utility as a class.

```vue
<!-- Before -->

<div class="d-d-flex d-fw-wrap d-ai-center d-g8">
  <badge v-for="item in items" :key="item.id">{{ item.name }}</badge>
</div>
```

```vue
<!-- After -->

<dt-stack direction="row" align="center" gap="400" class="d-fw-wrap">
  <badge v-for="item in items" :key="item.id">{{ item.name }}</badge>
</dt-stack>
```

--------------------------------

### Vue Example: Applying Responsive Gap Styles

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/about/whats-new/posts/2025-5-6.md

Demonstrates how to apply different gap styles based on screen size using Dialtone's responsive variation classes.

```vue
// gap of 16 at screen widths large or greater, gap of 4 otherwise
<dt-stack direction="row" class="d-g4 lg:d-g16">

```

--------------------------------

### Install Dialtone Tokens via npm

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-tokens/README.md

Install the Dialtone Tokens package as a project dependency using npm.

```shell
npm install @dialpad/dialtone-tokens
```

--------------------------------

### Basic Icon Usage

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/components/icon.md

This is a basic example of how to use the icon component in your project.

```vue
<dt-icon-user-plus />
```

--------------------------------

### Vue Notice Component Examples

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/components/notice.md

Examples of using the Vue Notice component with different configurations. Demonstrates basic usage, info kind, and action slot.

```vue
<dt-notice
  title="Base title (optional)"
  important
>
  <span>
    Message body with
    <a
      href="#"
      class="d-link"
      :class="linkClass"
    >a link</a>.
  </span>
  <template #action>
    <dt-button
      size="sm"
      importance="outlined"
      kind="inverted"
      @click="onClick"
    >
      Action
    </dt-button>
  </template>
</dt-notice>
<dt-notice
  title="Info title (optional)"
  kind="info"
  important
>
  <span>
    Message body with
    <a
      href="#"
      class="d-link"
      :class="linkClass"
    >a link</a>.
  </span>
  <template #action>
    <dt-button
      size="sm"
      importance="outlined"
    >
      Action
    </dt-button>
  </template>
</dt-notice>
```

--------------------------------

### HTML Notice Examples

Source: https://github.com/dialpad/dialtone/blob/staging/apps/dialtone-documentation/docs/components/notice.md

Examples of how to implement notice components using HTML and CSS classes. These demonstrate different types of notices like success and warning, including optional titles, messages with links, and action buttons.

```html
<aside class="d-notice d-notice--success">
  <div aria-hidden="true" class="d-notice__icon">
    <span class="d-icon__wrapper">
      <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-400" style="display: none;">
        <div
          class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
          style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
        ></div>
      </div>
      <svg>...</svg>
    </span>
  </div>
  <div class="d-notice__content" role="status">
    <p class="d-notice__title">Success title (optional)</p>
    <p class="d-notice__message">
      <span> Message body with <a href="#" class="d-link d-link--muted">a link</a>. </span>
    </p>
  </div>
  <div class="d-notice__actions">
    <button type="button" class="base-button__button d-btn d-btn--outlined d-btn--muted d-btn--sm">
      <span class="d-btn__label base-button__label"> Action </span>
    </button>
    <button type="button" aria-label="Close" class="base-button__button d-btn d-btn--sm d-btn--circle d-btn--icon-only">
      <span class="base-button__icon d-btn__icon d-btn__icon--left">
        <span class="d-icon__wrapper">
          <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-200" style="display: none;">
            <div
              class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
              style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
            ></div>
          </div>
          <svg>...</svg>
        </span>
      </span>
    </button>
  </div>
</aside>
<aside class="d-notice d-notice--warning">
  <div aria-hidden="true" class="d-notice__icon">
    <span class="d-icon__wrapper">
      <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-400" style="display: none;">
        <div
          class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
          style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
        ></div>
      </div>
      <svg>...</svg>
    </span>
  </div>
  <div class="d-notice__content" role="status">
    <p class="d-notice__title">Warning title (optional)</p>
    <p class="d-notice__message">
      <span> Message body with <a href="#" class="d-link d-link--muted">a link</a>. </span>
    </p>
  </div>
  <div class="d-notice__actions">
    <button type="button" class="base-button__button d-btn d-btn--outlined d-btn--muted d-btn--sm">
      <span class="d-btn__label base-button__label"> Action </span>
    </button>
    <button type="button" aria-label="Close" class="base-button__button d-btn d-btn--sm d-btn--circle d-btn--icon-only">
      <span class="base-button__icon d-btn__icon d-btn__icon--left">
        <span class="d-icon__wrapper">
          <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-200" style="display: none;">
            <div
              class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
              style="animation-delay: 0ms; animation-duration: 1000ms; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
            ></div>
          </div>
          <svg>...</svg>
        </span>
      </span>
    </button>
  </div>
</aside>
```

--------------------------------

### iOS Swift Token Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-docs/src/content/architecture/architecture-design-token-pipeline.md

Example of an iOS Swift enum for Dialtone tokens generated by Style Dictionary.

```swift
enum DialtoneTokens { static let colorForegroundPrimary }
```

--------------------------------

### Go-to Node Example

Source: https://github.com/dialpad/dialtone/blob/staging/packages/dialtone-vue/recipes/cards/ivr_node/ivr_node.mdx

Configure a Go-to Node to navigate to another workflow or step. This is used for branching or linking different parts of the IVR.

```html
<dt-recipe-ivr-node
  :node-label="Go to"
  :node-type="goto"
  :drop-down-menu-items="items"
  :is-selected="false"
  :menu-button-label="'Node menu'">
  <p class="d-fw-bold">Go to</p>
  <p>Description</p>
</dt-recipe-ivr-node>
```