← All components
Interaction / component
Prompt Bar
An agent composer with source mentions, slash commands, model selection, effort control and reactive sparks.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Complete React Bits composer: keyboard source/command menus, attachment chips, model choices, effort slider, animated selection glow, particle field and arrow-to-stop morph.
- Demo sends locally, attaches a sample filename and inserts a sample dictated phrase. The Stop button ends the local busy state. No AI provider, upload or microphone service is called.
- Use PromptBar.tsx callbacks to connect real services. defaultModel/defaultEffort are initialization props; changing initial effort in the playground intentionally resets the demo. Other controls preserve your draft. Enter submits, Shift+Enter inserts a line, Escape dismisses, and IME composition does not submit or select.
- Pause preserves interaction state. Replay deliberately restarts the demo. Reduced motion removes decorative loops; background and offscreen work is suspended.
- Full portable source, styles and notices are included; import the primitive for your own product context.
React 19.2Modern browsers
React Bits — David Haz · MIT + Commons Clause; reuse separately authorized. Exact notice bundled.
Hugeicons · MIT; installed packages include their notices.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
background | string | #27272a | Surface; see primitive interface for full options. |
sparkColor | string | #b39dff | Sparks; see primitive interface for full options. |
width | number | 460 | Width; see primitive interface for full options. |
radius | number | 16 | Radius; see primitive interface for full options. |
sparkBoost | number | 1 | Spark response; see primitive interface for full options. |
defaultEffort | string | Max | Initial effort; see primitive interface for full options. |
paused | boolean | false | Freeze decorative work without clearing input or current state. |
replayToken | number | 0 | Demo-only replay key: changing it starts a fresh local interaction. |