# antuikit / Suggestion

> Suggestion, a menu of commands that opens from a chat input. Adds nothing beyond `className` merging through `cn()`. Its submenu arrow comes from the icon pack through `AntuikitProvider`.

Docs: https://antuikit.com/docs/components/suggestion

## Install

npx antuikit@latest init
npx antuikit@latest add suggestion

## Import

import { Suggestion } from "@/components/ui/suggestion";

## Demos

- [Basic](https://ui.antuikit.com/embed/suggestion/basic.md): Render the input from `children` and call `onTrigger` to open the menu, here when the reader types a slash.
- [Nested](https://ui.antuikit.com/embed/suggestion/nested.md): Give an item `children` to open a second column from it, and read the chosen value in `onSelect`.
- [Block](https://ui.antuikit.com/embed/suggestion/block.md): Set `block` to make the menu as wide as the input below it.
- [Filtered items](https://ui.antuikit.com/embed/suggestion/dynamic.md): Pass `items` a function and hand `onTrigger` the typed text, so the menu narrows as the reader types.
- [Long list](https://ui.antuikit.com/embed/suggestion/long-list.md): A menu with more items than fit scrolls inside its own height, and the arrow keys still move through every item.
- [AI writing panel](https://ui.antuikit.com/embed/suggestion/doc-ai-panel.md): A document editor with an AI input below the draft, where a slash opens commands to rewrite, shorten or change the tone.
- [Team mentions](https://ui.antuikit.com/embed/suggestion/team-mentions.md): A team chat channel where typing @ in the message box opens a list of teammates with their photo and team.
- [Command palette](https://ui.antuikit.com/embed/suggestion/command-palette.md): A command palette with a search field that lists actions and their shortcut keys, narrowing as the user types.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/suggestion`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Suggestion` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.