Suggestions

A wrapping or horizontally scrollable collection of prompt buttons with subtle outlines and 4px corners.

Preview

Select a suggested prompt.

In action

Choose a prompt

Select a suggested prompt.

When to use

Use it for

  • Offer short suggested prompts using value and onSelect. Display text may be shorter than the submitted value.
  • The collection scrolls horizontally by default; wrap places buttons on multiple lines.

Avoid

  • Making suggestions look like completed or submitted messages.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { MessageComposer, Suggestions, Suggestion, type ComposedMessage } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/suggestions.

Copy the source

npx @noorddev/vlak-cli add suggestions

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/suggestions.json

Installs the same source through the shadcn CLI.

React

"use client";
import { useState } from "react";
import { MessageComposer, Suggestions, Suggestion, type ComposedMessage } from "@noorddev/vlak-react";

export function SuggestedPrompts({ onSend }: { onSend: (message: ComposedMessage) => void | Promise<void> }) {
  const [draft, setDraft] = useState("");
  return <>
    <Suggestions wrap>
      <Suggestion value="Review the launch brief" onSelect={setDraft}>Review brief</Suggestion>
      <Suggestion value="Find missing owners" onSelect={setDraft} />
    </Suggestions>
    <MessageComposer compact value={draft} onValueChange={setDraft} onSend={onSend} />
  </>;
}

See the integration example to compose these components with your application's model and data.

Props

Suggestion

PropTypeDefaultDescription
variant"primary" | "ghost" | "subtle"Solid ink primary, hairline ghost, or borderless subtle. One primary per view.
size"default" | "sm" | "icon"Icon buttons stay square at every breakpoint. Supply an accessible name.
groupedbooleanFlush into a ButtonGroup: no own stroke, one ink seam.
valuerequiredstring
onSelect(value: string) => void

Also accepts ButtonHTMLAttributes<HTMLButtonElement>.

The ref reaches HTMLButtonElement.

Suggestions

PropTypeDefaultDescription
wrapbooleanfalse

Also accepts HTMLAttributes<HTMLDivElement>.

The ref reaches HTMLDivElement.

Keyboard

KeysDoes
TabMoves through the supplied native controls in reading order
Enter, SpaceActivates focused buttons and disclosure summaries

Accessibility

  • Native attributes, className, style, and the forwarded ref reach the outer element.
  • Interactive content requires accessible names; progress text is not announced for every streamed token.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak
import "@noorddev/vlak/css";
<div class="rs-suggestions" role="group" aria-label="Suggested prompts"><button class="rs-suggestions-item rs-btn-ghost" type="button">Review the brief</button></div>

Classes

.rs-suggestions.rs-suggestions-wrap.rs-suggestions-item

Depends on

Button

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas