[{"data":1,"prerenderedAt":1316},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":405,"/docs/mcp":418,"surround-/docs/mcp":1313},[4],{"title":5,"path":6,"stem":7,"children":8,"page":17},"Docs","/docs","docs",[9,90,353,360,366,379],{"path":6,"stem":7,"title":10,"type":11,"children":12},"Get Started","group",[13,19,44,48,52,70,74,78,82,86],{"title":14,"path":15,"stem":16,"new":17,"type":18,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",false,"page",{"title":20,"path":21,"stem":22,"children":23,"new":17,"type":11},"Installation","/docs/installation","docs/02.installation",[24,28,32,36,40],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite",{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":45,"path":46,"stem":47,"new":17,"type":18,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":49,"path":50,"stem":51,"new":17,"type":18,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":53,"path":54,"stem":55,"children":56,"new":17,"type":11},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[57,60,63,67],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":71,"path":72,"stem":73,"new":17,"type":18,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":75,"path":76,"stem":77,"new":17,"type":18,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":79,"path":80,"stem":81,"new":17,"type":18,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":83,"path":84,"stem":85,"new":17,"type":18,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":87,"path":88,"stem":89,"new":17,"type":18,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":91,"path":92,"stem":93,"children":94,"new":17,"type":11},"Components","/docs/components","docs/02.components",[95,100,104,108,112,116,120,124,128,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349],{"title":96,"path":97,"stem":98,"new":17,"type":99,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion","component",{"title":101,"path":102,"stem":103,"new":17,"type":99,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":105,"path":106,"stem":107,"new":17,"type":99,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":109,"path":110,"stem":111,"new":17,"type":99,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":113,"path":114,"stem":115,"new":17,"type":99,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":117,"path":118,"stem":119,"new":17,"type":99,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":121,"path":122,"stem":123,"new":17,"type":99,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":125,"path":126,"stem":127,"new":17,"type":99,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":129,"path":130,"stem":131,"new":132,"type":99,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",true,{"title":134,"path":135,"stem":136,"new":17,"type":99,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":138,"path":139,"stem":140,"new":17,"type":99,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":142,"path":143,"stem":144,"new":17,"type":99,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":146,"path":147,"stem":148,"new":17,"type":99,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":150,"path":151,"stem":152,"new":17,"type":99,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":154,"path":155,"stem":156,"new":17,"type":99,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":158,"path":159,"stem":160,"new":17,"type":99,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":162,"path":163,"stem":164,"new":17,"type":99,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":166,"path":167,"stem":168,"new":17,"type":99,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":170,"path":171,"stem":172,"new":17,"type":99,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":174,"path":175,"stem":176,"new":17,"type":99,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":178,"path":179,"stem":180,"new":17,"type":99,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":182,"path":183,"stem":184,"new":17,"type":99,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":186,"path":187,"stem":188,"new":17,"type":99,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":190,"path":191,"stem":192,"new":132,"type":99,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":194,"path":195,"stem":196,"new":132,"type":99,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":198,"path":199,"stem":200,"new":17,"type":99,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":202,"path":203,"stem":204,"new":17,"type":99,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":206,"path":207,"stem":208,"new":17,"type":99,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":210,"path":211,"stem":212,"new":132,"type":99,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":214,"path":215,"stem":216,"new":17,"type":99,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":218,"path":219,"stem":220,"new":132,"type":99,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":222,"path":223,"stem":224,"new":132,"type":99,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":226,"path":227,"stem":228,"new":17,"type":99,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":230,"path":231,"stem":232,"new":17,"type":99,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":234,"path":235,"stem":236,"new":132,"type":99,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":238,"path":239,"stem":240,"new":17,"type":99,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":242,"path":243,"stem":244,"new":17,"type":99,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":246,"path":247,"stem":248,"new":17,"type":99,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":250,"path":251,"stem":252,"new":17,"type":99,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":254,"path":255,"stem":256,"new":17,"type":99,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":258,"path":259,"stem":260,"new":17,"type":99,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":262,"path":263,"stem":264,"new":17,"type":99,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":266,"path":267,"stem":268,"new":17,"type":99,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":270,"path":271,"stem":272,"new":17,"type":99,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":274,"path":275,"stem":276,"new":17,"type":99,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":278,"path":279,"stem":280,"new":17,"type":99,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":282,"path":283,"stem":284,"new":17,"type":99,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":286,"path":287,"stem":288,"new":17,"type":99,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":290,"path":291,"stem":292,"new":17,"type":99,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":294,"path":295,"stem":296,"new":17,"type":99,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":298,"path":299,"stem":300,"new":17,"type":99,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":302,"path":303,"stem":304,"new":17,"type":99,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":306,"path":307,"stem":308,"new":132,"type":99,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":310,"path":311,"stem":312,"new":17,"type":99,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":314,"path":315,"stem":316,"new":17,"type":99,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":318,"path":319,"stem":320,"new":17,"type":99,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":322,"path":323,"stem":324,"new":17,"type":99,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":326,"path":327,"stem":328,"new":17,"type":99,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":330,"path":331,"stem":332,"new":17,"type":99,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":334,"path":335,"stem":336,"new":17,"type":99,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":338,"path":339,"stem":340,"new":17,"type":99,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":342,"path":343,"stem":344,"new":17,"type":99,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":346,"path":347,"stem":348,"new":17,"type":99,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":350,"path":351,"stem":352,"new":17,"type":99,"children":-1},"Typography","/docs/components/typography","docs/components/typography",{"title":20,"path":21,"stem":22,"children":354,"new":17,"type":11},[355,356,357,358,359],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},{"title":53,"path":54,"stem":55,"children":361,"new":17,"type":11},[362,363,364,365],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},{"title":367,"path":368,"stem":369,"children":370,"new":17,"type":11},"Forms","/docs/forms","docs/forms",[371,375],{"title":372,"path":373,"stem":374,"new":17,"type":18,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":376,"path":377,"stem":378,"new":17,"type":18,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":380,"path":381,"stem":382,"children":383,"new":17,"type":11},"Registry","/docs/registry","docs/registry/index",[384,385,389,393,397,401],{"title":380,"path":381,"stem":382,"new":17,"type":18,"children":-1},{"title":386,"path":387,"stem":388,"new":17,"type":18,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":390,"path":391,"stem":392,"new":17,"type":18,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":394,"path":395,"stem":396,"new":17,"type":18,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":398,"path":399,"stem":400,"new":17,"type":18,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":402,"path":403,"stem":404,"new":17,"type":18,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"repo":406},{"id":407,"name":408,"repo":409,"description":410,"createdAt":411,"updatedAt":412,"pushedAt":413,"stars":414,"watchers":415,"forks":416,"defaultBranch":417},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-04-06T17:33:41Z","2026-04-06T17:33:39Z",9706,37,634,"dev",{"id":419,"title":420,"body":421,"description":1304,"extension":1305,"links":1306,"meta":1307,"navigation":132,"new":17,"path":1308,"rawbody":1309,"seo":1310,"stem":1311,"__hash__":1312},"content/docs/mcp.md","MCP Server",{"type":422,"value":423,"toc":1275},"minimark",[424,428,431,438,449,452,457,466],[425,426,427],"p",{},"The shadcn MCP Server allows AI assistants to interact with items from registries. You can browse available components, search for specific ones, and install them directly into your project using natural language.",[425,429,430],{},"For example, you can ask an AI assistant to \"Build a landing page using components from the acme registry\" or \"Find me a login form from the shadcn registry\".",[425,432,433,434,437],{},"Registries are configured in your project's ",[435,436,45],"code",{}," file.",[439,440,446],"pre",{"className":441,"code":443,"language":444,"meta":445},[442],"language-json","{\n  \"registries\": {\n    \"@acme\": \"https://acme.com/r/{name}.json\"\n  }\n}\n","json","title=\"components.json\" showLineNumbers",[435,447,443],{"__ignoreMap":448},"",[450,451],"hr",{},[453,454,456],"h2",{"id":455},"quick-start","Quick Start",[425,458,459,460,465],{},"Select your MCP client and follow the instructions to configure the shadcn MCP server. If you'd like to do it manually, see the ",[461,462,464],"a",{"href":463},"#configuration","Configuration"," section.",[467,468,472,505,552,583,613,670,715,717,721,729,755,757,761,764,791,793,797,800,830,832,835,838,842,849,855,865,874,876,883,889,892,895,902,905,910,916,924,931,933,944,949,957,960,962,968,975,981,983,987,993,998,1004,1012,1014,1018,1024,1031,1039,1041,1045,1048,1052,1059,1063,1074,1078,1089,1091,1095,1099,1102,1131,1135,1138,1168,1172,1175,1204,1208,1215,1242,1244,1248],"tabs",{"className":469,"default-value":471},[470],"mt-4","claude",[473,474,475,481,487,493,499],"tabs-list",{},[476,477,478],"tabs-trigger",{"value":471},[425,479,480],{},"Claude Code",[476,482,484],{"value":483},"cursor",[425,485,486],{},"Cursor",[476,488,490],{"value":489},"vscode",[425,491,492],{},"VS Code",[476,494,496],{"value":495},"codex",[425,497,498],{},"Codex",[476,500,502],{"value":501},"opencode",[425,503,504],{},"Opencode",[506,507,508,515,523,529,542],"tabs-content",{"value":471},[425,509,510,514],{},[511,512,513],"strong",{},"Run the following command"," in your project:",[439,516,521],{"className":517,"code":519,"language":520,"meta":448},[518],"language-bash","npx shadcn-vue@latest mcp init --client claude\n","bash",[435,522,519],{"__ignoreMap":448},[425,524,525,528],{},[511,526,527],{},"Restart Claude Code"," and try the following prompts:",[530,531,532,536,539],"ul",{},[533,534,535],"li",{},"Show me all available components in the shadcn registry",[533,537,538],{},"Add the button, dialog and card components to my project",[533,540,541],{},"Create a contact form using components from the shadcn registry",[425,543,544,547,548,551],{},[511,545,546],{},"Note:"," You can use ",[435,549,550],{},"/mcp"," command in Claude Code to debug the MCP server.",[506,553,554,558,564,575],{"value":483},[425,555,556,514],{},[511,557,513],{},[439,559,562],{"className":560,"code":561,"language":520,"meta":448},[518],"npx shadcn-vue@latest mcp init --client cursor\n",[435,563,561],{"__ignoreMap":448},[425,565,566,567,570,571,574],{},"Open ",[511,568,569],{},"Cursor Settings"," and ",[511,572,573],{},"Enable the MCP server"," for shadcn. Then try the following prompts:",[530,576,577,579,581],{},[533,578,535],{},[533,580,538],{},[533,582,541],{},[506,584,585,589,595,605],{"value":489},[425,586,587,514],{},[511,588,513],{},[439,590,593],{"className":591,"code":592,"language":520,"meta":448},[518],"npx shadcn-vue@latest mcp init --client vscode\n",[435,594,592],{"__ignoreMap":448},[425,596,566,597,600,601,604],{},[435,598,599],{},".vscode/mcp.json"," and click ",[511,602,603],{},"Start"," next to the shadcn server. Then try the following prompts with GitHub Copilot:",[530,606,607,609,611],{},[533,608,535],{},[533,610,538],{},[533,612,541],{},[506,614,615,631,635,641,650,657,662],{"value":495},[616,617,619],"callout",{"type":618},"warning",[425,620,621,623,624,626,627,630],{},[511,622,546],{}," The ",[435,625,408],{}," CLI cannot automatically update ",[435,628,629],{},"~/.codex/config.toml",". You'll need to add the configuration manually for Codex.",[425,632,633,514],{},[511,634,513],{},[439,636,639],{"className":637,"code":638,"language":520,"meta":448},[518],"npx shadcn-vue@latest mcp init --client codex\n",[435,640,638],{"__ignoreMap":448},[425,642,643,646,647,649],{},[511,644,645],{},"Then, add the following configuration"," to ",[435,648,629],{},":",[439,651,655],{"className":652,"code":653,"language":444,"meta":654},[442],"[mcp_servers.shadcn]\ncommand = \"npx\"\nargs = [\"shadcn-vue@latest\", \"mcp\"]\n","title=\".mcp.json\" showLineNumbers",[435,656,653],{"__ignoreMap":448},[425,658,659,528],{},[511,660,661],{},"Restart Codex",[530,663,664,666,668],{},[533,665,535],{},[533,667,538],{},[533,669,541],{},[506,671,672,675,684,688,694,699,707],{"value":501},[425,673,674],{},"You need to make sure opencode is installed.",[425,676,677,678],{},"To install check ",[461,679,683],{"href":680,"rel":681},"https://opencode.ai/",[682],"nofollow","Opencode Documentation",[425,685,686,514],{},[511,687,513],{},[439,689,692],{"className":690,"code":691,"language":520,"meta":448},[518],"npx shadcn-vue@latest mcp init --client opencode\n",[435,693,691],{"__ignoreMap":448},[425,695,696,528],{},[511,697,698],{},"Restart opencode",[530,700,701,703,705],{},[533,702,535],{},[533,704,538],{},[533,706,541],{},[425,708,709,547,711,714],{},[511,710,546],{},[435,712,713],{},"Ctrl+x s"," to see the status of the mcp servers.\n:",[450,716],{},[453,718,720],{"id":719},"what-is-mcp","What is MCP?",[425,722,723,728],{},[461,724,727],{"href":725,"rel":726},"https://modelcontextprotocol.io",[682],"Model Context Protocol (MCP)"," is an open protocol that enables AI assistants to securely connect to external data sources and tools. With the shadcn MCP server, your AI assistant gains direct access to:",[530,730,731,737,743,749],{},[533,732,733,736],{},[511,734,735],{},"Browse Components"," - List all available components, blocks, and templates from any configured registry",[533,738,739,742],{},[511,740,741],{},"Search Across Registries"," - Find specific components by name or functionality across multiple sources",[533,744,745,748],{},[511,746,747],{},"Install with Natural Language"," - Add components using simple conversational prompts like \"add a login form\"",[533,750,751,754],{},[511,752,753],{},"Support for Multiple Registries"," - Access public registries, private company libraries, and third-party sources",[450,756],{},[453,758,760],{"id":759},"how-it-works","How It Works",[425,762,763],{},"The MCP server acts as a bridge between your AI assistant, component registries and the shadcn CLI.",[765,766,767,773,779,785],"ol",{},[533,768,769,772],{},[511,770,771],{},"Registry Connection"," - MCP connects to configured registries (shadcn/ui, private registries, third-party sources)",[533,774,775,778],{},[511,776,777],{},"Natural Language"," - You describe what you need in plain English",[533,780,781,784],{},[511,782,783],{},"AI Processing"," - The assistant translates your request into registry commands",[533,786,787,790],{},[511,788,789],{},"Component Delivery"," - Resources are fetched and installed in your project",[450,792],{},[453,794,796],{"id":795},"supported-registries","Supported Registries",[425,798,799],{},"The shadcn MCP server works out of the box with any shadcn-compatible registry.",[530,801,802,808,814,820],{},[533,803,804,807],{},[511,805,806],{},"shadcn/ui Registry"," - The default registry with all shadcn/ui components",[533,809,810,813],{},[511,811,812],{},"Third-Party Registries"," - Any registry following the shadcn registry specification",[533,815,816,819],{},[511,817,818],{},"Private Registries"," - Your company's internal component libraries",[533,821,822,825,826,829],{},[511,823,824],{},"Namespaced Registries"," - Multiple registries configured with ",[435,827,828],{},"@namespace"," syntax",[450,831],{},[453,833,464],{"id":834},"configuration",[425,836,837],{},"You can use any MCP client to interact with the shadcn MCP server. Here are the instructions for the most popular ones.",[839,840,480],"h3",{"id":841},"claude-code",[425,843,844,845,848],{},"To use the shadcn MCP server with Claude Code, add the following configuration to your project's ",[435,846,847],{},".mcp.json"," file:",[439,850,853],{"className":851,"code":852,"language":444,"meta":654},[442],"{\n  \"mcpServers\": {\n    \"shadcn\": {\n      \"command\": \"npx\",\n      \"args\": [\"shadcn-vue@latest\", \"mcp\"]\n    }\n  }\n}\n",[435,854,852],{"__ignoreMap":448},[425,856,857,858,860,861,864],{},"After adding the configuration, restart Claude Code and run ",[435,859,550],{}," to see the shadcn MCP server in the list. If you see ",[435,862,863],{},"Connected",", you're good to go.",[425,866,867,868,873],{},"See the ",[461,869,872],{"href":870,"rel":871},"https://docs.anthropic.com/en/docs/claude-code/mcp",[682],"Claude Code MCP documentation"," for more details.",[839,875,486],{"id":483},[425,877,878,879,882],{},"To configure MCP in Cursor, add the shadcn server to your project's ",[435,880,881],{},".cursor/mcp.json"," configuration file:",[439,884,887],{"className":885,"code":852,"language":444,"meta":886},[442],"title=\".cursor/mcp.json\" showLineNumbers",[435,888,852],{"__ignoreMap":448},[425,890,891],{},"After adding the configuration, enable the shadcn MCP server in Cursor Settings.",[425,893,894],{},"Once enabled, you should see a green dot next to the shadcn server in the MCP server list and a list of available tools.",[425,896,867,897,873],{},[461,898,901],{"href":899,"rel":900},"https://docs.cursor.com/en/context/mcp#using-mcp-json",[682],"Cursor MCP documentation",[839,903,492],{"id":904},"vs-code",[425,906,907,908,882],{},"To configure MCP in VS Code with GitHub Copilot, add the shadcn server to your project's ",[435,909,599],{},[439,911,914],{"className":912,"code":852,"language":444,"meta":913},[442],"title=\".vscode/mcp.json\" showLineNumbers",[435,915,852],{"__ignoreMap":448},[425,917,918,919,600,921,923],{},"After adding the configuration, open ",[435,920,599],{},[511,922,603],{}," next to the shadcn server.",[425,925,867,926,873],{},[461,927,930],{"href":928,"rel":929},"https://code.visualstudio.com/docs/copilot/chat/mcp-servers",[682],"VS Code MCP documentation",[839,932,498],{"id":495},[616,934,935],{"type":618},[425,936,937,623,939,626,941,943],{},[511,938,546],{},[435,940,408],{},[435,942,629],{},". You'll need to add the configuration manually.",[425,945,946,947,649],{},"To configure MCP in Codex, add the shadcn server to ",[435,948,629],{},[439,950,955],{"className":951,"code":653,"language":953,"meta":954},[952],"language-toml","toml","title=\"~/.codex/config.toml\" showLineNumbers",[435,956,653],{"__ignoreMap":448},[425,958,959],{},"After adding the configuration, restart Codex to load the MCP server.",[839,961,504],{"id":501},[425,963,964,965,649],{},"To configure MCP in opencode add the shadcn server to ",[435,966,967],{},"opencode.json",[439,969,973],{"className":970,"code":971,"language":444,"meta":972},[442],"{\n    \"$schema\": \"https://opencode.ai/config.json\",\n    \"mcp\": {\n        \"shadcnVue\": {\n            \"type\": \"local\",\n            \"enabled\": true,\n            \"command\": [\"npx\", \"shadcn-vue@latest\", \"mcp\"]\n        }\n    }\n}\n","title=\"opencode.json\" showLineNumbers",[435,974,971],{"__ignoreMap":448},[425,976,867,977,873],{},[461,978,683],{"href":979,"rel":980},"https://opencode.ai/docs/mcp-servers/",[682],[450,982],{},[453,984,986],{"id":985},"configuring-registries","Configuring Registries",[425,988,989,990,992],{},"The MCP server supports multiple registries through your project's ",[435,991,45],{}," configuration. This allows you to access components from various sources including private registries and third-party providers.",[425,994,995,996,649],{},"Configure additional registries in your ",[435,997,45],{},[439,999,1002],{"className":1000,"code":1001,"language":444,"meta":445},[442],"{\n  \"registries\": {\n    \"@acme\": \"https://registry.acme.com/{name}.json\",\n    \"@internal\": {\n      \"url\": \"https://internal.company.com/{name}.json\",\n      \"headers\": {\n        \"Authorization\": \"Bearer ${REGISTRY_TOKEN}\"\n      }\n    }\n  }\n}\n",[435,1003,1001],{"__ignoreMap":448},[616,1005,1007],{"type":1006},"info",[425,1008,1009,1011],{},[511,1010,546],{}," No configuration is needed to access the standard shadcn/ui registry.",[450,1013],{},[453,1015,1017],{"id":1016},"authentication","Authentication",[425,1019,1020,1021,649],{},"For private registries requiring authentication, set environment variables in your ",[435,1022,1023],{},".env.local",[439,1025,1029],{"className":1026,"code":1027,"language":520,"meta":1028},[518],"REGISTRY_TOKEN=your_token_here\nAPI_KEY=your_api_key_here\n","title=\".env.local\"",[435,1030,1027],{"__ignoreMap":448},[425,1032,1033,1034,1038],{},"For more details on registry authentication, see the ",[461,1035,1037],{"href":1036},"/docs/registry/authentication","Authentication documentation",".",[450,1040],{},[453,1042,1044],{"id":1043},"example-prompts","Example Prompts",[425,1046,1047],{},"Once the MCP server is configured, you can use natural language to interact with registries. Try one of the following prompts:",[839,1049,1051],{"id":1050},"browse-search","Browse & Search",[530,1053,1054,1056],{},[533,1055,535],{},[533,1057,1058],{},"Find me a login form from the shadcn registry",[839,1060,1062],{"id":1061},"install-items","Install Items",[530,1064,1065,1068,1071],{},[533,1066,1067],{},"Add the button component to my project",[533,1069,1070],{},"Create a login form using shadcn components",[533,1072,1073],{},"Install the Cursor rules from the acme registry",[839,1075,1077],{"id":1076},"work-with-namespaces","Work with Namespaces",[530,1079,1080,1083,1086],{},[533,1081,1082],{},"Show me components from acme registry",[533,1084,1085],{},"Install @internal/auth-form",[533,1087,1088],{},"Build me a landing page using hero, features and testimonials sections from the acme registry",[450,1090],{},[453,1092,1094],{"id":1093},"troubleshooting","Troubleshooting",[839,1096,1098],{"id":1097},"mcp-not-responding","MCP Not Responding",[425,1100,1101],{},"If the MCP server isn't responding to prompts:",[765,1103,1104,1110,1116,1125],{},[533,1105,1106,1109],{},[511,1107,1108],{},"Check Configuration"," - Verify the MCP server is properly configured and enabled in your MCP client",[533,1111,1112,1115],{},[511,1113,1114],{},"Restart MCP Client"," - Restart your MCP client after configuration changes",[533,1117,1118,1121,1122,1124],{},[511,1119,1120],{},"Verify Installation"," - Ensure ",[435,1123,408],{}," is installed in your project",[533,1126,1127,1130],{},[511,1128,1129],{},"Check Network"," - Confirm you can access the configured registries",[839,1132,1134],{"id":1133},"registry-access-issues","Registry Access Issues",[425,1136,1137],{},"If components aren't loading from registries:",[765,1139,1140,1146,1152,1158],{},[533,1141,1142,1145],{},[511,1143,1144],{},"Check components.json"," - Verify registry URLs are correct",[533,1147,1148,1151],{},[511,1149,1150],{},"Test Authentication"," - Ensure environment variables are set for private registries",[533,1153,1154,1157],{},[511,1155,1156],{},"Verify Registry"," - Confirm the registry is online and accessible",[533,1159,1160,1163,1164,1167],{},[511,1161,1162],{},"Check Namespace"," - Ensure namespace syntax is correct (",[435,1165,1166],{},"@namespace/component",")",[839,1169,1171],{"id":1170},"installation-failures","Installation Failures",[425,1173,1174],{},"If components fail to install:",[765,1176,1177,1186,1192,1198],{},[533,1178,1179,1182,1183,1185],{},[511,1180,1181],{},"Check Project Setup"," - Ensure you have a valid ",[435,1184,45],{}," file",[533,1187,1188,1191],{},[511,1189,1190],{},"Verify Paths"," - Confirm the target directories exist",[533,1193,1194,1197],{},[511,1195,1196],{},"Check Permissions"," - Ensure write permissions for component directories",[533,1199,1200,1203],{},[511,1201,1202],{},"Review Dependencies"," - Check that required dependencies are installed",[839,1205,1207],{"id":1206},"no-tools-or-prompts","No Tools or Prompts",[425,1209,1210,1211,1214],{},"If you see the ",[435,1212,1213],{},"No tools or prompts"," message, try the following:",[765,1216,1217,1226,1232],{},[533,1218,1219,1222,1223],{},[511,1220,1221],{},"Clear the npx cache"," - Run ",[435,1224,1225],{},"npx clear-npx-cache",[533,1227,1228,1231],{},[511,1229,1230],{},"Re-enable the MCP server"," - Try to re-enable the MCP server in your MCP client",[533,1233,1234,1237,1238,1241],{},[511,1235,1236],{},"Check Logs"," - In Cursor, you can see the logs under View -> Output and select ",[435,1239,1240],{},"MCP: project-*"," in the dropdown.",[450,1243],{},[453,1245,1247],{"id":1246},"learn-more","Learn More",[530,1249,1250,1256,1263,1268],{},[533,1251,1252,1255],{},[461,1253,1254],{"href":381},"Registry Documentation"," - Complete guide to shadcn registries",[533,1257,1258,1262],{},[461,1259,1261],{"href":1260},"/docs/registry/namespace","Namespaces"," - Configure multiple registry sources",[533,1264,1265,1267],{},[461,1266,1017],{"href":1036}," - Secure your private registries",[533,1269,1270,1274],{},[461,1271,1273],{"href":725,"rel":1272},[682],"MCP Specification"," - Learn about Model Context Protocol",{"title":448,"searchDepth":1276,"depth":1276,"links":1277},2,[1278,1279,1280,1281,1282,1290,1291,1292,1297,1303],{"id":455,"depth":1276,"text":456},{"id":719,"depth":1276,"text":720},{"id":759,"depth":1276,"text":760},{"id":795,"depth":1276,"text":796},{"id":834,"depth":1276,"text":464,"children":1283},[1284,1286,1287,1288,1289],{"id":841,"depth":1285,"text":480},3,{"id":483,"depth":1285,"text":486},{"id":904,"depth":1285,"text":492},{"id":495,"depth":1285,"text":498},{"id":501,"depth":1285,"text":504},{"id":985,"depth":1276,"text":986},{"id":1016,"depth":1276,"text":1017},{"id":1043,"depth":1276,"text":1044,"children":1293},[1294,1295,1296],{"id":1050,"depth":1285,"text":1051},{"id":1061,"depth":1285,"text":1062},{"id":1076,"depth":1285,"text":1077},{"id":1093,"depth":1276,"text":1094,"children":1298},[1299,1300,1301,1302],{"id":1097,"depth":1285,"text":1098},{"id":1133,"depth":1285,"text":1134},{"id":1170,"depth":1285,"text":1171},{"id":1206,"depth":1285,"text":1207},{"id":1246,"depth":1276,"text":1247},"Use the shadcn MCP server to browse, search, and install components from registries.","md",null,{},"/docs/mcp","---\ntitle: MCP Server\ndescription: Use the shadcn MCP server to browse, search, and install components from registries.\n---\n\nThe shadcn MCP Server allows AI assistants to interact with items from registries. You can browse available components, search for specific ones, and install them directly into your project using natural language.\n\nFor example, you can ask an AI assistant to \"Build a landing page using components from the acme registry\" or \"Find me a login form from the shadcn registry\".\n\nRegistries are configured in your project's `components.json` file.\n\n```json  title=\"components.json\" showLineNumbers\n{\n  \"registries\": {\n    \"@acme\": \"https://acme.com/r/{name}.json\"\n  }\n}\n```\n\n---\n\n## Quick Start\n\nSelect your MCP client and follow the instructions to configure the shadcn MCP server. If you'd like to do it manually, see the [Configuration](#configuration) section.\n\n::tabs{default-value=\"claude\" class=\"mt-4\"}\n\n::tabs-list\n\n  ::tabs-trigger{value=\"claude\"}\n  Claude Code\n  ::\n\n  ::tabs-trigger{value=\"cursor\"}\n  Cursor\n  ::\n\n  ::tabs-trigger{value=\"vscode\"}\n  VS Code\n  ::\n\n   ::tabs-trigger{value=\"codex\"}\n  Codex\n  ::\n\n    ::tabs-trigger{value=\"opencode\"}\n    Opencode\n    ::\n\n::\n\n::tabs-content{value=\"claude\"}\n**Run the following command** in your project:\n\n```bash\nnpx shadcn-vue@latest mcp init --client claude\n```\n\n**Restart Claude Code** and try the following prompts:\n- Show me all available components in the shadcn registry\n- Add the button, dialog and card components to my project\n- Create a contact form using components from the shadcn registry\n\n**Note:** You can use `/mcp` command in Claude Code to debug the MCP server.\n::\n\n::tabs-content{value=\"cursor\"}\n**Run the following command** in your project:\n\n```bash\nnpx shadcn-vue@latest mcp init --client cursor\n```\n\nOpen **Cursor Settings** and **Enable the MCP server** for shadcn. Then try the following prompts:\n- Show me all available components in the shadcn registry\n- Add the button, dialog and card components to my project\n- Create a contact form using components from the shadcn registry\n::\n\n::tabs-content{value=\"vscode\"}\n**Run the following command** in your project:\n\n```bash\nnpx shadcn-vue@latest mcp init --client vscode\n```\n\nOpen `.vscode/mcp.json` and click **Start** next to the shadcn server. Then try the following prompts with GitHub Copilot:\n- Show me all available components in the shadcn registry\n- Add the button, dialog and card components to my project\n- Create a contact form using components from the shadcn registry\n::\n\n::tabs-content{value=\"codex\"}\n  ::callout{type=\"warning\"}\n  **Note:** The `shadcn-vue` CLI cannot automatically update `~/.codex/config.toml`. You'll need to add the configuration manually for Codex.\n  ::\n\n**Run the following command** in your project:\n\n```bash\nnpx shadcn-vue@latest mcp init --client codex\n```\n\n**Then, add the following configuration** to `~/.codex/config.toml`:\n\n```json title=\".mcp.json\" showLineNumbers\n[mcp_servers.shadcn]\ncommand = \"npx\"\nargs = [\"shadcn-vue@latest\", \"mcp\"]\n```\n\n**Restart Codex** and try the following prompts:\n- Show me all available components in the shadcn registry\n- Add the button, dialog and card components to my project\n- Create a contact form using components from the shadcn registry\n::\n::tabs-content{value=\"opencode\"}\n\nYou need to make sure opencode is installed. \n\nTo install check [Opencode Documentation](https://opencode.ai/)\n\n**Run the following command** in your project:\n```bash\nnpx shadcn-vue@latest mcp init --client opencode\n```\n**Restart opencode** and try the following prompts:\n- Show me all available components in the shadcn registry\n- Add the button, dialog and card components to my project\n- Create a contact form using components from the shadcn registry\n\n**Note:** You can use `Ctrl+x s` to see the status of the mcp servers.\n:\n::\n\n---\n\n## What is MCP?\n\n[Model Context Protocol (MCP)](https://modelcontextprotocol.io) is an open protocol that enables AI assistants to securely connect to external data sources and tools. With the shadcn MCP server, your AI assistant gains direct access to:\n\n- **Browse Components** - List all available components, blocks, and templates from any configured registry\n- **Search Across Registries** - Find specific components by name or functionality across multiple sources\n- **Install with Natural Language** - Add components using simple conversational prompts like \"add a login form\"\n- **Support for Multiple Registries** - Access public registries, private company libraries, and third-party sources\n\n---\n\n## How It Works\n\nThe MCP server acts as a bridge between your AI assistant, component registries and the shadcn CLI.\n\n1. **Registry Connection** - MCP connects to configured registries (shadcn/ui, private registries, third-party sources)\n2. **Natural Language** - You describe what you need in plain English\n3. **AI Processing** - The assistant translates your request into registry commands\n4. **Component Delivery** - Resources are fetched and installed in your project\n\n---\n\n## Supported Registries\n\nThe shadcn MCP server works out of the box with any shadcn-compatible registry.\n\n- **shadcn/ui Registry** - The default registry with all shadcn/ui components\n- **Third-Party Registries** - Any registry following the shadcn registry specification\n- **Private Registries** - Your company's internal component libraries\n- **Namespaced Registries** - Multiple registries configured with `@namespace` syntax\n\n---\n\n## Configuration\n\nYou can use any MCP client to interact with the shadcn MCP server. Here are the instructions for the most popular ones.\n\n### Claude Code\n\nTo use the shadcn MCP server with Claude Code, add the following configuration to your project's `.mcp.json` file:\n\n```json title=\".mcp.json\" showLineNumbers\n{\n  \"mcpServers\": {\n    \"shadcn\": {\n      \"command\": \"npx\",\n      \"args\": [\"shadcn-vue@latest\", \"mcp\"]\n    }\n  }\n}\n```\n\nAfter adding the configuration, restart Claude Code and run `/mcp` to see the shadcn MCP server in the list. If you see `Connected`, you're good to go.\n\nSee the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for more details.\n\n### Cursor\n\nTo configure MCP in Cursor, add the shadcn server to your project's `.cursor/mcp.json` configuration file:\n\n```json title=\".cursor/mcp.json\" showLineNumbers\n{\n  \"mcpServers\": {\n    \"shadcn\": {\n      \"command\": \"npx\",\n      \"args\": [\"shadcn-vue@latest\", \"mcp\"]\n    }\n  }\n}\n```\n\nAfter adding the configuration, enable the shadcn MCP server in Cursor Settings.\n\nOnce enabled, you should see a green dot next to the shadcn server in the MCP server list and a list of available tools.\n\nSee the [Cursor MCP documentation](https://docs.cursor.com/en/context/mcp#using-mcp-json) for more details.\n\n### VS Code\n\nTo configure MCP in VS Code with GitHub Copilot, add the shadcn server to your project's `.vscode/mcp.json` configuration file:\n\n```json title=\".vscode/mcp.json\" showLineNumbers\n{\n  \"mcpServers\": {\n    \"shadcn\": {\n      \"command\": \"npx\",\n      \"args\": [\"shadcn-vue@latest\", \"mcp\"]\n    }\n  }\n}\n```\n\nAfter adding the configuration, open `.vscode/mcp.json` and click **Start** next to the shadcn server.\n\nSee the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more details.\n\n### Codex\n\n::callout{type=\"warning\"}\n**Note:** The `shadcn-vue` CLI cannot automatically update `~/.codex/config.toml`. You'll need to add the configuration manually.\n::\n\nTo configure MCP in Codex, add the shadcn server to `~/.codex/config.toml`:\n\n```toml title=\"~/.codex/config.toml\" showLineNumbers\n[mcp_servers.shadcn]\ncommand = \"npx\"\nargs = [\"shadcn-vue@latest\", \"mcp\"]\n```\n\nAfter adding the configuration, restart Codex to load the MCP server.\n\n### Opencode\n\nTo configure MCP in opencode add the shadcn server to `opencode.json`:\n\n```json title=\"opencode.json\" showLineNumbers\n{\n    \"$schema\": \"https://opencode.ai/config.json\",\n    \"mcp\": {\n        \"shadcnVue\": {\n            \"type\": \"local\",\n            \"enabled\": true,\n            \"command\": [\"npx\", \"shadcn-vue@latest\", \"mcp\"]\n        }\n    }\n}\n```\nSee the [Opencode Documentation](https://opencode.ai/docs/mcp-servers/) for more details.\n\n---\n\n## Configuring Registries\n\nThe MCP server supports multiple registries through your project's `components.json` configuration. This allows you to access components from various sources including private registries and third-party providers.\n\nConfigure additional registries in your `components.json`:\n\n```json title=\"components.json\" showLineNumbers\n{\n  \"registries\": {\n    \"@acme\": \"https://registry.acme.com/{name}.json\",\n    \"@internal\": {\n      \"url\": \"https://internal.company.com/{name}.json\",\n      \"headers\": {\n        \"Authorization\": \"Bearer ${REGISTRY_TOKEN}\"\n      }\n    }\n  }\n}\n```\n\n::callout{type=\"info\"}\n**Note:** No configuration is needed to access the standard shadcn/ui registry.\n::\n\n---\n\n## Authentication\n\nFor private registries requiring authentication, set environment variables in your `.env.local`:\n\n```bash title=\".env.local\"\nREGISTRY_TOKEN=your_token_here\nAPI_KEY=your_api_key_here\n```\n\nFor more details on registry authentication, see the [Authentication documentation](/docs/registry/authentication).\n\n---\n\n## Example Prompts\n\nOnce the MCP server is configured, you can use natural language to interact with registries. Try one of the following prompts:\n\n### Browse & Search\n\n- Show me all available components in the shadcn registry\n- Find me a login form from the shadcn registry\n\n### Install Items\n\n- Add the button component to my project\n- Create a login form using shadcn components\n- Install the Cursor rules from the acme registry\n\n### Work with Namespaces\n\n- Show me components from acme registry\n- Install @internal/auth-form\n- Build me a landing page using hero, features and testimonials sections from the acme registry\n\n---\n\n## Troubleshooting\n\n### MCP Not Responding\n\nIf the MCP server isn't responding to prompts:\n\n1. **Check Configuration** - Verify the MCP server is properly configured and enabled in your MCP client\n2. **Restart MCP Client** - Restart your MCP client after configuration changes\n3. **Verify Installation** - Ensure `shadcn-vue` is installed in your project\n4. **Check Network** - Confirm you can access the configured registries\n\n### Registry Access Issues\n\nIf components aren't loading from registries:\n\n1. **Check components.json** - Verify registry URLs are correct\n2. **Test Authentication** - Ensure environment variables are set for private registries\n3. **Verify Registry** - Confirm the registry is online and accessible\n4. **Check Namespace** - Ensure namespace syntax is correct (`@namespace/component`)\n\n### Installation Failures\n\nIf components fail to install:\n\n1. **Check Project Setup** - Ensure you have a valid `components.json` file\n2. **Verify Paths** - Confirm the target directories exist\n3. **Check Permissions** - Ensure write permissions for component directories\n4. **Review Dependencies** - Check that required dependencies are installed\n\n### No Tools or Prompts\n\nIf you see the `No tools or prompts` message, try the following:\n\n1. **Clear the npx cache** - Run `npx clear-npx-cache`\n2. **Re-enable the MCP server** - Try to re-enable the MCP server in your MCP client\n3. **Check Logs** - In Cursor, you can see the logs under View -> Output and select `MCP: project-*` in the dropdown.\n\n---\n\n## Learn More\n\n- [Registry Documentation](/docs/registry) - Complete guide to shadcn registries\n- [Namespaces](/docs/registry/namespace) - Configure multiple registry sources\n- [Authentication](/docs/registry/authentication) - Secure your private registries\n- [MCP Specification](https://modelcontextprotocol.io) - Learn about Model Context Protocol\n",{"title":420,"description":1304},"docs/mcp","gmPEGT09HtvDMvffnG6wPDCkT49gsTrgcS8KRank-tM",[1314,1315],{"title":376,"path":377,"stem":378,"children":-1},{"title":380,"path":381,"stem":382,"children":-1},1775649977108]