{"id":60006,"date":"2026-05-28T01:23:31","date_gmt":"2026-05-28T08:23:31","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=60006"},"modified":"2026-05-28T01:23:31","modified_gmt":"2026-05-28T08:23:31","slug":"build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/","title":{"rendered":"How to build UX using Claude Sonnet 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>Want to create better UX faster?<\/strong> Combine <strong><a href=\"https:\/\/www.anthropic.com\/news\/claude-sonnet-4-5\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a><\/strong>, <strong><a href=\"https:\/\/ui.shadcn.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">shadcn\/ui<\/a><\/strong>, and <strong><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/strong> to simplify your <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-workflow-with-code-components\/\" style=\"display: inline;\">design-to-development workflow<\/a>. Here&#8217;s how these tools work together:<\/p>\n<ul>\n<li><strong>Claude Sonnet 4.5<\/strong>: Generates React + Tailwind components from plain-language prompts, saving time on coding.<\/li>\n<li><strong>shadcn\/ui<\/strong>: A flexible, open-source React component library built on <a href=\"https:\/\/www.radix-ui.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Radix UI<\/a> and <a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Tailwind CSS<\/a>.<\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong>: Lets designers prototype with real, code-backed components for consistent results.<\/li>\n<\/ul>\n<p>This guide walks you through setting up these tools, integrating them, and using them to create production-ready UX. By combining reusable components, AI-powered code generation, and a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-systems\/\" style=\"display: inline;\">UI design system<\/a>, your team can reduce errors, speed up delivery, and maintain consistent designs. Let\u2019s dive in!<\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a1786b95ded517781cb1011-1779930901846.jpg\" alt=\"Claude Sonnet 4.5 + shadcn\/ui + UXPin Merge: Design-to-Dev Workflow\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">Claude Sonnet 4.5 + shadcn\/ui + UXPin Merge: Design-to-Dev Workflow<\/p>\n<\/figcaption><\/figure>\n<h2 id=\"setting-up-your-environment-for-shadcnui-and-claude-sonnet-45\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Setting Up Your Environment for <a href=\"https:\/\/ui.shadcn.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">shadcn\/ui<\/a> and <a href=\"https:\/\/www.anthropic.com\/news\/claude-sonnet-4-5\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a1786b95ded517781cb1011\/b651c79924d256e85c29c66159486dc8.jpg\" alt=\"shadcn\/ui\" style=\"width:100%;\"><\/p>\n<h3 id=\"prerequisites-for-a-us-based-product-team\" tabindex=\"-1\">Prerequisites for a US-Based Product Team<\/h3>\n<p>Before diving in, make sure your machine is equipped with the essentials: the latest LTS version of <a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Node.js<\/a>, a package manager (such as npm, pnpm, yarn, or bun), a React framework like <a href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Next.js<\/a> or <a href=\"https:\/\/vite.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Vite<\/a>, and Git for version control. To ensure compatibility with US standards, configure your project to handle dates in the MM\/DD\/YYYY format and currencies in USD ($). Libraries like <code>date-fns<\/code> or the JavaScript <code>Intl<\/code> object can help with this setup. Once these tools are in place, you&#8217;re ready to install and configure shadcn\/ui.<\/p>\n<h3 id=\"how-to-install-and-configure-shadcnui\" tabindex=\"-1\">How to Install and Configure shadcn\/ui<\/h3>\n<p>To start, navigate to your project root and run the following command:<\/p>\n<pre><code class=\"language-bash\">pnpm dlx shadcn@latest init <\/code><\/pre>\n<p>This initializes a <code>components.json<\/code> file, which acts as the hub for your component library&#8217;s configuration. This file stores project paths, style preferences, and, if needed, credentials for private registries. For teams using private registries, add your registry URL and namespace (e.g., <code>@acme<\/code>) to the <code>registries<\/code> section in <code>components.json<\/code>. Then, include the authentication token in your <code>.env.local<\/code> file as <code>REGISTRY_TOKEN<\/code>.<\/p>\n<p>With shadcn\/ui set up, the next step is to integrate Claude Sonnet into your workflow.<\/p>\n<h3 id=\"how-to-prepare-claude-sonnet-for-shadcnui\" tabindex=\"-1\">How to Prepare Claude Sonnet for shadcn\/ui<\/h3>\n<p>Claude Sonnet uses the <a href=\"https:\/\/modelcontextprotocol.io\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Model Context Protocol<\/a> (MCP) server to interact with shadcn\/ui components. This setup allows Claude to browse, search, and install components from the shadcn registry using simple, natural-language prompts.<\/p>\n<p>To enable this, run the following command:<\/p>\n<pre><code class=\"language-bash\">pnpm dlx shadcn@latest mcp init --client claude <\/code><\/pre>\n<p>This command automatically creates or updates a <code>.mcp.json<\/code> file with the necessary server configuration. Alternatively, you can configure it manually by adding the following to <code>.mcp.json<\/code>:<\/p>\n<pre><code class=\"language-json\">{   &quot;mcpServers&quot;: {     &quot;shadcn&quot;: {       &quot;command&quot;: &quot;npx&quot;,       &quot;args&quot;: [&quot;shadcn@latest&quot;, &quot;mcp&quot;]     }   } } <\/code><\/pre>\n<p>Once configured, Claude can handle prompts like &quot;Add the button, dialog, and card components to my project&quot; or &quot;Create a contact form using components from the shadcn registry&quot;. If Claude encounters issues recognizing components after an update, clear the cache by running <code>npx clear-npx-cache<\/code>, then restart your AI client to reestablish the MCP connection.<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Tool<\/th>\n<th>Configuration File<\/th>\n<th>Purpose<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Node.js \/ Package Manager<\/strong><\/td>\n<td><code>package.json<\/code><\/td>\n<td>Runtime and dependency management<\/td>\n<\/tr>\n<tr>\n<td><strong>shadcn\/ui CLI<\/strong><\/td>\n<td><code>components.json<\/code><\/td>\n<td>Component installation and registry settings<\/td>\n<\/tr>\n<tr>\n<td><strong>MCP Server<\/strong><\/td>\n<td><code>.mcp.json<\/code><\/td>\n<td>Links Claude to shadcn registries<\/td>\n<\/tr>\n<tr>\n<td><strong>Environment Variables<\/strong><\/td>\n<td><code>.env.local<\/code><\/td>\n<td>Handles authentication for private registries<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"shadcns-new-mcp-is-here-build-uis-with-ai-agents-and-claude-code\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Shadcn&#8217;s NEW MCP is Here: Build UIs with AI Agents &amp; Claude Code<\/h2>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/TxsNTqaTrKw\" frameborder=\"0\" loading=\"lazy\" allowfullscreen style=\"width: 100%; height: auto; aspect-ratio: 16\/9;\"><\/iframe><\/p>\n<h2 id=\"integrating-shadcnui-components-into-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Integrating shadcn\/ui Components into <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a1786b95ded517781cb1011\/1cd66cf3ffa0fb3dfd990971e43eb597.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p>Once your environment is set up, the next step is bringing real code components into UXPin Merge. This allows designers to work directly with actual code on the canvas, ensuring a smoother handoff and reducing inconsistencies.<\/p>\n<h3 id=\"how-to-connect-shadcnui-to-uxpin-merge\" tabindex=\"-1\">How to Connect shadcn\/ui to <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a1786b95ded517781cb1011\/4e7c3e43de294fa4f0a0553f7589f4fe.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>After configuring your shadcn\/ui and Claude Sonnet setup, you\u2019ll need to integrate your components into UXPin Merge. Start by cloning the <strong><code>UXPin\/shadcn-merge<\/code><\/strong> repository. This repository is already prepared for seamless integration, including:<\/p>\n<ul>\n<li>A <code>uxpin.config.js<\/code> file to map your components to the UXPin canvas.<\/li>\n<li>A <code>uxpin.webpack.config.js<\/code> file to bundle Radix UI primitives and Tailwind CSS styles properly.<\/li>\n<\/ul>\n<p>Once cloned, run <code>yarn install<\/code> to install the necessary dependencies.<\/p>\n<p>Next, follow these steps to complete the integration:<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Step<\/th>\n<th>Command<\/th>\n<th>Purpose<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Preview<\/strong><\/td>\n<td><code>npx uxpin-merge --disable-tunneling<\/code><\/td>\n<td>View components locally before deployment.<\/td>\n<\/tr>\n<tr>\n<td><strong>Deploy<\/strong><\/td>\n<td><code>npx uxpin-merge push --token &lt;token&gt;<\/code><\/td>\n<td>Push your library to the UXPin cloud.<\/td>\n<\/tr>\n<tr>\n<td><strong>Branch Push<\/strong><\/td>\n<td><code>npx uxpin-merge push --token &lt;token&gt; --branch &lt;name&gt;<\/code><\/td>\n<td>Push a specific branch for testing.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Since Merge <a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" style=\"display: inline;\">connects directly to your Git repository<\/a>, any updates developers make to components are automatically reflected in the designers&#8217; library after the next push. This ensures everyone works from the same source of truth.<\/p>\n<h3 id=\"how-to-validate-component-functionality-in-uxpin\" tabindex=\"-1\">How to Validate Component Functionality in UXPin<\/h3>\n<p>Before rolling out changes to the full team, you can use Experimental Mode to test component interactions. Run <code>npx uxpin-merge --disable-tunneling<\/code> to open a live preview. This preview lets you interact with component props, states, and variants exactly as they function in production React code, making it easier to catch issues early.<\/p>\n<p>Here are two common issues to watch for:<\/p>\n<ol>\n<li><strong>Path Alias Resolution<\/strong>: Ensure your <code>tsconfig.json<\/code> is configured to handle the <code>@\/components<\/code> path aliases used in shadcn\/ui projects.<\/li>\n<li><strong>Tailwind Class Purging<\/strong>: If components appear unstyled, update the <code>safelist<\/code> in your <code>tailwind.config.js<\/code> to include the dynamic utility classes generated by shadcn\/ui as part of your <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/tailwind-css-integration\/\" style=\"display: inline;\">Tailwind CSS integration<\/a>. Without this, the CSS purge step might remove essential styles during the build process.<\/li>\n<\/ol>\n<p>Once your components are rendering and functioning as expected, use the branch push command to share them with a smaller group for additional testing before making them available to the entire team.<\/p>\n<h3 id=\"using-forge-with-shadcnui-in-uxpin\" tabindex=\"-1\">Using <a href=\"https:\/\/www.uxpin.com\/forge\" style=\"display: inline;\">Forge<\/a> with shadcn\/ui in UXPin<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a1786b95ded517781cb1011\/d36391b62bd5c9ab1ca91f7562b99a60.jpg\" alt=\"Forge\" style=\"width:100%;\"><\/p>\n<p>When your shadcn\/ui components are live in UXPin Merge, <strong>Forge<\/strong>, UXPin\u2019s built-in AI assistant, becomes a powerful tool. Forge doesn\u2019t create generic layouts from scratch; instead, it works exclusively with your connected component library. This ensures that every layout it generates uses only the shadcn\/ui components your team has approved and tested. It\u2019s a design process that stays consistent and aligned with your codebase.<\/p>\n<p>Designers can prompt Forge directly within UXPin (no extra AI subscription required) to generate working layouts built entirely from real, developer-ready components. This approach speeds up the design process without introducing patterns or elements that could create inconsistencies or require rework later.<\/p>\n<blockquote>\n<p>&quot;It used to take us two to three months just to do the design. Now, with UXPin Merge, teams can design, test, and deliver products in the same timeframe.&quot; &#8211; Erica Rider, UX Architect and Design Leader <\/p>\n<\/blockquote>\n<h2 id=\"using-claude-sonnet-45-to-generate-shadcnui-components\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Using Claude Sonnet 4.5 to Generate shadcn\/ui Components<\/h2>\n<p>With seamless integration into UXPin Merge, you can now leverage <strong>Claude Sonnet 4.5<\/strong> to create the components you\u2019re missing. The aim? To generate <strong>production-ready code<\/strong> that fits smoothly into your design system without the need for extra adjustments.<\/p>\n<h3 id=\"how-to-write-effective-prompts-for-claude-sonnet\" tabindex=\"-1\">How to Write Effective Prompts for Claude Sonnet<\/h3>\n<p>Claude delivers its best results when you provide detailed prompts that outline your tech stack, component behavior, and coding standards. Here\u2019s an example of a well-crafted prompt:<\/p>\n<blockquote>\n<p>&quot;Generate a React functional component using shadcn\/ui with Tailwind CSS and TypeScript. Create a data table with sortable columns and pagination, use the <code>cn()<\/code> utility for class merging, export a typed <code>Props<\/code> interface, and include JSDoc comments.&quot;<\/p>\n<\/blockquote>\n<p>If your instructions lack specificity, Claude might still produce valid React code, but it may not align with your project\u2019s conventions. To streamline this process, you can use the <strong><a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitHub<\/a> Model Context Protocol (MCP) Registry<\/strong>. This allows Claude to access your design system&#8217;s documentation and coding standards directly, so you don\u2019t have to repeat them in every prompt.<\/p>\n<p>For US-based projects, make sure to adjust your prompts to reflect local standards.<\/p>\n<h3 id=\"adding-us-specific-ux-details-to-generated-components\" tabindex=\"-1\">Adding US-Specific UX Details to Generated Components<\/h3>\n<p>Claude Sonnet 4.5 doesn\u2019t automatically apply American formatting rules, so you\u2019ll need to include them in your prompts. Here are a few key details to specify:<\/p>\n<ul>\n<li><strong>Date inputs<\/strong>: Use the <code>MM\/DD\/YYYY<\/code> format.<\/li>\n<li><strong>Currency fields<\/strong>: Include the dollar symbol with commas for thousands and periods for decimals (e.g., <code>$1,299.99<\/code>).<\/li>\n<li><strong>Measurement inputs<\/strong>: Request imperial units like inches, pounds, and feet instead of metric.<\/li>\n<\/ul>\n<p>A sample prompt could look like this:<br \/> <em>&quot;Format all currency values as USD using the pattern $X,XXX.XX. Display dates in MM\/DD\/YYYY format. Use imperial units for any measurement inputs.&quot;<\/em><\/p>\n<p>By including these details, you ensure consistency and clarity in your components, aligning them with user expectations in the United States.<\/p>\n<h3 id=\"turning-claude-generated-code-into-a-reusable-component-library\" tabindex=\"-1\">Turning Claude-Generated Code into a Reusable Component Library<\/h3>\n<p>Claude\u2019s code is just the first step. Before adding it to your UXPin Merge library, refine it using a quick checklist. For instance, you could ask:<\/p>\n<blockquote>\n<p>&quot;Refactor for reusability. Add a TypeScript <code>Props<\/code> interface, JSDoc documentation for each prop, and ensure all class merging uses the <code>cn()<\/code> utility from shadcn\/ui.&quot; <\/p>\n<\/blockquote>\n<p>Once the code has been cleaned up and typed, save it in your <code>components\/<\/code> directory alongside your existing shadcn\/ui components. Update your <code>uxpin.config.js<\/code> file to map the new component, and then run <code>npx uxpin-merge push<\/code>  to sync it with your library.<\/p>\n<p>By integrating these refined components directly into your design system, you maintain a cohesive and production-ready library.<\/p>\n<blockquote>\n<p>&quot;AI should create interfaces you can actually ship &#8211; not just pretty pictures.&quot; &#8211; UXPin <\/p>\n<\/blockquote>\n<p>This principle ensures that the components you generate are ready for production without requiring additional fixes.<\/p>\n<h2 id=\"building-a-component-driven-ux-workflow-with-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Building a Component-Driven UX Workflow with UXPin Merge<\/h2>\n<p>When you base your workflow on refined components, you create a system that aligns design and development seamlessly. The real power lies in establishing a <strong>repeatable process<\/strong> that your team can rely on. A component-driven approach thrives when designers, developers, and product managers work from the same shared foundation.<\/p>\n<h3 id=\"how-to-improve-design-and-development-collaboration\" tabindex=\"-1\">How to Improve Design and Development Collaboration<\/h3>\n<p>The main advantage of UXPin Merge is straightforward: designers use the <strong>exact components<\/strong> that developers ship. This eliminates the need for translation layers and redlines.<\/p>\n<p>Here\u2019s how it works: developers push updates using the CLI command <code>npx uxpin-merge push --token &lt;library-token&gt;<\/code>. These updates instantly appear in the UXPin canvas, allowing designers to prototype with live components. Meanwhile, product managers benefit from interactive prototypes that mirror real-world behavior. This shared environment not only improves collaboration but also simplifies system governance.<\/p>\n<h3 id=\"managing-design-system-governance\" tabindex=\"-1\">Managing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-governance\/\" style=\"display: inline;\">Design System Governance<\/a><\/h3>\n<p>Governance is often where design systems falter. With shadcn\/ui, your team owns the code &#8211; components live in your repository, giving you full control over updates and modifications. By aligning design tokens with company standards, you reinforce the component-driven approach discussed earlier.<\/p>\n<blockquote>\n<p>&quot;The safest way to customize shadcn-ui components in production is to treat them as your internal design system &#8211; not as a dependency you modify directly.&quot; &#8211; Om-singh-ui, GitHub Contributor <\/p>\n<\/blockquote>\n<p>In practice, this means wrapping base components instead of altering them directly. For instance, you might create a <code>PrimaryButton<\/code> that wraps shadcn\/ui&#8217;s <code>Button<\/code>, applying your brand&#8217;s styles through class-variance-authority (CVA). Your CSS variables and <code>tailwind.config.js<\/code> act as the <strong>single source of truth<\/strong> for tokens like colors and border radius. Update these tokens once, and the changes ripple across all components automatically.<\/p>\n<p>When testing new patterns, use the <code>--branch<\/code> flag:<\/p>\n<pre><code>npx uxpin-merge push --token &lt;token&gt; --branch &lt;branch-name&gt; <\/code><\/pre>\n<p>To avoid token clutter, schedule quarterly reviews to remove unused tokens and keep the system streamlined. Regular maintenance like this ensures the system remains efficient and adaptable.<\/p>\n<h3 id=\"how-to-continuously-improve-the-workflow\" tabindex=\"-1\">How to Continuously Improve the Workflow<\/h3>\n<p>Static workflows often lead to bottlenecks. Successful teams treat their component library as a <strong>living product<\/strong>, continually refining and evolving it.<\/p>\n<p>This involves two key practices. First, monitor the official shadcn\/ui changelog and manually review differences before pulling upstream updates &#8211; since components live in your repository, updates won\u2019t apply automatically. Second, use Experimental Mode (<code>npx uxpin-merge --disable-tunneling<\/code>) to preview and validate new components locally before adding them to the shared library.<\/p>\n<blockquote>\n<p>&quot;Design systems fail when growth means friction. Keep growth boring.&quot; &#8211; Modexa <\/p>\n<\/blockquote>\n<p>The goal isn\u2019t to achieve a flawless system right away. Instead, focus on building a process that your team can trust, improve over time, and rely on consistently.<\/p>\n<h2 id=\"conclusion-scaling-ux-with-claude-sonnet-45-shadcnui-and-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion: Scaling UX with Claude Sonnet 4.5, shadcn\/ui, and UXPin Merge<\/h2>\n<p>Bringing design and code into alignment is the cornerstone of effective UX, and this toolset makes it achievable. Claude Sonnet 4.5, shadcn\/ui, and UXPin Merge offer enterprise teams a streamlined way to move from ideas to production-ready UX. Designers work directly with real components, developers rely on reliable code, and AI steps in to handle repetitive tasks.<\/p>\n<p>The benefits of this approach are clear. Studies indicate that well-developed design systems can cut design and development time by 30\u201350%. When you add Claude Sonnet 4.5\u2019s ability to generate components tailored to US-specific standards, productivity can jump another 20\u201340%.<\/p>\n<p>These efficiency gains create the groundwork for a scalable and maintainable design system. At the heart of this is the <strong>single source of truth<\/strong>: the shadcn\/ui codebase. This codebase governs both the designs created in UXPin and the final products developers deliver. Updates to tokens or compliance requirements automatically cascade across all projects, ensuring consistency and accuracy from the start.<\/p>\n<p>To make the most of this system, focus on a few key practices: follow <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-best-practices\/\" style=\"display: inline;\">design system best practices<\/a> by treating your system as an evolving product with clear ownership, use Claude to amplify your team\u2019s capabilities without replacing engineering expertise, and keep UXPin Merge fully aligned with your primary codebase. Track your progress with measurable metrics like <strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-metrics\/\" style=\"display: inline;\">component reuse rate<\/a><\/strong>, the time it takes to move from concept to production, and how many UI issues are caught before QA. These metrics highlight the incremental improvements that drive a well-oiled workflow.<\/p>\n<p>Scaling UX doesn\u2019t have to mean adding unnecessary complexity. With a solid foundation, growth becomes a manageable and predictable process.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"how-do-i-connect-claude-to-shadcnui-components\" tabindex=\"-1\" data-faq-q>How do I connect Claude to shadcn\/ui components?<\/h3>\n<p>To integrate Claude with <strong>shadcn\/ui components<\/strong> in UXPin, here&#8217;s what you need to do:<\/p>\n<ul>\n<li>Open the <strong>UXPin Editor<\/strong> and navigate to the <strong>Quick Tools<\/strong> panel.<\/li>\n<li>Locate the <strong>AI Component Creator<\/strong> and switch to the <strong>Settings<\/strong> tab.<\/li>\n<li>Input your <strong><a href=\"https:\/\/www.anthropic.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Anthropic<\/a> API key<\/strong> in the designated field.<\/li>\n<li>From the model dropdown, select <strong>Claude Haiku 4.5<\/strong>.<\/li>\n<\/ul>\n<p>Once configured, Claude can create React components using <strong>shadcn\/ui<\/strong>, perfectly suited for production workflows.<\/p>\n<h3 id=\"why-are-my-shadcnui-components-unstyled-in-uxpin-merge\" tabindex=\"-1\" data-faq-q>Why are my shadcn\/ui components unstyled in UXPin Merge?<\/h3>\n<p>If your <strong>shadcn\/ui components<\/strong> look unstyled in UXPin Merge, the issue is probably related to your styling setup. Here\u2019s what to check:<\/p>\n<ul>\n<li><strong>Webpack Configuration<\/strong>: Make sure your project&#8217;s <code>webpackConfig<\/code> supports both PostCSS and Tailwind CSS processing.<\/li>\n<li><strong>Global CSS Variables<\/strong>: Verify that your global CSS file includes the necessary variables like <code>--primary<\/code> and <code>--background<\/code> to ensure consistent theming.<\/li>\n<li><strong>Merge CLI Version<\/strong>: Ensure you&#8217;re using Merge CLI version <strong>3.4.3 or later<\/strong> to guarantee full compatibility.<\/li>\n<\/ul>\n<p>Addressing these areas should resolve the styling issue.<\/p>\n<h3 id=\"whats-the-best-way-to-keep-shadcnui-customizations-maintainable\" tabindex=\"-1\" data-faq-q>What\u2019s the best way to keep shadcn\/ui customizations maintainable?<\/h3>\n<p>To keep <strong>shadcn\/ui<\/strong> customizations manageable, it&#8217;s better to proxy or re-export components using your own code rather than altering them directly. This approach makes updates smoother and ensures compatibility with CLI tools like <code>diff<\/code>. By wrapping <strong>shadcn\/ui<\/strong> components in your own pre-composed versions, you can retain custom styles and behaviors without risking issues when newer versions are released. This method avoids direct edits that could complicate or break updates down the line.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/prototype-claude-opus-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Opus 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Sonnet 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-ui-claude-opus-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to build UI using Claude Opus 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-ui-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to build UI using Claude Sonnet 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=6a1786b95ded517781cb1011\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Generate production-ready shadcn\/ui React components with Claude Sonnet and sync them into UXPin Merge for real-code prototyping.<\/p>\n","protected":false},"author":231,"featured_media":60003,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-60006","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"UXPin Merge: shadcn\/ui + Claude Sonnet","yoast_metadesc":"Generate production-ready shadcn\/ui React components with Claude Sonnet and sync them into UXPin Merge for real-code prototyping.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>UXPin Merge: shadcn\/ui + Claude Sonnet<\/title>\n<meta name=\"description\" content=\"Generate production-ready shadcn\/ui React components with Claude Sonnet and sync them into UXPin Merge for real-code prototyping.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to build UX using Claude Sonnet 4.5 + shadcn\/ui - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Generate production-ready shadcn\/ui React components with Claude Sonnet and sync them into UXPin Merge for real-code prototyping.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-28T08:23:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_56eae0457bc3f146cc1c4ed607c0b3dd.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andrew Martin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andrewSaaS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Martin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"How to build UX using Claude Sonnet 4.5 + shadcn\\\/ui &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-05-28T08:23:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\\\/\"},\"wordCount\":2486,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_56eae0457bc3f146cc1c4ed607c0b3dd.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\\\/\",\"name\":\"UXPin Merge: shadcn\\\/ui + Claude Sonnet\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_56eae0457bc3f146cc1c4ed607c0b3dd.jpeg\",\"datePublished\":\"2026-05-28T08:23:31+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"description\":\"Generate production-ready shadcn\\\/ui React components with Claude Sonnet and sync them into UXPin Merge for real-code prototyping.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_56eae0457bc3f146cc1c4ed607c0b3dd.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_56eae0457bc3f146cc1c4ed607c0b3dd.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UX using Claude Sonnet 4.5 + shadcn\\\/ui - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to build UX using Claude Sonnet 4.5 + shadcn\\\/ui &#8211; Use UXPin Merge!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\",\"name\":\"Andrew Martin\",\"description\":\"Andrew is the CEO of UXPin, leading its product vision for design-to-code workflows used by product and engineering teams worldwide. He writes about responsive design, design systems, and prototyping with real components to help teams ship consistent, performant interfaces faster.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/andrewSaaS\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/andrewuxpin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"UXPin Merge: shadcn\/ui + Claude Sonnet","description":"Generate production-ready shadcn\/ui React components with Claude Sonnet and sync them into UXPin Merge for real-code prototyping.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UX using Claude Sonnet 4.5 + shadcn\/ui - Use UXPin Merge!","og_description":"Generate production-ready shadcn\/ui React components with Claude Sonnet and sync them into UXPin Merge for real-code prototyping.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-05-28T08:23:31+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_56eae0457bc3f146cc1c4ed607c0b3dd.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"How to build UX using Claude Sonnet 4.5 + shadcn\/ui &#8211; Use UXPin Merge!","datePublished":"2026-05-28T08:23:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/"},"wordCount":2486,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_56eae0457bc3f146cc1c4ed607c0b3dd.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/","name":"UXPin Merge: shadcn\/ui + Claude Sonnet","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_56eae0457bc3f146cc1c4ed607c0b3dd.jpeg","datePublished":"2026-05-28T08:23:31+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"description":"Generate production-ready shadcn\/ui React components with Claude Sonnet and sync them into UXPin Merge for real-code prototyping.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_56eae0457bc3f146cc1c4ed607c0b3dd.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_56eae0457bc3f146cc1c4ed607c0b3dd.jpeg","width":1536,"height":1024,"caption":"How to build UX using Claude Sonnet 4.5 + shadcn\/ui - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to build UX using Claude Sonnet 4.5 + shadcn\/ui &#8211; Use UXPin Merge!"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b","name":"Andrew Martin","description":"Andrew is the CEO of UXPin, leading its product vision for design-to-code workflows used by product and engineering teams worldwide. He writes about responsive design, design systems, and prototyping with real components to help teams ship consistent, performant interfaces faster.","sameAs":["https:\/\/x.com\/andrewSaaS"],"url":"https:\/\/www.uxpin.com\/studio\/author\/andrewuxpin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/231"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=60006"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60006\/revisions"}],"predecessor-version":[{"id":60019,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60006\/revisions\/60019"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/60003"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=60006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=60006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=60006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}