AI-agenter
Prompt input
Et chatfelt, der vokser med teksten, tager imod filer og bliver til en stopknap, mens agenten skriver.
prompt-input
Manniche UI · open source
Komponenter til agenter, med ro i bevægelsen.
React-komponenter til grænseflader, hvor en AI-agent arbejder, og små effekter, der ikke larmer. Du ejer koden: den kopieres ind i dit projekt med shadcn.
- MIT-licens
- React 19 og Tailwind 4
- Respekterer reduceret bevægelse
Kom i gang
Hent én komponent direkte, eller tilføj registret i components.json og brug korte navne.
npx shadcn@latest add https://mikkelmanniche.dk/lab/r/prompt-input.jsonTilføj registret
{
"registries": {
"@manniche": "https://mikkelmanniche.dk/lab/r/{name}.json"
}
}AI-agenter 9
AI-agenter
Tool approval
Spørger personen, før agenten kører et værktøj, viser argumenterne i fuld længde og markerer risikable kald tydeligt.
tool-approval
AI-agenter
Agent activity
Agentens trin som en liste: venter, kører, færdig eller fejlet, med tider.
agent-activity
AI-agenter
Streaming response
Viser et svar, mens det bliver skrevet. Nye ord toner frem, og en markør viser, hvor teksten slutter.
streaming-response
AI-agenter
Reasoning
Modellens tænkning, foldet sammen. Åben mens den tænker, lukket når svaret begynder.
reasoning
AI-agenter
Code block
Kode med filnavn og kopiknap. Tag din egen syntaksfarvning med, eller lad være.
code-block
AI-agenter
Sources
Nummererede kildehenvisninger efter en påstand og listen over de kilder, de peger på.
sources
AI-agenter
File diff
En ændring i én fil, som en kodeagent foreslår den, ud fra en unified diff.
file-diff
AI-agenter
AI action bar
En værktøjslinje, der folder sig ud til en prompt på én linje til agenten, og tilbage igen.
ai-action-bar
Bevægelse 6
Bevægelse
Number ticker
Tæller op til et tal, når det kommer ind i billedet. Skærmlæsere hører kun det endelige tal.
number-ticker
Bevægelse
Blur fade
Toner et element frem ud af en blød sløring, første gang det kommer ind i billedet.
blur-fade
Bevægelse
Highlighter
Et overstregerstrøg tegnes bag en frase, første gang den kommer ind i billedet.
highlighter
Bevægelse
Text reveal
Ordene går fra svage til fulde, mens læseren scroller gennem et afsnit.
text-reveal
Bevægelse
Marquee
Elementer, der glider sidelæns i en uendelig løkke og stopper ved hover eller fokus. Står stille ved reduceret bevægelse.
marquee
Bevægelse
Rolling number
Et tal, hvor de cifre, der ændrer sig, ruller op eller ned. Skærmlæsere hører hele tallet én gang.
rolling-number
Flader 3
Flader
Spotlight card
Et kort med et blødt lys, der følger musen.
spotlight-card
Flader
Dot pattern
Et stille prikmønster bag indholdet, tegnet med ren CSS.
dot-pattern
Flader
Shimmer button
En primærknap med en langsom glans og en valgfri hældning mod musen.
shimmer-button
Lag og beskeder 3
Lag og beskeder
Toast
Korte beskeder, der stables i et hjørne og forsvinder af sig selv. Kald toast() hvor som helst fra.
toast
Lag og beskeder
Command palette
En søgbar liste af kommandoer i et modalvindue, åbnet med Cmd+K. Bygget på det indbyggede dialog-element.
command-palette
Lag og beskeder
Sheet
Et panel, der glider op fra bunden og kan trækkes ned for at lukke.
sheet
Kontroller 7
Kontroller
Stepper
En tæller med plus og minus og rullende cifre, som også virker med piletasterne.
stepper
Kontroller
Switch
En tænd/sluk-kontakt, hvor knappen strækker sig, når man trykker, og glider over.
switch
Kontroller
Copy button
Kopierer en værdi, og ikon og tekst ruller om for at sige, at det virkede, eller at browseren sagde nej.
copy-button
Kontroller
Timed undo
En sletteknap, der tæller et par sekunder ned og kan fortrydes, før noget sker.
timed-undo
Kontroller
Hold to confirm
En knap til handlinger, der ikke må ske ved et uheld: den fyldes, mens man holder, og udløses, når den er fuld.
hold-to-confirm
Kontroller
Tag picker
Vælg tags fra en pulje. Hvert tag flyver op i feltet og tilbage, når det fjernes.
tag-picker
Kontroller
Signature pad
Tegn en underskrift med mus, finger eller pen, eller skriv den, og få en skarp PNG tilbage.
signature-pad
Navigation 2
Navigation
Continuous tabs
Faner, hvor en pille glider hen til den, man vælger, med piletaster som en rigtig faneliste.
continuous-tabs
Navigation
Pagination
Forrige og næste med et sidetal, der ruller ciffer for ciffer.
pagination
Widgets 3
Widgets
Onboarding checklist
Et sammenfoldeligt kom-i-gang-kort med fremdriftsmåler, hvor næste trin er markeret.
onboarding-checklist
Widgets
Event reminders
Vælg, hvornår og hvordan folk bliver mindet om en begivenhed, med notifikation eller e-mail.
event-reminders
Widgets
Opening hours
Åbningstider eller tilgængelighed pr. ugedag, med flere tidsrum samme dag.
opening-hours
Hooks 1
Hooks
useReducedMotion
Sand, når den besøgende har bedt systemet om mindre bevægelse.
use-reduced-motion