Search Dialtone APIs and documentation from the command line.
The Dialtone CLI searches components, design tokens, CSS utility classes, icons, and documentation from your terminal. Run it from your project to use available installed package data. Missing data falls back to the CLI's bundled data; documentation always uses bundled content. Check the source line to see which data each lookup uses.
Use the CLI for direct lookups, shell scripts, and compact context for coding agents. Use the Dialtone MCP Server when you want an AI assistant to search Dialtone through Model Context Protocol (MCP) tools.
Install the CLI globally:
npm install -g @dialpad/dialtone-cli
Confirm the installation:
dialtone --help
Run CLI commands from your project. The CLI prints one line on stderr naming the Dialtone data it uses:
Using local Dialtone data: @dialpad/dialtone@10.4.0 (icons: @dialpad/dialtone-icons@5.2.0, docs: bundled)
Without local Dialtone data, the line reads Using bundled Dialtone data (@dialpad/dialtone-cli@<version>).
Search across Dialtone when you do not know which command to use:
dialtone search "button"
Then narrow the lookup to the relevant part of the system:
dialtone component button --props --describe
dialtone token "color foreground primary"
dialtone utility "padding 8px"
dialtone docs "how to choose button importance"
Add --format json when a script or coding agent needs structured output:
dialtone component button --format json
| Command | Use it to |
|---|---|
dialtone search <query> | Search components, documentation, tokens, utility classes, and icons. |
dialtone component <name> | Read props, events, slots, and qualified import hints. |
dialtone token [query] | Find design tokens by query or --name and inspect theme values. |
dialtone utility <query> | Find CSS utility classes by property or value. |
dialtone docs <query> | Search usage guidance, recipes, accessibility guidance, and patterns. |
dialtone prompt <name> | Generate compact component context for a coding agent. |
Run dialtone <command> --help to see every option for a command.
Use search for broad discovery. Results are grouped across all available Dialtone data, including icons and documentation.
dialtone search "button"
dialtone search "padding 8px"
dialtone search "notification"
Component and documentation discovery reuse curated page keywords. Try familiar interaction terms, then inspect a returned canonical component:
dialtone search "spinner"
dialtone docs "text-field"
dialtone component DtLoader
spinner leads with DtLoader; blank slate finds DtEmptyState; text field, text-field, and textbox find DtInput; autocomplete and typeahead find the supported Combobox candidates. notification presents DtBanner, DtNotice, and DtToast as distinct choices. Canonical component name and family matches keep their existing priority, followed by curated keywords and incidental API matches. Documentation ranks exact titles before keywords and incidental prose.
Keywords are discovery terms. dialtone component spinner still exits with no selected component; component switch rejects the name and suggests DtToggle. Use the canonical result for API lookup.
Separate terms with | to search for any of them:
dialtone search "input|select|menu"
The CLI returns 20 results by default. Set a different limit, or use --limit 0 to return all matches:
dialtone search "button" --limit 5
dialtone search "button" --limit 0
The CLI does not have a separate icon command. Search by an icon's name, category, or keyword instead:
dialtone search "calendar" --format json
Broad searches share the 20-result limit across all result types. Include later icon matches with --limit 0; icon records in JSON have type: "icon":
dialtone search "notification" --limit 0 --format json
Use component to inspect a component's public API. The name must match exactly, ignoring case, separators, and the Dt prefix, so button, dt-button, and DtButton all work. Other names exit with an error, listing close matches when available. A deprecated component still works by its full name, with a note naming its replacement.
Directive identifiers such as v-dt-tooltip or DtTooltipDirective are not component names and return no component match. Use docs for their imports, registration and behavior.
dialtone component button
dialtone component DtModal
Filter the output when you only need one part of the API:
dialtone component button --props
dialtone component button --props --describe
dialtone component button --prop kind
dialtone component button --events
dialtone component button --slots
dialtone component button --examples
--prop returns the prop type, description, and accepted values. If the prop does not exist, the CLI lists the available prop names.
--examples currently returns an import hint when a public export route is verified, followed by a minimal component tag. It does not supply a complete working example with required props, slots, state, or application setup. With --format json, it returns component metadata rather than example code.
Use token to search by a token name, category, semantic purpose, or value:
dialtone token "color foreground primary"
dialtone token "spacing 400"
Use --name for a canonical CSS token identifier that begins with --. It takes precedence when both a name and a positional query are supplied:
dialtone token --name=--dt-spacing-100 --values
An exact legacy name remains available for migration inspection. The CLI reports its deprecation reason and qualified alternatives on stderr; add --values --format json to include metadata and theme values in JSON:
dialtone token --name=--dt-space-400 --values --format json
Use --values to show theme values for the first match:
dialtone token "color foreground primary" --values
HSL decomposition tokens are excluded by default. Include them with --all:
dialtone token "color foreground" --all
Use utility to search by a CSS property, value, or both:
dialtone utility "padding 8px"
dialtone utility "display flex"
dialtone utility "margin auto"
Search results include the class name and its CSS declaration. General searches filter deprecated utilities; exact legacy names retain their contract and migration metadata in JSON output.
Use docs for questions about how or why to use Dialtone. It searches public guidance, component usage, accessibility guidance, and migration documentation.
dialtone docs "how to choose button importance"
dialtone docs "accessible tooltip labels"
dialtone docs "migrate physical properties to logical properties"
dialtone docs "v-dt-tooltip"
Documentation is bundled with the CLI rather than resolved from your project's installed Dialtone packages. Update the CLI to refresh this content.
Readable results from dialtone docs contain excerpts. dialtone docs "v-dt-tooltip" --format json returns the complete available documentation records, which can include directive code snippets. A complete record can still omit component examples or page-level scripts; neither format establishes that a snippet runs in your application.
Use prompt to produce a compact component summary with its props, slots, and events. It includes an import hint only when the CLI can verify a public export route for the component:
dialtone prompt button
Internal components show Import unavailable instead of an import. If the CLI cannot verify the installed package's exports, it shows Import unverified and advises upgrading component metadata or checking those exports. JSON output uses import: null when no verified route is available.
Copy the result to your clipboard on macOS:
dialtone prompt modal | pbcopy
Use JSON when the receiving tool needs structured data:
dialtone prompt tooltip --format json
Every command accepts --format:
| Format | Output | Use it for |
|---|---|---|
minimal | Compact plain text. This is the default. | Terminal lookups and copying small results. |
markdown | Markdown-formatted text. | Documentation and text-based prompts. |
json | Structured JSON. | Scripts, editor tooling, and coding agents. |
For programmatic use, prefer --format json instead of parsing the default terminal output.
The CLI looks for installed packages the way Node does, in the node_modules folders in and above the directory you run it from:
package.json at or above your directory, up to the repository root, depends on @dialpad/dialtone, the CLI uses that package's component, token, and utility data, and the icons package it depends on.@dialpad/dialtone-vue, @dialpad/dialtone-css, and @dialpad/dialtone-icons packages, and fills any gaps from an installed @dialpad/dialtone.@dialpad/dialtone-cli. Documentation search always uses bundled content.The source line lists any data that came from somewhere other than the main package. If package.json declares a caret, tilde, or exact version of @dialpad/dialtone (such as ^10.0.0) and the installed copy has a different major version, the CLI prints a warning. If package.json declares @dialpad/dialtone but the CLI can't find an installed copy, it warns and uses bundled data. Yarn Plug'n'Play installs have no node_modules, so the CLI uses bundled data there.
Import hints in component and prompt output appear only for verified public exports. Installed @dialpad/dialtone data uses its verified @dialpad/dialtone/vue route, or @dialpad/dialtone/vue3 for versions before 9.173 that expose that route. Installed @dialpad/dialtone-vue data and bundled component data use verified routes from @dialpad/dialtone-vue.
Curated component keywords also come from bundled documentation and join only to public components present in the selected component data. They are latest documentation references, not proof of installed API availability or behavior. An older or unverified component dataset can lack these associations.
Bundled import hints are verified against the bundled Vue source version. They do not establish that @dialpad/dialtone-vue is installed at that version or that the import is compatible with your project's dependencies.
Export verification checks the stated package entry. It does not establish that peer dependencies, application setup, or runtime behavior are correct. Validate code against your installed packages before using it.
Use --bundled when you want to ignore installed packages and query the CLI's bundled data:
dialtone --bundled search "button"
The CLI and MCP server use the same Dialtone search engine. Choose the interface that fits the task.
| Task | Recommended interface |
|---|---|
| Check the Dialtone version installed in a project | CLI |
| Look up a prop, token, utility class, or icon from a terminal | CLI |
| Use Dialtone data in a shell script | CLI with --format json |
| Add compact component context to a coding prompt | CLI with prompt |
| Let an MCP-compatible AI client choose and run searches | MCP Server |
You can install both. The CLI handles explicit terminal queries; the MCP server lets an AI client call Dialtone search tools directly.
The CLI checks npm for a newer version in the background, and gives up after 3 seconds. Update it globally when an update is available:
npm install -g @dialpad/dialtone-cli@latest
Updating refreshes bundled documentation, discovery keywords, and the fallback data used outside a Dialtone project. Docs-only keyword edits can reach the site before the CLI: release commit selection watches CLI and query-core changes, so maintainers must explicitly arrange a CLI publication through the existing release process. Source merge and local builds do not update installed tools.
Install the package globally, then restart your terminal so it can resolve the dialtone executable:
npm install -g @dialpad/dialtone-cli
Run the command from inside the project. The source line names the package and version each kind of data came from; bundled means the CLI couldn't find installed data for it. A version warning means the installed packages don't match package.json; reinstall dependencies.
Start with fewer keywords, then narrow the query. Use | when any of several terms is acceptable:
dialtone search "input|select|menu"
Use the focused component, token, utility, or docs command once you know which type of result you need.
Set DIALTONE_DEBUG=1 to print the search engine's debug output to stderr, including the parsed query and how many results each step matched:
DIALTONE_DEBUG=1 dialtone component stack --prop gap
Dialtone CLI documentation last updated Tuesday, October 20, 2026