suggested-prompts

Scrollable prompt chips for AI conversations.

Source code

No interactive demo is registered for this component yet — the source is shown directly.

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

function SuggestedPrompts({
  className,
  prompts,
  onSelect,
  ...props
}: React.ComponentProps<"div"> & {
  prompts: string[]
  onSelect?: (prompt: string) => void
}) {
  return (
    <div
      data-slot="suggested-prompts" data-portal="https://design.nyuchi.com/components/suggested-prompts" role="group" aria-label="Suggested prompts"
      className={cn("scrollbar-none flex gap-2 overflow-x-auto pb-1", className)}
      {...props}
    >
      {prompts.map((prompt) => (
        <button
          key={prompt}
          onClick={() => onSelect?.(prompt)}
          className="inline-flex shrink-0 items-center rounded-full border border-border bg-input/30 px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-input/50 hover:text-foreground"
        >
          {prompt}
        </button>
      ))}
    </div>
  )
}

export { SuggestedPrompts }

Variants & props

The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.

API tester

Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.

GET/api/v1/ui/suggested-prompts

Install

npx shadcn@latest add https://mzizi.dev/api/v1/ui/suggested-prompts

Source path

components/ui/suggested-prompts.tsx