# Claude Code shadcn Setup: MCP-Server, Skill und CLAUDE.md > Claude Code shadcn Setup, getestet mit shadcn 4.21.4: MCP-Server, Skill, eine zweite Registry im eigenen Ordner, ein CLAUDE.md-Block und Prompts, die wirken. - Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI - Veröffentlicht: 9. Okt. 2026 - Kategorie: [UI mit KI-Agenten bauen](https://wingo-ui.com/de/blog/category/ai-agents) - Lesezeit: 12 Min. - Kanonische URL: https://wingo-ui.com/de/blog/claude-code-shadcn-mcp-setup - Englische Fassung: https://wingo-ui.com/blog/claude-code-shadcn-mcp-setup ## Kurz gesagt Führ npx shadcn@latest mcp init --client claude aus, damit der shadcn-MCP-Server in .mcp.json landet, installier den shadcn-Skill mit npx skills add shadcn/ui und trag jede weitere Registry in components.json ein. Ergänz dann einen kurzen Block in der CLAUDE.md, der festlegt, welche Registry für welchen Ordner zuständig ist und welche CLI installiert und aktualisiert, und nenn die Registry in jedem Prompt. Der Server findet Komponenten, Skill und Regeln steuern Claude, und die CLI schreibt die Dateien. Claude Code kennt shadcn/ui schon aus seinen Trainingsdaten, und genau das ist das Problem. Es schreibt die API, an die es sich erinnert. Die passt vielleicht nicht zu den Dateien in deinem `components/ui`, und die Registries, die du letzten Monat in `components.json` eingetragen hast, hat es nie gesehen. Ein Claude Code shadcn Setup, auf das du dich verlassen kannst, hat fünf Teile: den shadcn-MCP-Server, damit Claude echte Registries durchsuchen kann, den shadcn-Skill für den Projektkontext, die Registry-Liste in `components.json`, eine kurze Regeldatei, die sagt, welche Registry für welchen Ordner zuständig ist, und eine CLI, die die Dateien schreibt. Dieses Tutorial richtet alle fünf ein, ergänzt eine zweite Registry und endet mit Prompts, die dafür sorgen, dass die richtige Komponente installiert wird. Alles in diesem Beitrag lief im Oktober 2026 mit shadcn 4.21.4, der `skills`-CLI 1.7.1 und unserer eigenen Registry, Wingo UI 1.7.0. Was wir über Claude Code selbst sagen, stammt aus seiner Doku im selben Monat. Den Überblick gibt unser [Guide zu MCP für Komponentenbibliotheken](https://wingo-ui.com/de/blog/component-library-mcp-guide); lies ihn am besten zuerst. ## Was braucht ein Claude Code shadcn Setup? Einen Server, der Registries durchsucht, Anweisungen, wann er zum Einsatz kommt, eine Liste der Registries und eine CLI, die installiert: | Teil | Aufgabe | So fügst du es hinzu | | --- | --- | --- | | shadcn-MCP-Server | Durchsucht jede Registry in `components.json`, liefert add-Befehle | `npx shadcn@latest mcp init --client claude` | | shadcn-Skill | Projektkonfiguration und Kompositionsregeln von shadcn/ui | `npx skills add shadcn/ui` | | `components.json` | Die Registries für die Suche, mit Auth-Headers | Von Hand bearbeiten | | Block in der `CLAUDE.md` | Welche Registry welchen Ordner besitzt und welche CLI installiert | Sechs Zeilen von Hand | | Die CLI | Schreibt Dateien, installiert npm-Pakete | `npx shadcn@latest add` oder die CLI der Bibliothek | Der eigene MCP-Server einer Bibliothek ist ein optionaler sechster Teil: Der shadcn-Server lieferte in unseren Tests keine Props, ein Bibliotheks-Server kann das. Unserer landet per `npx wingo-ui@latest agents install claude` neben dem shadcn-Server in derselben `.mcp.json`. ## Wie richte ich den shadcn MCP Server in Claude Code ein? Führ einen Befehl im Stammordner des Projekts aus, starte Claude Code neu und schau unter `/mcp` nach: ```bash npx shadcn@latest mcp init --client claude ``` Der Befehl schreibt diesen Eintrag in `.mcp.json` und installiert danach `shadcn` als Dev-Dependency: ```json { "mcpServers": { "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] } } } ``` `.mcp.json` ist der Projekt-Scope von Claude Code: Commitest du die Datei, bekommt das Team den Server, nachdem jede Person ihn einmal freigegeben hat. Für ein Setup, das nur du nutzt, fügt `claude mcp add shadcn -- npx shadcn@latest mcp` ihn stattdessen im lokalen Scope hinzu, der Standard ist. ### Welche Tools gibt der shadcn-MCP-Server Claude? Steht die Verbindung im Claude Code shadcn MCP Setup, bekommt Claude sieben reine Lese-Tools. Diese Liste lieferte der Server in 4.21.4: - `get_project_registries`: die Registries in `components.json`. - `list_items_in_registries` und `search_items_in_registries`: durchblättern oder per Fuzzy-Suche finden, mit Paging. - `view_items_in_registries`: Name, Beschreibung, Typ, Anzahl der Dateien und npm-Dependencies. - `get_item_examples_from_registries`: Demo-Code, gefunden über Namen wie `dialog-demo`. - `get_add_command_for_items`: der Befehl `npx shadcn@latest add` für Items. - `get_audit_checklist`: eine Checkliste für den Schritt nach der Codegenerierung. Drei Details bestimmen, wie du ihn promptest. Erstens schreibt der Server nie Dateien: Er gibt Claude einen add-Befehl, und jede Installation ist ein Bash-Aufruf, den du vorher lesen kannst. Zweitens schickt der Server keine Anweisungen mit, und die Tool-Suche von Claude Code lädt beim Start einer Session nur Tool-Namen und Server-Anweisungen. Also müssen der Skill und deine Regeldatei sagen, wann er zum Einsatz kommt. Drittens lieferte `view_items_in_registries` für `@shadcn/button` und für unseren Dialog weder Props noch Quellcode. Beispiele gibt es nur, wo eine Registry `-demo`-Items veröffentlicht. shadcn/ui tut das, wir noch nicht. Bei einem Item von Drittanbietern lernt Claude die API aus der installierten Datei oder aus der Doku der Bibliothek. Ein Bug in 4.21.4: Die Suchergebnisse zeigen jeden add-Befehl als `[object Promise]`. `get_add_command_for_items` liefert den echten, in unserem Test `npx shadcn@latest add @shadcn/button @wingo-ui/dialog`. ## Wie binde ich eine zweite Registry ein, privat oder Pro? Trag sie unter `registries` in `components.json` ein. Eine öffentliche Registry braucht nur ihre URL-Vorlage: ```json { "registries": { "@wingo-ui": "https://wingo-ui.com/r/{name}.json" } } ``` Eine shadcn Private Registry bekommt Headers; das Secret steckt in einer Umgebungsvariable: ```json { "registries": { "@wingo-ui": { "url": "https://wingo-ui.com/r/{name}.json", "headers": { "Authorization": "Bearer ${WINGO_UI_API_KEY}" } } } } ``` Die shadcn-CLI liest diese Variable aus der Umgebung oder aus `.env.local`; beides haben wir bestätigt. Ist der Key gesetzt, schreibt `agents install` unseren eigenen MCP-Eintrag mit demselben `${WINGO_UI_API_KEY}` in `.mcp.json`, und Claude Code setzt ihn aus der Umgebung ein, in der es gestartet wurde. Exportier den Key in deinem Shell-Profil, dann sehen ihn beide Server. Nutz die Header-Form nur, wenn die Variable gesetzt ist. Ohne sie scheitert jeder Aufruf, der `@wingo-ui` berührt, mit `MISSING_ENV_VARS`: Eine Suche über `@shadcn` und `@wingo-ui` lieferte nur diesen Fehler und nicht einmal shadcn-Ergebnisse. Kostenlose Wingo-UI-Items brauchen keinen Key, also bleib bei der einfachen URL, bis du einen hast. Danach deckt eine Suche beide Registries ab. Das ist die echte Antwort von `search_items_in_registries` auf „login“ mit einem Limit von 4, ohne die kaputten add-Befehl-Zeilen: ```text Found 173 items matching "login" in registries @shadcn, @wingo-ui: Showing items 1-4 of 173: - login-page (registry:block) - The sign-in screen of Northwind CRM: password, email link or code, Google / Apple / Microsoft, two-step codes and the whole password recovery. [@wingo-ui] - login-01 (registry:block) - A simple login form. [@shadcn] - login-05 (registry:block) - A simple email-only login page. [@shadcn] - login-02 (registry:block) - A two column login page with a cover image. [@shadcn] ``` 173 Treffer für ein einziges Wort gehen auf das Fuzzy Matching zurück (`@shadcn` allein lieferte 7). Gib deshalb ein kleines Limit vor. ### Was passiert, wenn zwei Registries beide components/ui/button.tsx schreiben? Keine der beiden CLIs ersetzt die Datei der anderen stillschweigend, und egal wofür du dich entscheidest, etwas geht kaputt. shadcn/ui und viele Bibliotheken im shadcn-Stil installieren nach `components/ui`, mit denselben Dateinamen und anderen APIs. Als wir unseren [Dialog](https://wingo-ui.com/components/dialog) zu einem Projekt hinzugefügt haben, das schon den shadcn-Button hatte, meldete unsere CLI einen Konflikt bei `components/ui/button.tsx`, behielt die shadcn-Datei und schrieb trotzdem Dialog und Drawer daneben. Die shadcn-CLI fragt, bevor sie überschreibt. Behältst du den shadcn-Button, scheitert der Type-Check, denn unser Dialog und unser Drawer rendern ihre Schließen-Buttons mit `radius="full"`, einem Prop, den der Button von shadcn nicht hat. Ersetzt du ihn, bricht jedes `variant="default"`, `"secondary"` oder `"destructive"` in deiner App, denn die Varianten unseres [Button](https://wingo-ui.com/components/button) heißen `solid`, `soft`, `outline`, `ghost` und `link` (destructive ist `tone="danger"`). Gib der zweiten Bibliothek einen eigenen Ordner. Unsere CLI liest ihre Pfade aus `wingo-ui.json`. Ändere also nach `npx wingo-ui@latest init` den `ui`-Alias und lass den Rest stehen: ```json { "aliases": { "ui": "@/components/wingo", "blocks": "@/components/blocks", "hooks": "@/hooks", "lib": "@/lib", "utils": "@/lib/utils" } } ``` `npx wingo-ui@latest add dialog` schrieb dann `button.tsx`, `drawer.tsx` und `dialog.tsx` nach `components/wingo`, neben den unberührten shadcn-Button, und stellte ihre Imports auf `@/components/wingo/...` um. `init` hatte unsere Design-Tokens schon in `app/globals.css` eingefügt, und `add` hängte die Transitions des Drawers an. Das ist der zweite Grund, unsere Items mit unserer CLI zu installieren: Das JSON im shadcn-Format unter `/r/.json` enthält keine Tokens. In einem Projekt ohne sie laufen `z-modal` und `shadow-modal` bei einem per shadcn installierten Dialog ins Leere. ## Soll ich auch den Claude Code shadcn Skill installieren? Ja, wenn dein Projekt Komponenten von shadcn/ui nutzt. Nutzt es zusätzlich eine andere Bibliothek, grenz den Skill in deiner Regeldatei ein. Der Skill ist das offizielle Regelwerk aus dem Repository von shadcn/ui: ```bash npx skills add shadcn/ui --agent claude-code ``` Die `skills`-CLI schrieb zwei Skills nach `.claude/skills`, `shadcn` und `migrate-radix-to-base`, und trug beide in `skills-lock.json` ein. Claude Code hält von einem Skill nur die Beschreibung im Kontext, bis er genutzt wird. Die 19,5 KB große `SKILL.md` kostet also wenig, bis eine UI-Aufgabe beginnt. Ihre Beschreibung passt auf jedes Projekt mit einer `components.json`, rechne also damit, dass er bei den meisten UI-Aufgaben lädt. Sobald der Skill lädt, führt er `npx shadcn@latest info --json` aus und legt Claude dein Framework, die Tailwind-Version, Aliase, die Basisbibliothek und die installierten Komponenten vor. Seine `allowed-tools`-Zeile lässt Claude außerdem für den Rest dieses Turns jeden `npx shadcn@latest`-Befehl ohne Nachfrage ausführen, `add --overwrite` eingeschlossen. Drei seiner Regeln solltest du kennen, bevor du promptest: - **Nenn die Registry.** Fragst du nach „einem Login-Block“, ohne eine Registry zu nennen, weist der Skill Claude an, dich zu fragen, welche gemeint ist. - **Erst die Doku.** Claude führt `npx shadcn@latest docs ` aus, bevor es eine Komponente nutzt. Dieser Befehl kennt nur shadcn/ui: `docs dialog` lieferte Links zur Dialog-Doku von shadcn/ui und Radix, und `docs @wingo-ui/dialog` meldete, die Komponente sei in der shadcn-Registry nicht gefunden worden. - **Komposition nach shadcn/ui.** Formulare nutzen `FieldGroup` und `Field`, Icons in Buttons bekommen `data-icon`, und weil der Button von shadcn kein Loading-Prop hat, baut Claude einen `Spinner` und `disabled` von Hand zusammen. Alle drei passen für Dateien von shadcn/ui, die letzten beiden sind für andere Registries falsch. Unser Button hat ein `loading`-Prop, das einen Spinner statt des Labels zeigt, die Breite hält, `aria-busy` setzt und Klicks ignoriert. Ein von Hand gebauter Spinner wiederholt also nur, was schon da ist. In der Demo unten tauscht ein Klick auf „Save changes“ das Label gegen einen Spinner und „Saving“, während der Button seine Breite behält. > Live-Demo (Button): Klick auf Save changes: Der Spinner nimmt den Platz des Labels ein, die Breite bleibt, und der Button ignoriert Klicks, bis er fertig ist. Probier sie unter [Button](https://wingo-ui.com/components/button) aus und installier sie mit `npx wingo-ui@latest add button`. ## Was sollte in der CLAUDE.md stehen? Wem welcher Ordner gehört, mit welchen Tools gesucht wird, welche CLI installiert und aktualisiert und wo die Regeln des shadcn-Skills enden. Claude Code lädt die `CLAUDE.md` zu Beginn jeder Session, dieser Block ist also immer im Kontext: ```md ## UI-Komponenten - Zwei Registries. `components/ui` ist shadcn/ui (`@shadcn` in components.json). `components/wingo` ist Wingo UI (Versionen in wingo-ui.json); importiere es aus `@/components/wingo/`. - Vor dem Schreiben von UI suchen: die `shadcn`-MCP-Tools für @shadcn und andere Registries, die `wingo-ui`-MCP-Tools für Wingo UI. Schreib nie eine Komponente von Hand, die eine Registry hat. - Installiere shadcn-Items mit `npx shadcn@latest add @shadcn/` und Wingo-UI-Items mit `npx wingo-ui@latest add `. Installiere nie ein Wingo-UI-Item mit der shadcn-CLI. - Lies die API der Datei, die du importierst. Die Regeln des shadcn-Skills und `shadcn docs` gelten nur für `components/ui`; für Wingo-UI-Items ruf `get_component` auf und konfiguriere sie über ihre Props. - Nur semantische Tokens, keine Hex-Farben. Prüf 390px und 1440px Breite, in Light und Dark. - Übergib nie `--overwrite`, ohne mich zu fragen. Zeig mir vor jedem Update den Diff oder die Release Notes. ``` Die erste Zeile beantwortet, was kein Tool beantworten kann: welcher Ordner wem gehört. In diesem Layout zählt das doppelt, denn unser eigener Skill, den `agents install` schreibt, geht vom Standardordner aus und sagt Claude, dass Imports `@/components/ui/` nutzen. Die vierte Zeile hält Muster von shadcn/ui aus Dateien mit einer anderen API heraus. Die letzte wiederholt die eigene `--overwrite`-Regel des Skills, weil die Freigabe des Skills auch dieses Flag abdeckt. Nutzt du nur shadcn/ui, behalte die Zeilen für Suche, Installation und Überschreiben. Arbeiten Codex oder Cursor im selben Repository, schreib diese Zeilen in die AGENTS.md und importier sie aus der CLAUDE.md; unser [Vergleich AGENTS.md vs CLAUDE.md](https://wingo-ui.com/de/blog/agents-md-vs-claude-md-react) erklärt, welche Datei jeder Agent liest. Erlaub die lesenden Tools in `.claude/settings.json` und lass Installationen auf Rückfrage: ```json { "permissions": { "allow": [ "mcp__shadcn", "mcp__wingo-ui", "Bash(npx shadcn@latest search *)", "Bash(npx shadcn@latest view *)", "Bash(npx wingo-ui@latest outdated)" ] } } ``` ## Welche Prompts bringen Claude dazu, die richtige Komponente zu installieren? Die, die die Registry nennen, eine Suche vor der Installation verlangen und sagen, was am Ende geprüft wird. Fünf Prompts nach diesem Muster: 1. **Erst finden, dann bauen.** „Durchsuch @shadcn und @wingo-ui nach einem Modal, das auf Phones zum Bottom Sheet wird. Liste die Kandidaten mit Registry und Installationsbefehl auf und installier noch nichts.“ Die Nennung beider Registries erfüllt die Regel des Skills, und „installier noch nichts“ hält den ersten Schritt rein lesend. 2. **Auf der echten API einer Komponente bauen.** „Füg den Dialog und die Input-Komponente von Wingo UI mit der Wingo-CLI hinzu, lies ihre Props mit get_component und bau dann einen Profil-Dialog in app/settings/profile-dialog.tsx mit einem Namensfeld, Abbrechen und Speichern, einem Ladezustand auf Speichern und einem Fehler, wenn das Speichern scheitert.“ Nennst du die Quelle der API, lenkst du Claude weg vom shadcn/ui-Dialog, den es noch im Kopf hat. 3. **Screens mit einem Block beginnen.** „Bau /login aus dem Wingo-UI-Block login-page. Verbinde onSignIn und onVerifyCode mit unseren /api/auth-Routen, blende die Social-Provider aus und liste jeden on*-Handler auf, den du auf seinem simulierten Standard gelassen hast.“ Die [Login Page](https://wingo-ui.com/components/login-page) bringt simulierte Handler mit, damit ihre Demo funktioniert, und jeder, den du nicht übergibst, bleibt simuliert: Ohne `onVerifyCode` akzeptieren die Code-Ansichten `123456`. 4. **Updates als Bericht anfordern.** „Prüf meine Wingo-UI-Komponenten und meinen shadcn/ui-Button auf Änderungen upstream. Zeig mir die Release Notes und den Diff und ändere nichts.“ 5. **Mit einer Prüfung enden.** „Führ get_audit_checklist aus, dann Type-Check und Lint für die Dateien, die du angefasst hast.“ Die Checkliste besteht aus sechs allgemeinen Zeilen; erst der Type-Check findet ein falsches Prop, etwa `variant="destructive"` auf unserem Button. Für Prompt 2 ist das die Datei, mit der ein guter Lauf endet, auf den echten APIs von [Dialog](https://wingo-ui.com/components/dialog), Button und [Input](https://wingo-ui.com/components/input). Wir haben sie per Type-Check gegen Release 1.7.0 geprüft: ```tsx // app/settings/profile-dialog.tsx "use client"; import { useState } from "react"; import { Pencil } from "lucide-react"; // neben shadcn/ui lauten diese Imports @/components/wingo/... import { Button } from "@/components/ui/button"; import { Dialog, DialogClose } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; type ProfileDialogProps = { initialName: string; onSave: (name: string) => Promise; }; export function ProfileDialog({ initialName, onSave }: ProfileDialogProps) { const [open, setOpen] = useState(false); const [name, setName] = useState(initialName); const [saving, setSaving] = useState(false); const [error, setError] = useState(""); function changeOpen(next: boolean) { // bei jedem Öffnen mit dem gespeicherten Namen starten if (next) { setName(initialName); setError(""); } setOpen(next); } async function save() { setSaving(true); setError(""); try { await onSave(name.trim()); setOpen(false); } catch { setError("Dein Name wurde nicht gespeichert. Versuch es noch einmal."); } finally { setSaving(false); } } return ( }> Profil bearbeiten } title="Profil bearbeiten" description="Dein Name erscheint auf Rechnungen und in Kommentaren." icon={} footer={ <> } > ); } ``` In dieser Datei steht keine Media Query. Unter 768px öffnet sich derselbe Dialog als Bottom Sheet, das du zum Schließen nach unten ziehst, die Aktionen stehen dann untereinander in voller Breite, 48px hoch, die primäre oben. Unser Tutorial zum [responsiven shadcn-Dialog](https://wingo-ui.com/de/blog/shadcn-responsive-dialog-on-mobile) erklärt, wie dieser Wechsel ein Hydration-Flackern vermeidet. Die Demo unten ist eine Anzeigenkarte für ein Stadtrad in Brooklyn für $420, und ihr Edit-Button öffnet die gleiche Art Dialog. > Live-Demo (Dialog): Klick auf Edit, ändere den Preis und drück Save: Der Button zeigt seinen Ladezustand, dann schließt sich der Dialog; auf dem Smartphone öffnet sich derselbe Dialog als Bottom Sheet. Probier sie unter [Dialog](https://wingo-ui.com/components/dialog) aus und installier sie mit `npx wingo-ui@latest add dialog`. ## Wie halte ich die installierten Komponenten aktuell? Lass dir von Claude einen Bericht geben und entscheide dann. Die beiden CLIs gehen mit bearbeiteten Dateien unterschiedlich um. Deshalb schickt die Regeldatei jeden Ordner zu seinem eigenen Tool. Für Dateien von shadcn/ui zeigt `npx shadcn@latest add button --diff` deine Datei im Vergleich zur Registry, und `--overwrite` ersetzt sie, samt deinen Änderungen. Der Skill weist Claude an, von Hand zu mergen, wenn eine Datei lokale Änderungen hat. Unser Guide zum [Aktualisieren von shadcn-Komponenten, ohne Änderungen zu verlieren](https://wingo-ui.com/de/blog/update-shadcn-components-without-losing-edits), hat ein Git-Skript, das stattdessen einen echten 3-Way-Merge ausführt. Für Dateien von Wingo UI hat die CLI bei der Installation die Version jedes Items notiert und eine unveränderte Kopie behalten. Sie mergt also für dich: ```bash npx wingo-ui@latest outdated # installierte Items vs. neuestes Release npx wingo-ui@latest diff dialog # deine Datei vs. upstream npx wingo-ui@latest update dialog # 3-Way-Merge, der deine Änderungen behält ``` Ist unser MCP-Server verbunden, liefert `check_updates` dieselbe Liste mit Release Notes, Prompt 4 funktioniert also innerhalb der Session. ## Wo fange ich an? Nur mit shadcn/ui: Füg den MCP-Server hinzu, installier den Skill, schreib die drei Regelzeilen und nenn `@shadcn` in jedem Prompt. Willst du eine zweite Registry, die für Smartphones gebaut ist: Dialog, Button und Input aus diesem Beitrag sind kostenlos. `npx wingo-ui@latest agents install claude` installiert unseren MCP-Server und Skill neben denen von shadcn, und die [Doku zum MCP-Server](https://wingo-ui.com/docs/mcp) beschreibt das Setup. Der Login-Page-Block gehört zu Wingo UI Pro, die Details stehen auf der [Preisseite](https://wingo-ui.com/de/pricing). Für Cursor macht das [Cursor shadcn Setup](https://wingo-ui.com/de/blog/cursor-shadcn-mcp-rules) dasselbe mit `.cursor/mcp.json` und einer `.mdc`-Regel, und der [Guide zum Claude Code Design System](https://wingo-ui.com/de/blog/claude-code-design-system) behandelt die Tokens, die DESIGN.md und die Hooks, die jeden Screen konsistent halten. Weitere Guides dieser Art findest du unter [UI mit KI-Agenten bauen](https://wingo-ui.com/de/blog/category/ai-agents). ## Komponenten in diesem Artikel - [Button](https://wingo-ui.com/components/button) (Free): The React button component every screen starts with: five variants, six tones, all sizes, and a loading state that never jumps. Installation: `npx wingo-ui@latest add button` - [Dialog](https://wingo-ui.com/components/dialog) (Free): A React modal dialog for focused tasks: a spring-scaled card on desktop and a bottom sheet on phones, with nesting and scrolling. Installation: `npx wingo-ui@latest add dialog` - [Login Page](https://wingo-ui.com/components/login-page) (Pro): A React login page with password, magic link or code sign-in, Google, Apple and Microsoft buttons, two-step codes and password recovery. Installation: `npx wingo-ui@latest add login-page` - [Input](https://wingo-ui.com/components/input) (Free): A React text input: icons and addons inside the box, a clear button, a loading spinner, a character counter and floating labels. Installation: `npx wingo-ui@latest add input` ## Häufige Fragen ### Wie installiere ich den shadcn-MCP-Server in Claude Code? Führ npx shadcn@latest mcp init --client claude im Stammordner des Projekts aus. Der Befehl schreibt einen shadcn-Eintrag in .mcp.json und installiert shadcn als Dev-Dependency; starte Claude Code neu und prüf mit /mcp, ob der Server verbunden ist. ### Was ist der Unterschied zwischen dem shadcn-Skill und dem shadcn-MCP-Server? Der MCP-Server gibt Claude Tools, um Registry-Items aufzulisten, zu durchsuchen, anzusehen und ihre add-Befehle abzurufen. Der Skill bringt keine Tools mit: Er lädt deine Projektkonfiguration aus shadcn info --json und die Kompositionsregeln von shadcn/ui in die Session, sobald Claude an UI arbeitet. ### Installiert der shadcn-MCP-Server Komponenten selbst? Nein. Stand shadcn 4.21.4 sind seine sieben Tools reine Lese-Tools: Er liefert den Befehl npx shadcn@latest add, und Claude führt ihn im Terminal aus. Dieser Bash-Aufruf fragt normalerweise nach deiner Freigabe, aber in einem Turn, in dem der shadcn-Skill aktiv ist, lässt ihn die allowed-tools-Zeile des Skills ohne Nachfrage laufen. ### Warum scheitert eine shadcn-MCP-Suche mit MISSING_ENV_VARS? Eine Registry in components.json nutzt in ihren Headers eine Umgebungsvariable, die nicht gesetzt ist. Die shadcn-CLI lässt dann den ganzen Aufruf scheitern, andere Registries eingeschlossen. Exportier die Variable oder schreib sie in .env.local, oder nutz für öffentliche Registries die einfache URL-Form. ### Kann ich shadcn/ui und eine weitere Registry im selben Projekt nutzen? Ja, aber viele Bibliotheken im shadcn-Stil installieren nach components/ui, mit denselben Dateinamen, angefangen bei button.tsx. Gib der zweiten Bibliothek einen eigenen Ordner (Wingo UI liest ihn aus aliases.ui in wingo-ui.json), damit keine CLI die Dateien der anderen überschreiben muss. --- Quelle: https://wingo-ui.com/de/blog/claude-code-shadcn-mcp-setup