2 variants

Prompt Composer

The box a run starts from. Text that grows as you type, slash commands on the keyboard, attachment chips, and one button that is Send or Stop but never both.

Prompt composer

The box a run starts from. Text that grows as you type, slash commands on the keyboard, attachment chips, and one button that is Send or Stop but never both.

usage-report.csv24 KB

Sonnet 4.60/2000

Enter to send, Shift + Enter for a new line

usage.tsx

import { PromptComposer } from "@/components/registry/prompt-composer";

export function Composer() {
  return (
    <PromptComposer
      model="Sonnet 4.6"
      commands={[
        { name: "explain", description: "Walk through the selection" },
        { name: "test", description: "Write tests for what changed" },
      ]}
      onSubmit={(text) => send(text)}
      onStop={() => abort()}
    />
  );
}

"use client";

import { ArrowUp, Paperclip, Square, X } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type KeyboardEvent, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface PromptCommand {
  /** Written without the slash. Typing `/rev` matches `review`. */
  name: string;
  /** One line describing what the command does, shown beside the name. */

299 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/prompt-composer

Prompt bar

A single line pill for a landing page or an empty chat, with starting suggestions that fill the bar for editing instead of sending.

usage.tsx

import { PromptBar } from "@/components/registry/prompt-bar";

export function Ask() {
  return (
    <PromptBar
      suggestions={["A pricing page", "A changelog"]}
      onSubmit={(prompt) => startRun(prompt)}
    />
  );
}

"use client";

import { ArrowUp } from "lucide-react";
import { type FormEvent, useId, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface PromptBarProps {
  placeholder?: string;
  /** One-tap starting points under the bar. Picking one fills the bar rather than sending it. */
  suggestions?: string[];
  onSubmit?: (prompt: string) => void;
  /** Disables the bar while an answer is on its way. */

101 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/prompt-bar