Bencho: Was können die UI-Bausteine?

Bencho: interaktive UI-Bausteine zum Kopieren, die wirklich laufen

Markus Seyfferth

Autor Dr. Web

15. September 2026

2 Min. Lesezeit

Fertige UI-Bausteine aus dem Netz zu kopieren spart Zeit, endet aber oft mit einer Enttäuschung: Die schicke Vorschau war nur ein Standbild, die Animation fehlt. Bencho dreht den Ablauf um und lässt jeden Baustein schon in der Galerie laufen, samt Federphysik und Übergängen.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Das Wichtigste in Kürze

Bencho ist eine Sammlung interaktiver UI-Bausteine, die als echte React-Komponenten laufen statt als statische Vorschau.
Die Bausteine stehen unter MIT-Lizenz und lassen sich kostenlos auch in kommerzielle Kundenprojekte übernehmen.
Statt Code kopieren Sie auf Wunsch einen fertigen Prompt, der einen KI-Coding-Agenten den Baustein einbauen lässt.
Die Animationen berücksichtigen die Systemeinstellung „Bewegung reduzieren“, ein Pflichtpunkt seit dem Barrierefreiheitsstärkungsgesetz.

Was steckt hinter Bencho?

Ein grauer runder Knopf links mit der Beschriftung MIT in weißem Text und einem grauen Rahmen; ein vertikaler grauer Schieberegler in der Mitte und ein Metall-Kippschalter rechts mit einer hellblauen Basis und einem Metallhebel in der Mitte auf einem weißen Hintergrund — Lorenzo Cabra präsentiert mit Bencho eine interaktive Komponentensammlung: funktionsfähige UI-Elemente wie Regler, Wellenformen und Farbwähler, die live im Browser reagieren

Hinter Bencho steht der Entwickler Lorenzo Cabra, der die Sammlung als lebendige Galerie angelegt hat.^[1] Jeder Eintrag ist kein Screenshot, sondern eine laufende Komponente: ein Slide-to-Confirm-Regler, eine Wellenform, ein Farbwähler, eine Bilanzkarte, ein Karussell. Die Bausteine reagieren im Browser sofort auf Eingaben und lassen sich anfassen und verstellen.

Technisch laufen die Bausteine als React-Komponenten mit der Animationsbibliothek Framer Motion, ergänzt um SVG-Filter für Effekte wie die zähflüssige „Gooey“-Verschmelzung. Der Anspruch live statt Attrappe zielt genau darauf: Die Vorschau ist bereits der fertige, verstellbare Baustein, kein abfotografierter Zustand.

Eine Baustein-Galerie, die schon läuft, verkürzt den Weg von der Idee zum Prototyp spürbar. Der eigentliche Bruch liegt aber im mitgelieferten Prompt, denn er übergibt die Arbeit direkt an den KI-Agenten.
— Michael Dobler, Herausgeber Dr. Web

Wie kommt ein Baustein ins Projekt?

Der Weg ins eigene Projekt führt über zwei Knöpfe. Der eine kopiert den Quellcode des Bausteins, den Sie danach frei verändern. Der andere kopiert einen fertigen Prompt für den Agenten, der einen KI-Coding-Assistenten anweist, genau diesen MIT-lizenzierten Baustein einzubauen.^[1]

Bencho reiht sich in die Bewegung ein, Bausteine zu kopieren statt als npm-Paket zu installieren, die das Framework shadcn/ui bekannt gemacht hat. Auf drweb.de zeigt sich dieser Ansatz etwa bei Opensource UI mit 207 React-Komponenten oder bei DialKit, das Interface-Werte in Echtzeit justiert. Bencho setzt einen drauf, weil der Baustein nicht nur als Code, sondern als lauffähige Interaktion samt Prompt-Übergabe bereitliegt.

Bencho auf einen Blick

Wie sich eine laufende Baustein-Galerie von einer statischen Sammlung unterscheidet.

Statische Baustein-Bibliothek

Vorschau als Bildschirmfoto oder Video
Anpassen erst nach dem Kopieren im Editor
Übergabe nur als Code

Bencho

Vorschau als laufende Komponente im Browser
Verstellen direkt in der Galerie
Übergabe als Code oder als Prompt für den KI-Agenten

MIT

Lizenz der Bausteine, auch kommerziell nutzbar

React

Komponenten mit Framer Motion und SVG-Filtern

Reduced Motion

berücksichtigt die Einstellung „Bewegung reduzieren“

Für wen lohnt sich der Blick?

Am meisten profitieren Freelancer und kleinere Agenturen, die schnelle, taktile Interaktionen brauchen, ohne ein eigenes Motion-System aufzubauen. Weil die MIT-Lizenz die kommerzielle Nutzung deckt, landet ein Baustein ohne Gebühr im Kundenprojekt. Nur der Name und die Marke Bencho bleiben geschützt, Sie übernehmen also den Baustein und nicht das Branding.

Ein Punkt gehört auf die Prüfliste. Seit dem Barrierefreiheitsstärkungsgesetz vom 28. Juni 2025 müssen viele Web-Angebote Bewegung drosseln lassen. Bencho berücksichtigt die Einstellung „Bewegung reduzieren“, trotzdem prüfen Sie jeden animierten Baustein selbst, gerade einen Bestätigen-Slider, der ohne Bewegung nicht auslösen darf. Wie Sie kopierte Bausteine sauber an das eigene Design-System anpassen, zeigt der Beitrag zu Design Tokens.

Für den Einstieg genügt ein Besuch der Galerie: einen Baustein aussuchen, im Browser verstellen und über den Code- oder den Prompt-Knopf ins Projekt holen. Bei regelmäßigen Prototypen spart der Griff in die Sammlung den immer gleichen Aufbau von Reglern und Schaltern.