Terminal-Kopierbutton
Ein Terminalbefehl mit blinkendem Cursor: Beim Klick wird er Zeichen für Zeichen markiert, kopiert und bestätigt.
Einstellungen
Code
<div class="uvq01-cli"><button class="b" type="button"><span class="ps" aria-hidden="true">$</span><code class="cm">npx aimran add hero</code><span class="cr" aria-hidden="true"></span><span class="ic" aria-hidden="true"><svg class="cp" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2.5"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span><span class="sr">Kopieren</span></button><span class="ok" role="status"></span><span class="msg" hidden>Kopiert</span></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Buttons
Alle ansehen: ButtonsWofür du ihn nutzen kannst
Installationsbefehle sind oft das Erste, was Entwickler von einer Landingpage kopieren, und dieser Button macht diesen Moment deutlich. Der Befehl steht auf einer dunklen Schiefer-Pille mit bernsteinfarbenem Prompt und blinkendem Blockcursor. Beim Klick wird der Text schrittweise markiert, als würde man ihn von Hand auswählen, landet in der Zwischenablage, das Kopiersymbol wird zum Haken, und ein kleines Kopiert-Schild erscheint und wird angesagt.
Ersetze die Beschriftung durch deinen eigenen Befehl, er wird genau so kopiert. Die Hauptfarbe steuert Prompt, Cursor und Bestätigung, die Zweitfarbe den Hintergrund, ein helles Theme oder dein Markengrün sind also schnell eingestellt.