Zum Inhalt springen
WingoUI
NeuWingo UI 1.14.0 ist da

App-Oberflächen, die sich nativ anfühlen.

374 animierte, konfigurierbare React-Komponenten, komplette Screens und Hooks. Kopier den Code, pass ihn an und lass Claude Code, Codex, Gemini oder Grok damit bauen.

npx wingo-ui@latest init

75 Komponenten und Hooks sind für immer kostenlos. Alle anderen kannst du live ausprobieren, ganz ohne Konto.

Umsatz

$74.310Up 8,1 %ggü. Vorperiode

Schau in dein Postfach

Gib den 6-stelligen Code ein, den wir an emma@carter.dev geschickt haben.

Hier klappt jeder 6-stellige Code.

Akzentfarbe

Jede Komponente nimmt eine Farbe an. Wähl eine und sieh zu, wie alle mitziehen.

Benachrichtigungen

Alles hier oben ist live. Tippen, schreiben, ziehen und eine Akzentfarbe wählen.

Komponenten
231
Komplette Screens
107
Hooks und Utilities
36
Kategorien
18
Für immer kostenlos
75

Probier's aus

Echte Komponenten statt Screenshots

Dieselben Demos wie in der Doku, direkt hier auf der Seite. Zieh eine Karte, sortier die Tabelle, wisch durch den Stapel.

Warum Wingo UI

Gemacht für Apps, die täglich genutzt werden

Jede Komponente folgt demselben Designsystem. Button, Sheet und Datentabelle wirken deshalb wie aus einem Guss.

Fühlt sich auf dem Handy nativ an

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.

  • Bottom Sheets statt Popover auf dem Handy
  • 44 px große Touch-Ziele und Safe Areas
  • Wischen, Ziehen und langes Drücken, die sich richtig anfühlen
  • Tabellen werden auf kleinen Screens zu Karten

Hell und dunkel, beide gleich gut

Beide Themes sind gestaltet, nicht einfach invertiert, und jedes Farbpaar erfüllt WCAG AA. Stell diese Seite um und sieh selbst.

Jedes Detail ist ein Prop

Größe, Variante, Ton, Radius, Farbe, Texte und Icons, alle mit sinnvollen Standardwerten. App-weite Vorgaben setzt du einmal mit UIProvider.

Deine Marke in Minuten

Flächen, Text-, Marken- und Statusfarben sind Tokens in einer einzigen CSS-Datei. Der Theme-Generator erstellt sie für dich.

Theme-Generator öffnen

Von Haus aus barrierefrei

Echte Buttons und Eingabefelder, saubere Labels, sichtbarer Fokus und volle Tastaturbedienung.

  • Radix-Primitives für Fokus und ARIA
  • Respektiert reduzierte Bewegung
  • AA-Kontrast in beiden Themes

Quellcode, der dir gehört

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 eingetragen

Blocks

Komplette Screens, bereit zum Anpassen

Ganze Seiten für CRM, Admin, Marktplätze und KI-Apps, gebaut aus denselben Komponenten. Starte mit einem Block und ändere, was du brauchst.

CRM und Vertrieb

Pipelines, Kontaktseiten und ein gemeinsames Postfach.

Admin und ERP

Dashboards, Nutzer, Automationen, Rechnungen und Einstellungen.

Marktplatz und Commerce

Startseite, Suche, Inserate, Einstellen, Checkout und Preise.

KI-Apps

Chat, Prompts, Tool-Aufrufe und Agentenstatus.

Apps und Onboarding

Mobile Startseite, Onboarding, Anmeldung und Fehlerseiten.

KI-Agenten

Bau UIs mit deinem 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.

  • Ein MCP-Server mit 10 Tools

    Suche, Doku, Quellcode, Designregeln, Theme-Tokens und Update-Checks über einen einzigen Remote-Endpunkt.

  • Eine CLI, die Quellcode installiert

    npx wingo-ui add kopiert Komponenten samt allem, was sie brauchen, in dein Projekt.

  • Regeln und Skills für jeden Agenten

    Ein Befehl richtet Agentenregeln und einen Claude-Skill ein, die deinem Agenten das Designsystem beibringen.

  • Immer aktuell

    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. Ein kostenloses Konto (nur E-Mail) schaltet alle kostenlosen Komponenten frei.

