Prompt Studio

Pro

A generation-focused prompt bar — mode, quality, and aspect-ratio pills each open a small dropdown that grows from its own corner, a two-line model picker shows a checkmark on the current selection, and the send button swaps to a stop icon while 'generating'.

pnpm dlx shadcn@latest add @ditherui/prompt-studio

Props

PropTypeDefault

Mode / Quality / Ratio pills

each opens a small corner-grow dropdown (Image/Video, 4K/2K/1080p, 16:9/1:1/9:16/4:3); the chevron flips 180° while open

—

Model pilltwo-line dropdown (name + hint) with a checkmark on the selected model, same corner-grow motion—

Attachopens the native file picker—

Send / stopanimated icon swap between the two states; simulates a brief generating run—

valuestring—

defaultValuestring""

onValueChange(value: string) => void—

modelstring—

defaultModelstringsecond model

onModelChange(model: string) => void—

onSend(text: string) => void—

className / ...div propsReact.ComponentProps<"div">—

When to use the prompt input

Use it as the composer for an AI chat. Variants include a layered composer with attachments and toggles, a card-style composer with a Private mode, and a generation-focused prompt bar.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components

TSformat-price.ts+1-1

export function formatPrice(cents: number) {
  return `$${(cents / 100).toFixed(2)}`
  return fmt.format(cents / 100)
}

Inline DiffInline additions and removals so users can review what an agent changed.