### Install Figma MCP Instructions for GitHub Copilot Source: https://shadcnstudio.com/docs/getting-started/figma-to-code-mcp-server This command downloads setup instructions for GitHub Copilot to understand and work with Figma MCP and shadcn/studio components. It creates a `.github/instructions` directory if it doesn't exist. ```bash curl --create-dirs -o .github/instructions/figma-mcp.instructions.md https://cdn.shadcnstudio.com/ss-assets/mcp/instructions/figma-mcp-copilot-instructions.md ``` -------------------------------- ### Install Components via shadcn CLI v2 - Bash Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli Uses npx to run the legacy shadcn CLI and add components, blocks, or themes directly from URLs. Suitable for free content installations without authentication. ```bash npx shadcn@latest add "https://shadcnstudio.com/r/[name].json" npx shadcn@latest add "https://shadcnstudio.com/r/components/[component-name].json" npx shadcn@latest add "https://shadcnstudio.com/r/blocks/[block-name].json" npx shadcn@latest add "https://shadcnstudio.com/r/themes/[theme-name].json" ``` -------------------------------- ### Installing Free Blocks with Shadcn CLI Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli Add free blocks like hero sections using CLI v3 or v2 without auth. These are pre-built UI sections for quick integration. No additional setup needed beyond CLI execution. ```bash # Using CLI v3 (Recommended) npx shadcn@latest add @shadcn-studio/hero-section-01 npx shadcn@latest add @ss-blocks/hero-section-01 # Using CLI v2 npx shadcn@latest add "https://shadcnstudio.com/r/hero-section-01.json" npx shadcn@latest add "https://shadcnstudio.com/r/blocks/hero-section-01.json" ``` -------------------------------- ### Installing Premium Blocks with Shadcn CLI Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli Install premium blocks authenticated via parameters in CLI v2 or scoped in v3. Provides advanced block layouts; requires valid license. Outputs to project structure automatically. ```bash # Using CLI v3 (Recommended) npx shadcn@latest add @ss-blocks/hero-section-02 # Using CLI v2 (with authentication) npx shadcn@latest add "https://shadcnstudio.com/r/blocks/hero-section-02.json?email={YOUR_EMAIL}&license_key={YOUR_LICENSE_KEY}" ``` -------------------------------- ### Installing Premium Components with Shadcn CLI Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli Install premium components requiring authentication via email and license key. Use CLI v3 for scoped packages or v2 with URL parameters. Depends on valid credentials; integrates advanced functionality into the project. ```bash # Using CLI v3 (Recommended) npx shadcn@latest add @ss-components/[premium-component-name] # Using CLI v2 (with authentication) npx shadcn@latest add "https://shadcnstudio.com/r/components/[premium-component-name].json?email={YOUR_EMAIL}&license_key={YOUR_LICENSE_KEY}" ``` -------------------------------- ### Installing with Package Managers like PNPM Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli Use pnpm or other managers with Shadcn CLI for free and premium content. CLI v3 recommended; v2 needs URL auth params. Compatible with pnpm, npm, yarn, bun; installs via dlx. ```bash # Using CLI v3 (Recommended) # Free content only pnpm dlx shadcn@latest add @shadcn-studio/[name] # Using CLI v3 (Recommended) # Free + Premium content (Pro items need authentication) pnpm dlx shadcn@latest add @ss-components/[name] pnpm dlx shadcn@latest add @ss-blocks/[name] pnpm dlx shadcn@latest add @ss-themes/[name] # Using CLI v2 # Free content only pnpm dlx shadcn@latest add "https://shadcnstudio.com/r/[name].json" # Using CLI v2 # Free + Premium content (Pro items need authentication) pnpm dlx shadcn@latest add "https://shadcnstudio.com/r/components/[name].json?email={YOUR_EMAIL}&license_key={YOUR_LICENSE_KEY}" pnpm dlx shadcn@latest add "https://shadcnstudio.com/r/blocks/[name].json?email={YOUR_EMAIL}&license_key={YOUR_LICENSE_KEY}" pnpm dlx shadcn@latest add "https://shadcnstudio.com/r/themes/[name].json?email={YOUR_EMAIL}&license_key={YOUR_LICENSE_KEY}" ``` -------------------------------- ### Installing Multiple Items with Shadcn CLI Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli Add multiple components, blocks, or themes in one command using space-separated arguments. Supports mixing free and premium with appropriate auth. Efficient for batch installations; CLI v3 preferred. ```bash # Using CLI v3 - Free content only npx shadcn@latest add @shadcn-studio/button-01 @ss-blocks/hero-section-01 @ss-themes/art-deco # Using CLI v2 - Free content only npx shadcn@latest add "https://shadcnstudio.com/r/button-01.json" "https://shadcnstudio.com/r/blocks/hero-section-01.json" "https://shadcnstudio.com/r/themes/art-deco.json" # Using CLI v3 - Mix of free and premium registries npx shadcn@latest add @ss-components/button-01 ``` -------------------------------- ### Installing Premium and User-Generated Themes with Shadcn CLI Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli Install premium or user-generated themes with authentication for CLI v2 or scoped v3. Fonts must be added manually to layout; supports custom styling needs with license validation. ```bash # Using CLI v3 (Recommended) npx shadcn@latest add @ss-themes/[premium-theme-name] npx shadcn@latest add @ss-themes/[user-generated-theme-name] # Using CLI v2 (with authentication) npx shadcn@latest add "https://shadcnstudio.com/r/themes/[premium-theme-name].json?email={YOUR_EMAIL}&license_key={YOUR_LICENSE_KEY}" npx shadcn@latest add "https://shadcnstudio.com/r/themes/[user-generated-theme-name].json?email={YOUR_EMAIL}&license_key={YOUR_LICENSE_KEY}" ``` -------------------------------- ### Installing Free Themes with Shadcn CLI Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli Add free themes like art-deco using CLI v3 or v2; manual font installation from Google Fonts required post-add. Themes style the entire app; no auth needed for free ones. ```bash # Using CLI v3 (Recommended) npx shadcn@latest add @shadcn-studio/art-deco npx shadcn@latest add @ss-themes/art-deco # Using CLI v2 npx shadcn@latest add "https://shadcnstudio.com/r/art-deco.json" npx shadcn@latest add "https://shadcnstudio.com/r/themes/art-deco.json" ``` -------------------------------- ### Installing Free Components with Shadcn CLI Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli Install free components using CLI v3 or v2 commands without authentication. These add enhanced shadcn/ui components with styling to your project. Outputs integrated code files; no dependencies beyond the CLI. ```bash # Using CLI v3 (Recommended) npx shadcn@latest add @shadcn-studio/button-01 npx shadcn@latest add @ss-components/button-01 # Using CLI v2 npx shadcn@latest add "https://shadcnstudio.com/r/button-01.json" npx shadcn@latest add "https://shadcnstudio.com/r/components/button-01.json" ``` -------------------------------- ### Configure shadcn CLI v3 Registries (Free + Premium) - JSON Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli Sets up registries for both free and premium content, including credential parameters for authentication. Insert this JSON into components.json and ensure EMAIL and LICENSE_KEY are provided via environment variables. ```json { "registries": { "@shadcn-studio": "https://shadcnstudio.com/r/{name}.json", "@ss-components": { "url": "https://shadcnstudio.com/r/components/{name}.json", "params": { "email": "${EMAIL}", "license_key": "${LICENSE_KEY}" } }, "@ss-blocks": { "url": "https://shadcnstudio.com/r/blocks/{name}.json", "params": { "email": "${EMAIL}", "license_key": "${LICENSE_KEY}" } }, "@ss-themes": { "url": "https://shadcnstudio.com/r/themes/{name}.json", "params": { "email": "${EMAIL}", "license_key": "${LICENSE_KEY}" } } } } ``` -------------------------------- ### Configure shadcn CLI v3 Registries (Free Content) - JSON Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli Defines the registry URLs free components, blocks, and themes used by shadcn CLI v3. Place this JSON in your project's components.json file. No authentication is required for these registries. ```json { "registries": { "@shadcn-studio": "https://shadcnstudio.com/r/{name}.json", "@ss-components": "https://shadcnstudio.com/r/components/{name}.", "@ss-blocks": "https://shadcnstudio.com/r/blocksname}.json", "@ss-themes": "https://shadcnstudio.com/r/themes/{name}.json" } } ``` -------------------------------- ### Set Environment Variables for shadcn CLI Credentials - dotenv Source: https://shadcnstudio.com/docs/getting-started/how-to-use-shadcn-cli Creates a .env file with placeholders for your email and license key, which the CLI will substitute during installation. Remember to add .env to .gitignore to keep credentials secret. ```env # .env EMAIL={YOUR_EMAIL} LICENSE_KEY={YOUR_LICENSE_KEY} ``` -------------------------------- ### Configure Next.js Image Loader for Figma MCP Server Source: https://shadcnstudio.com/docs/getting-started/shadcn-studio-mcp-server This configuration updates the Next.js next.config.ts file to enable loading images from the Figma MCP server running on localhost port 3845. It requires a Next.js project with shadcn/ui initialized and uses the images.remotePatterns option to allow specific hostnames. Limitations include restricting to HTTP protocol and the exact port; adjust if the server port changes. ```typescript import type { NextConfig } from "next"; const nextConfig: NextConfig = { images: { remotePatterns: [ { protocol: "http", hostname: "localhost", port: "3845" }, ], }, }; export default nextConfig; ``` -------------------------------- ### Next.js Image Loader Configuration for Figma MCP Source: https://shadcnstudio.com/docs/getting-started/figma-to-code-mcp-server Configures the image loader in `next.config.ts` to allow your Next.js application to load images from the Figma MCP server running on `localhost` port `3845`. This is essential for displaying Figma-generated assets. ```typescript import type { NextConfig } from "next"; const nextConfig: NextConfig = { images: { remotePatterns: [ { protocol: "http", hostname: "localhost", port: "3845", }, ], }, }; export default nextConfig; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.