Kostenlosen API-Schlüssel holen

Im Terminal ausführen

Terminal
claude mcp add --transport http wingo-ui https://wingo-ui.com/mcp --header "Authorization: Bearer $WINGO_UI_API_KEY"

In .mcp.json einfügen

.mcp.json
{
"mcpServers": {
"wingo-ui": {
"type": "http",
"url": "https://wingo-ui.com/mcp",
"headers": {
"Authorization": "Bearer ${WINGO_UI_API_KEY}"
}
}
}
}

Dann frag einfach

„Bau eine Einstellungsseite mit Profilformular, Benachrichtigungs-Schaltern und einer Gefahrenzone. Nutze Wingo UI.“

Updates

Updates, die du einfach übernimmst

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.

  1. npx wingo-ui outdated

    Sieh nach, für welche deiner Komponenten es eine neuere Version gibt.

  2. npx wingo-ui diff

    Prüf die genauen Änderungen, bevor du sie übernimmst.

  3. npx wingo-ui update

    Übernimm die neue Version per 3-Wege-Merge, der deine Anpassungen behält.

Neuestes Releasev1.14.0

11 new page templates and 6 new components

New templates for portfolios, agencies, real estate, restaurants, stores, travel, home services and appointment businesses, two account screens, and new components for booking, chat, emoji, countries, image galleries, tree selection and terminal output.

Neu
17
Geändert
0
Behoben
1
Entfernt
0
$ 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 behalten

Beispielausgabe. Release Notes erscheinen auf Englisch.

Preise

Einfache Preise. Kostenlos starten.

75 Komponenten und Hooks sind für immer kostenlos. Pro schaltet alles frei, auch jede neue Komponente.

Free

Das Wichtigste, für immer kostenlos.
Kostenlos
Komponenten ansehen

Weder Konto noch Karte nötig. Die kostenlosen Komponenten stehen unter der MIT-Lizenz.

  • Enthalten: 75 Komponenten und Hooks
  • Enthalten: Alle 21 animierten Showcase-Komponenten
  • Enthalten: CLI ohne Konto, MCP mit kostenlosem Schlüssel
  • Enthalten: Jede Doku-Seite und jeder Live-Playground

Pro

Am beliebtesten
Ganz Wingo UI, monatlich oder jährlich abgerechnet.
80 $ pro Jahr, Du sparst 16 $ im Jahr
Pro holen

Jederzeit kündbar. 14 Tage Geld zurück beim Erstkauf, wenn kein Pro-Element heruntergeladen wurde.

Alles aus Free, plus:

  • Enthalten: Alle 374 Komponenten, Blöcke und Hooks
  • Enthalten: 107 Blocks, Seitenvorlagen und Sektionen
  • Enthalten: Voller MCP- und CLI-Zugriff für deine Agenten
  • Enthalten: Jede neue Komponente, solange du abonniert bist
  • Enthalten: Kommerzielle Nutzung in beliebig vielen Projekten

Lifetime

Einmal zahlen, Pro für immer behalten.
150 $  einmalig
Lifetime holen

14 Tage Geld zurück beim Erstkauf, wenn kein Pro-Element heruntergeladen wurde. Schon im Abo? Es verlängert sich nicht mehr.

Alles aus Pro, plus:

  • Enthalten: Eine Zahlung, keine Verlängerung
  • Enthalten: Alle künftigen Komponenten und Updates
  • Enthalten: Voller MCP- und CLI-Zugriff, für immer
  • Enthalten: Dieselbe kommerzielle Lizenz wie Pro

Kontakt

Fragen? Frag das Team

Unsicher, welcher Tarif passt, oder hängst du bei einer Komponente fest? Schreib uns, wir melden uns.

  • Ein echter Mensch antwortet, meist innerhalb eines Arbeitstags.

  • Schreib auf Deutsch oder Englisch.

  • Screenshots helfen bei Fehlern: Hänge sie auf der Kontaktseite an.

Willst du Screenshots anhängen? Nutze die Kontaktseite.

Blog

Aus dem Blog

Anleitungen, Tutorials und Vergleiche für React-Oberflächen, die auf dem Smartphone und mit Coding-Agents funktionieren.

Deine nächste App-UI beginnt hier.

Probier jede Komponente kostenlos aus und steig auf Pro um, wenn du bereit bist, zu launchen.