268 animierte, konfigurierbare React-Komponenten und komplette Screens. Kopier den Code, pass ihn an und lass Claude Code, Codex, Gemini oder Grok damit bauen.
npx wingo-ui@latest init59 Komponenten sind für immer kostenlos. Alle anderen kannst du live ausprobieren, ganz ohne Konto.
Gib den 6-stelligen Code ein, den wir an emma@carter.dev geschickt haben.
Hier klappt jeder 6-stellige Code.
Jede Komponente nimmt eine Farbe an. Wähl eine und sieh zu, wie alle mitziehen.
Alles hier oben ist live. Tippen, schreiben, ziehen und eine Akzentfarbe wählen.
Probier's aus
Dieselben Demos wie in der Doku, direkt hier auf der Seite. Zieh eine Karte, sortier die Tabelle, wisch durch den Stapel.
A board of columns and cards for pipelines, orders and tasks: drag with mouse, touch or keyboard, WIP limits, inline add and a phone layout.
Warum Wingo UI
Jede Komponente folgt demselben Designsystem. Button, Sheet und Datentabelle wirken deshalb wie aus einem Guss.
Zuerst für 390 Pixel gestaltet. Overlays werden zu Bottom Sheets, Touch-Ziele sind 44 Pixel groß und Gesten folgen deinem Finger mit 60 fps.
Bestellungen
Lieferung
Wähl, wann Bestellung #1042 ankommt.
Beide Themes sind gestaltet, nicht einfach invertiert, und jedes Farbpaar erfüllt WCAG AA. Stell diese Seite um und sieh selbst.
Größe, Variante, Ton, Radius, Farbe, Texte und Icons, alle mit sinnvollen Standardwerten. App-weite Vorgaben setzt du einmal mit UIProvider.
<Button radius="full" tone="brand">Weiter</Button>Flächen, Text-, Marken- und Statusfarben sind Tokens in einer einzigen CSS-Datei. Der Theme-Generator erstellt sie für dich.
Echte Buttons und Eingabefelder, saubere Labels, sichtbarer Fokus und volle Tastaturbedienung.
Komponenten landen als ganz normale TypeScript-Dateien in deinem Projekt. Kein Runtime-Paket, kein Lock-in.
$ npx wingo-ui add otp-input
✓ components/ui/otp-input.tsx
✓ lib/utils.ts
otp-input@1.0.0 in wingo-ui.json eingetragenBlocks
Ganze Seiten für CRM, Admin, Marktplätze und KI-Apps, gebaut aus denselben Komponenten. Starte mit einem Block und ändere, was du brauchst.
Pipelines, Kontaktseiten und ein gemeinsames Postfach.
Dashboards, Nutzer, Automationen, Rechnungen und Einstellungen.
Startseite, Suche, Inserate, Einstellen, Checkout und Preise.
Chat, Prompts, Tool-Aufrufe und Agentenstatus.
Mobile Startseite, Onboarding, Anmeldung und Fehlerseiten.
KI-Agenten
Verbinde Claude Code, Codex, Gemini CLI oder Grok mit Wingo UI. Dein Agent durchsucht die Bibliothek, liest Props und Designregeln und installiert genau die passenden Komponenten.
Suche, Doku, Quellcode, Designregeln, Theme-Tokens und Update-Checks über einen einzigen Remote-Endpunkt.
npx wingo-ui add kopiert Komponenten samt allem, was sie brauchen, in dein Projekt.
Ein Befehl richtet Agentenregeln und einen Claude-Skill ein, die deinem Agenten das Designsystem beibringen.
Der MCP-Server liefert stets das neueste Release. Dein Agent kennt neue Komponenten also ab dem Tag, an dem sie erscheinen.
In einer Minute verbunden
Erstell in deinem Konto einen API-Schlüssel und füg den Server zu deinem Agenten hinzu. Kostenlose Komponenten funktionieren auch ohne Schlüssel.
Im Terminal ausführen
In .mcp.json einfügen
Dann frag einfach
„Bau eine Einstellungsseite mit Profilformular, Benachrichtigungs-Schaltern und einer Gefahrenzone. Nutze Wingo UI.“
Updates
Jede Komponente hat eine Version. Bekommt eine Komponente einen Fix oder ein neues Prop, zeigt dir die CLI die Änderungen und führt sie in deine Kopie zusammen. Deine eigenen Anpassungen bleiben erhalten.
npx wingo-ui outdatedSieh nach, für welche deiner Komponenten es eine neuere Version gibt.
npx wingo-ui diffPrüf die genauen Änderungen, bevor du sie übernimmst.
npx wingo-ui updateÜbernimm die neue Version per 3-Wege-Merge, der deine Anpassungen behält.
A fix for the data table, whose sticky header cells could shift down and cover the first row.
$ npx wingo-ui outdated
2 Updates verfügbar
otp-input 1.0.0 → 1.1.0 neue Props
data-table 1.0.0 → 1.0.1 Fix
$ npx wingo-ui update
✓ 2 Komponenten aktualisiert, deine Änderungen behaltenBeispielausgabe. Release Notes erscheinen auf Englisch.
Preise
59 Komponenten, Hooks und Helfer sind für immer kostenlos. Pro schaltet alles frei, auch jede neue Komponente.
Kein Konto nötig
Jederzeit kündbar
Alles aus Free, plus:
Schon im Abo? Es verlängert sich dann nicht mehr.
Alles aus Pro, plus:
Kein Konto nötig
Jederzeit kündbar
Alles aus Free, plus:
Schon im Abo? Es verlängert sich dann nicht mehr.
Alles aus Pro, plus:
Probier jede Komponente kostenlos aus und steig auf Pro um, wenn du bereit bist, zu launchen.
Drag a deal, or use ⋯ → Move to