AI agents
Prompt input
A chat input that grows with the text, takes files, and turns into a stop button while the agent writes.
prompt-input
Manniche UI · open source
Components for agents, with calm motion.
React components for interfaces where an AI agent does the work, and small effects that stay quiet. You own the code: shadcn copies it into your project.
- MIT licence
- React 19 and Tailwind 4
- Respects reduced motion
Get started
Add one component directly, or add the registry to components.json and use short names.
npx shadcn@latest add https://mikkelmanniche.dk/lab/r/prompt-input.jsonAdd the registry
{
"registries": {
"@manniche": "https://mikkelmanniche.dk/lab/r/{name}.json"
}
}AI agents 9
AI agents
Tool approval
Asks the person before the agent runs a tool, with the arguments in full and a clear mark on risky calls.
tool-approval
AI agents
Agent activity
The agent's steps as a list: waiting, running, done or failed, with timings.
agent-activity
AI agents
Streaming response
Shows a reply as it is written. New words fade in and a caret marks the end.
streaming-response
AI agents
Reasoning
The model's thinking, folded away. Open while it thinks, closed when the answer starts.
reasoning
AI agents
Code block
Code with a file name and a copy button. Bring your own highlighting, or none.
code-block
AI agents
Sources
Numbered citations after a claim and the list of sources they point to.
sources
AI agents
File diff
A change to one file as a coding agent proposes it, from a unified diff.
file-diff
AI agents
AI action bar
A toolbar that morphs into a one-line prompt for the agent, and back.
ai-action-bar
Motion 6
Motion
Number ticker
Counts up to a number when it scrolls into view. Screen readers hear only the final number.
number-ticker
Motion
Blur fade
Fades an element up out of a soft blur the first time it enters the view.
blur-fade
Motion
Highlighter
A marker stroke draws behind a phrase the first time it scrolls into view.
highlighter
Motion
Text reveal
Words go from faint to full as the reader scrolls through a paragraph.
text-reveal
Motion
Marquee
Items scroll sideways in an endless loop and pause on hover or focus. Static under reduced motion.
marquee
Motion
Rolling number
A number whose changed digits roll up or down, read once by screen readers.
rolling-number
Surfaces 3
Surfaces
Spotlight card
A card with a soft light that follows the mouse pointer.
spotlight-card
Surfaces
Dot pattern
A quiet dot grid behind content, drawn with CSS only.
dot-pattern
Surfaces
Shimmer button
A primary button with a slow sheen, and an optional lean towards the pointer.
shimmer-button
Overlays 3
Overlays
Toast
Short messages that stack in a corner and leave on their own. Call toast() from anywhere.
toast
Overlays
Command palette
A searchable list of commands in a modal, opened with Cmd+K. Built on the native dialog.
command-palette
Overlays
Sheet
A panel that slides up from the bottom and can be dragged down to close.
sheet
Controls 7
Controls
Stepper
A plus and minus counter with rolling digits that also works with the arrow keys.
stepper
Controls
Switch
An on and off switch whose knob stretches when pressed and springs across.
switch
Controls
Copy button
Copies a value, and the icon and label roll over to say it worked, or that the browser said no.
copy-button
Controls
Timed undo
A delete button that counts down a few seconds and can be undone before anything happens.
timed-undo
Controls
Hold to confirm
A button for actions that must not happen by accident: it fills while held and fires when full.
hold-to-confirm
Controls
Tag picker
Pick tags from a pool, and each one flies into the box and back out when removed.
tag-picker
Controls
Signature pad
Draw a signature with mouse, finger or pen, or type it, and get a sharp PNG back.
signature-pad
Navigation 2
Navigation
Continuous tabs
Tabs where a pill slides to the one you pick, with arrow keys like a proper tab list.
continuous-tabs
Navigation
Pagination
Previous and next with a page number that rolls digit by digit.
pagination
Widgets 3
Widgets
Onboarding checklist
A collapsible getting-started card with a progress meter and the next step marked.
onboarding-checklist
Widgets
Event reminders
Set when and how people are reminded of an event, by notification or email.
event-reminders
Widgets
Opening hours
Opening hours or availability per weekday, with more than one range a day.
opening-hours
Hooks 1
Hooks
useReducedMotion
True when the visitor has asked the system for less motion.
use-reduced-motion