KI-Agenten
Prompt input
Ein Chatfeld, das mit dem Text wächst, Dateien annimmt und zur Stopp-Taste wird, während der Agent schreibt.
prompt-input
Manniche UI · Open Source
Komponenten für Agenten, mit ruhiger Bewegung.
React-Komponenten für Oberflächen, in denen ein KI-Agent arbeitet, und kleine Effekte, die leise bleiben. Der Code gehört dir: shadcn kopiert ihn in dein Projekt.
- MIT-Lizenz
- React 19 und Tailwind 4
- Beachtet reduzierte Bewegung
Loslegen
Eine Komponente direkt hinzufügen, oder die Registry in components.json eintragen und kurze Namen verwenden.
npx shadcn@latest add https://mikkelmanniche.dk/lab/r/prompt-input.jsonRegistry eintragen
{
"registries": {
"@manniche": "https://mikkelmanniche.dk/lab/r/{name}.json"
}
}KI-Agenten 9
KI-Agenten
Tool approval
Fragt nach, bevor der Agent ein Werkzeug ausführt, zeigt die Argumente vollständig und markiert riskante Aufrufe deutlich.
tool-approval
KI-Agenten
Agent activity
Die Schritte des Agenten als Liste: wartend, läuft, fertig oder fehlgeschlagen, mit Zeiten.
agent-activity
KI-Agenten
Streaming response
Zeigt eine Antwort, während sie geschrieben wird. Neue Wörter blenden ein, und ein Cursor markiert das Ende.
streaming-response
KI-Agenten
Reasoning
Das Denken des Modells, eingeklappt. Offen, solange es denkt, geschlossen, sobald die Antwort beginnt.
reasoning
KI-Agenten
Code block
Code mit Dateiname und Kopierknopf. Eigenes Syntax-Highlighting ist möglich, aber nicht nötig.
code-block
KI-Agenten
Sources
Nummerierte Quellenverweise nach einer Aussage und die Liste der Quellen, auf die sie zeigen.
sources
KI-Agenten
File diff
Eine Änderung an einer Datei, wie ein Coding-Agent sie vorschlägt, aus einem Unified Diff.
file-diff
KI-Agenten
AI action bar
Eine Werkzeugleiste, die sich in einen einzeiligen Prompt für den Agenten verwandelt und zurück.
ai-action-bar
Bewegung 6
Bewegung
Number ticker
Zählt bis zu einer Zahl hoch, sobald sie ins Bild kommt. Screenreader hören nur die Endzahl.
number-ticker
Bewegung
Blur fade
Blendet ein Element aus einer weichen Unschärfe ein, wenn es zum ersten Mal ins Bild kommt.
blur-fade
Bewegung
Highlighter
Ein Textmarker-Strich wird hinter eine Phrase gezeichnet, wenn sie zum ersten Mal ins Bild kommt.
highlighter
Bewegung
Text reveal
Die Wörter werden von blass zu voll, während man durch einen Absatz scrollt.
text-reveal
Bewegung
Marquee
Elemente laufen seitlich in einer Endlosschleife und halten bei Hover oder Fokus an. Steht still bei reduzierter Bewegung.
marquee
Bewegung
Rolling number
Eine Zahl, deren geänderte Ziffern nach oben oder unten rollen. Screenreader hören die ganze Zahl einmal.
rolling-number
Flächen 3
Flächen
Spotlight card
Eine Karte mit einem weichen Licht, das dem Mauszeiger folgt.
spotlight-card
Flächen
Dot pattern
Ein ruhiges Punktraster hinter dem Inhalt, nur mit CSS gezeichnet.
dot-pattern
Flächen
Shimmer button
Ein Primärknopf mit langsamem Schimmer und optionaler Neigung zum Mauszeiger.
shimmer-button
Overlays 3
Overlays
Toast
Kurze Meldungen, die sich in einer Ecke stapeln und von selbst verschwinden. toast() lässt sich überall aufrufen.
toast
Overlays
Command palette
Eine durchsuchbare Befehlsliste in einem Modal, geöffnet mit Cmd+K. Gebaut auf dem nativen Dialog-Element.
command-palette
Overlays
Sheet
Ein Panel, das von unten hochgleitet und sich nach unten ziehen lässt, um es zu schließen.
sheet
Bedienelemente 7
Bedienelemente
Stepper
Ein Zähler mit Plus und Minus und rollenden Ziffern, der auch mit den Pfeiltasten funktioniert.
stepper
Bedienelemente
Switch
Ein Ein/Aus-Schalter, dessen Knopf sich beim Drücken streckt und hinübergleitet.
switch
Bedienelemente
Copy button
Kopiert einen Wert; Symbol und Text rollen um und sagen, ob es geklappt hat oder der Browser abgelehnt hat.
copy-button
Bedienelemente
Timed undo
Eine Löschtaste, die ein paar Sekunden herunterzählt und sich vorher rückgängig machen lässt.
timed-undo
Bedienelemente
Hold to confirm
Eine Taste für Aktionen, die nicht aus Versehen passieren dürfen: Sie füllt sich beim Halten und löst aus, wenn sie voll ist.
hold-to-confirm
Bedienelemente
Tag picker
Tags aus einem Vorrat wählen. Jeder Tag fliegt ins Feld und beim Entfernen zurück.
tag-picker
Bedienelemente
Signature pad
Eine Unterschrift mit Maus, Finger oder Stift zeichnen oder tippen und ein scharfes PNG zurückbekommen.
signature-pad
Navigation 2
Navigation
Continuous tabs
Tabs, bei denen eine Pille zum gewählten Tab gleitet, mit Pfeiltasten wie eine echte Tab-Liste.
continuous-tabs
Navigation
Pagination
Zurück und weiter mit einer Seitenzahl, die Ziffer für Ziffer rollt.
pagination
Widgets 3
Widgets
Onboarding checklist
Eine einklappbare Erste-Schritte-Karte mit Fortschrittsanzeige, in der der nächste Schritt markiert ist.
onboarding-checklist
Widgets
Event reminders
Festlegen, wann und wie an ein Ereignis erinnert wird, per Benachrichtigung oder E-Mail.
event-reminders
Widgets
Opening hours
Öffnungszeiten oder Verfügbarkeit pro Wochentag, mit mehreren Zeiträumen am Tag.
opening-hours
Hooks 1
Hooks
useReducedMotion
Wahr, wenn die Person im System weniger Bewegung eingestellt hat.
use-reduced-motion