Glow composer

AI prompt composer with a glowing blue base.

Usage

import { GlowComposer } from '@/components/ui/composer-glow'


<GlowComposer onSubmit={(prompt, { modelId }) => console.log(prompt, modelId)} />


// Your own models and keycaps
import { GlowComposer, GlowComposerKey } from '@/components/ui/composer-glow'


<GlowComposer
  placeholder="Describe the page you want…"
  models={[
    { id: 'fast', name: 'Harbor Fast', description: 'Quick answers for everyday work' },
    { id: 'deep', name: 'Harbor Deep', description: 'Slower, more careful reasoning' },
  ]}
  defaultModelId="deep"
  onModelChange={(id) => track('model', id)}
  onAttach={() => fileInput.current?.click()}
  leftActions={<GlowComposerKey onClick={openTemplates}>Templates</GlowComposerKey>}
  onSubmit={(prompt, { modelId }) => createProject({ prompt, modelId })}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/composer-glow

npx shadcn@latest add @pastaui-pro/composer-glow

yarn dlx shadcn@latest add @pastaui-pro/composer-glow

bunx --bun shadcn@latest add @pastaui-pro/composer-glow

Source

Props

Glow composer props
Prop	Type	Default	Description
onSubmit	(value: string, options: { modelId?: string }) => void	= —	Called on Enter or the send key when the text is not empty. Shift+Enter inserts a new line and Enter does nothing during IME composition.
placeholder	string	= 'Ask Pasta UI to build a section…'	Placeholder text.
label	string	= 'Message'	Accessible label for the text field.
value / defaultValue / onValueChange	string / string / (value: string) => void	= — / '' / —	Controlled or uncontrolled text.
clearOnSubmit	boolean	= true	Clear the text after submitting.
models	{ id: string; name: string; description?: string; logo?: ReactNode }[]	= Claude Opus 5.5, GPT-6 Sol, Gemini 3.8 Flash (with logos)	Options for the model selector, each shown with its one-line description. Pass [] to hide the selector.
defaultModelId	string	= First model	Model selected on mount.
onModelChange	(modelId: string) => void	= —	Called when a model is picked from the menu.
onAttach	() => void	= —	Called by the paperclip keycap (Add attachment).
leftActions / rightActions	ReactNode	= —	Extra controls after the model selector or before the send key. Use GlowComposerKey for matching keycaps.
disabled	boolean	= false	Disables the field and every control.
textareaRef	Ref<HTMLTextAreaElement>	= —	Ref to the text field.
className	string	= —	Additional classes for the card. Add dark or light to force a theme.