Components / Conversation

Suggestion

Conversation starters and follow-ups in a scrollable row.

Pick a starter; the row scrolls sideways on narrow screens.
pnpm exec shadcn add @intelligo/ai-suggestion

Inside an app made by intelligo create, or any shadcn project that names the registry.

built on

button

used by these pages

Chat

more in conversation

Prompt input, Branch, Speech input, Composer menu, Message bubble, Message scroller, Message, Streaming response

Source

What shadcn add writes to components/ui/ai-suggestion.tsx. It is yours from then on.

"use client";

import * as React from "react";

import { Button } from "@showcase/components/ui/button";
import { ScrollArea, ScrollBar } from "@showcase/components/ui/scroll-area";
import { cn } from "@showcase/lib/utils";

function Suggestions({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ScrollArea>) {
  return (
    <ScrollArea
      data-slot="suggestions"
      className="w-full whitespace-nowrap"
      {...props}
    >
      <div
        className={cn("flex w-max flex-nowrap items-center gap-2", className)}
      >
        {children}
      </div>
      <ScrollBar className="hidden" orientation="horizontal" />
    </ScrollArea>
  );
}

function Suggestion({
  suggestion,
  onClick,
  className,
  variant = "outline",
  size = "sm",
  children,
  ...props
}: Omit<React.ComponentProps<typeof Button>, "onClick"> & {
  suggestion: string;
  onClick?: (suggestion: string) => void;
}) {
  return (
    <Button
      data-slot="suggestion"
      className={cn("rounded-full px-4", className)}
      onClick={() => onClick?.(suggestion)}
      size={size}
      type="button"
      variant={variant}
      {...props}
    >
      {children || suggestion}
    </Button>
  );
}

export { Suggestions, Suggestion };

Ready to try it? Three commands and the app runs against a stub model.

GitHubDocsGet started