pieces

[Web Browser Content] Aceternity UI CLI Documentation Add the MCP server to your project: Command: npx shadcn@latest mcp init Registries are configured in your project's components.json file. Configure for AI Assistants: - Cursor - Claude Desktop - VS Code Templates available: - Simplistic SaaS - Nodus Marketing - Agenforce Marketing - Startup Landing Page - Proactiv Marketing - Minimal Portfolio - Cryptgen Marketing - Playful Marketing - Agenlabs Agency - Devpro Portfolio - Foxtrot Marketing - Sidefolio Portfolio A product by Aceternity. Building in public at @mannupaajj.

[SUGGESTED_QUERY] How to configure MCP server for AI assistants

[SUGGESTED_QUERY] how to setup shadcn mcp with claude

[SUGGESTED_QUERY] shadcn mcp initialization command

Tag: cli-initialization Source: CLOUD_LLM

[Command-Line Output] Next.js 15 and React 19 Framer Motion Fix If you're using Next.js 15 and React 19, you'll need to make the following changes in order to use framer-motion (which is now motion), since framer-motion is not compatible with React 19 yet. Dependencies: "framer-motion": "12.0.0-alpha.1", "next": "15.0.3", "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", "tailwind-merge": "5.5" Overrides: "framer-motion": { "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106" } If you're using motion instead of framer-motion, you can make the following changes: Dependencies: "motion": "12.0.0-alpha.1", "next": "15.0.3", "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", "tailwind-merge": "5.5" Overrides: "motion": { "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106" } shadcn MCP Server The shadcn MCP Server allows AI assistants to interact with registries. You can browse available components and search directly into your project using natural language. Add the Aceterntty registry to your project's components.json file: "registries": { "@aceterntty": "https://ut.aceterntty.com/regtstry/{name}.json" } Add the MCP server to your project: npx shadcn@latest mcp init Configure for AI Assistants (Cursor, Claude Desktop, VS Code): npx shadcn@latest mcp init --client cursor List components: npx shadcn@latest list @aceterntty

Website: https://ut.aceterntty.com/regtstry/%7Bname%7D.json

[SUGGESTED_QUERY] configure Aceterntty registry in components.json

[SUGGESTED_QUERY] shadcn MCP server setup instructions

[SUGGESTED_QUERY] Next.js 15 React 19 Framer Motion configuration

Website: https://ut.aceterntty.com/regtstry/{name}.json

bash npx shadcn@latest mcp init --client claude

[Web Browser Content] Aceternity UI CLI Documentation Installation and Usage: Use the init command to initialize configuration and dependencies for a new project: npx shadcn@latest init Add components to your project: npx shadcn@latest add [component] Monorepo support: Specify the path to your workspace with the -c or --cwd option: npx shadcn@latest init -c ./apps/www Installing Aceternity UI components: npx shadcn@latest add https://ui.aceternity.com/registry/[component].json Configuring for AI Assistants (Cursor, Claude Desktop, VS Code): npx shadcn@latest mcp init --client cursor Registries configuration: Edit your components.json file to include: "registries": { "@aceternity": "https://ui.aceternity.com/registry/{name}.json" } Then install components using: npx shadcn@latest add @aceternity/[component]

[SUGGESTED_QUERY] Configure Aceternity UI for AI assistants

[SUGGESTED_QUERY] How to use shadcn CLI with Aceternity

[SUGGESTED_QUERY] Aceternity UI CLI installation guide

Tag: cli-documentation Source: CLOUD_LLM

[SUGGESTED_QUERY] using shadcn mcp server with cursor

[SUGGESTED_QUERY] shadcn cli monorepo configuration

[SUGGESTED_QUERY] how to install aceternity ui with shadcn cli

Website: https://ui.aceternity.com/registry/{name}.json

Website: https://ui.aceternity.com/registry/[component].json

CLI Installing Aceternity UI with the Shadcn CLI Initialization Use the init command to initialize configuration and dependencies for a new project. The init command installs dependencies, adds the cn util, configures tailwind.config.js, and CSS variables for the project. npm pnpm yarn bun bash npx shadcn@latest init You will be asked a few questions to configure components.json: Which style would you like to use? › New York Which color would you like to use as base color? › Zinc Do you want to use CSS variables for colors? › no / yes Copy Options Usage: shadcn init [options] [components...] initialize your project and install dependencies Arguments: components the components to add or a url to the component. Options: -d, --defaults use default values i.e new-york, zinc and css variables. (default: false) -f, --force force overwrite of existing components.json. (default: false) -y, --yes skip confirmation prompt. (default: false) -c, --cwd <cwd> the working directory. defaults to the current directory. -h, --help display help for command Copy add Use the add command to add components and dependencies to your project. npm pnpm yarn bun bash npx shadcn@latest add [component] Options Usage: shadcn add [options] [components...] add a component to your project Arguments: components the components to add or a url to the component. Options: -y, --yes skip confirmation prompt. (default: false) -o, --overwrite overwrite existing files. (default: false) -c, --cwd <cwd> the working directory. defaults to the current directory. -p, --path <path> the path to add the component to. -h, --help display help for command Copy Monorepo In a monorepo, you can specify the path to your workspace with the -c or --cwd option. npm pnpm yarn bun bash npx shadcn@latest init -c ./apps/www or npm pnpm yarn bun bash npx shadcn@latest add alert-dialog -c ./apps/www Installation through CLI You can install Aceternity UI components through the CLI. Use the following command structure: npm pnpm yarn bun bash npx shadcn@latest add https://ui.aceternity.com/registry/[component].json Adds a new component to your project. npm pnpm yarn bun bash npx shadcn@latest add https://ui.aceternity.com/registry/bento-grid.json Shadcn CLI 3.0 You can now have namespaced registries with ShadCN CLI 3.0. Edit components.json file Edit your components.json file and add the following code: components.json { "registries": { "@aceternity": "https://ui.aceternity.com/registry/{name}.json" } } Copy To install any component, use the following command: npm pnpm yarn bun bash npx shadcn@latest add @aceternity/[component] Example: npm pnpm yarn bun bash npx shadcn@latest add @aceternity/3d-marquee Search and Discovery You can search, view, and discover components from registries before installing them. View View items from the registry before installing: npm pnpm yarn bun bash npx shadcn@latest view @aceternity Search Search items from registries: npm pnpm yarn bun bash npx shadcn@latest search @aceternity -q "card" List List all items from a registry: npm pnpm yarn bun bash npx shadcn@latest list @aceternity Preview components before installing them. Search across multiple registries. See the code and all dependencies upfront. MCP Server 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. For example, you can ask an AI assistant to "Build a landing page using components from the Aceternity registry" or "Find me a login form from the Aceternity registry". Add the Aceternity registry to your project's components.json file. components.json { "registries": { "@aceternity": "https://ui.aceternity.com/registry/{name}.json" } } Copy Add the MCP server to your project: npm pnpm yarn bun bash npx shadcn@latest mcp init Registries are configured in your project's components.json file. Configure for AI Assistants Cursor Claude Desktop VS Code bash npx shadcn@latest mcp init --client cursor

Website: https://ui.aceternity.com/registry/%7Bname%7D.json

Website: https://ui.aceternity.com/registry/bento-grid.json

Website: https://ui.aceternity.com/registry/%5Bcomponent%5D.json

[Command-Line Output] North Valley Add the Tailwind directives to your CSS globals.css @tailwind base; @tailwind components; @tailwind utilities; Start your build process npm run dev Start using Tailwind index.tsx export default function Home() { return <h1 className="text-3xl font-bold">Hello world!</h1>; } Key Differences in v4 - CSS-First Configuration: Theme configuration is now done in CSS using the @theme inline directive. - New Import Syntax: Use @import "tailwindcss" instead of the three @tailwind directives. - Package Changes: PostCSS plugin is now @tailwindcss/postcss; CLI is now @tailwindcss/cli. - Native CSS Cascade Layers: Uses real CSS @layer instead of Tailwind's custom implementation. - CSS Variables: All design tokens are available as CSS variables (e.g., --color-blue-500, --font-sans). For more advanced configuration options in v4: /* Custom utilities */ @utility container { margin-inline: auto; padding-inline: 2rem; } /* Custom variants */ @variant dark (&:where(.dark, .dark *)); /* Add plugins */ @plugin "@tailwindcss/typography"; tailwind.config.js Next.js 15 and React 19 Framer Motion Fix If you're using Next.js 15 and React 19, you'll need to make the following changes in order to use framer-motion (which is now motion): Dependencies: "framer-motion": "12.0.0-alpha.1", "next": "15.0.3", "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", "tailwind-merge": "2.5.5" Overrides: "framer-motion": "12.0.0-alpha.1", "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106"

[SUGGESTED_QUERY] Tailwind CSS directives and configuration changes

[SUGGESTED_QUERY] Tailwind CSS v4 migration guide

[Web Browser Content] Aceternity UI - Add Utilities Installation Install Next.js Install Tailwind CSS Add utilities Add Utilities Commonly used utilities for using Aceternity UI Install dependencies npm i motion clsx tailwind-merge Add util file lib/utils.ts import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } Next.js 15 and React 19 Framer Motion Fix If you're using Next.js 15 and React 19, you'll need to make changes to use motion (formerly framer-motion), as framer-motion is not yet compatible with React 19. Dependencies configuration: "dependencies": { "motion": "12.0.0-alpha.1", "next": "15.0.3", "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", "tailwind-merge": "..." } "overrides": { "motion": { "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106" } }

[SUGGESTED_QUERY] lib/utils.ts tailwind-merge configuration

[SUGGESTED_QUERY] Next.js 15 React 19 framer motion fix

[SUGGESTED_QUERY] Aceternity UI add utilities setup

Tag: react-19 Source: CLOUD_LLM

Website: https://ui.aceternity.com/docs/cli

Website: https://ui.aceternity.com/docs/add-utilities

[SUGGESTED_QUERY] npm dependencies for Aceternity UI

[SUGGESTED_QUERY] Next.js 15 React 19 framer motion configuration

[SUGGESTED_QUERY] Aceternity UI utility setup

Tag: dependency-management Source: CLOUD_LLM

Add Utilities Commonly used utilities for using Aceternity UI Install dependencies npm i motion clsx tailwind-merge Copy Add util file lib/utils.ts import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } Copy Select Language Next.js 15 and React 19 Framer Motion Fix if you're using Next.js 15 and React 19, you'll need to the following changes in order to use framer motion (which is now motion), since framer motion is not compatible with React 19 yet. "dependencies": { "framer-motion": "^12.0.0-alpha.1", "next": "15.0.3", "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", "tailwind-merge": "^2.5.5" }, "overrides": { "framer-motion": { "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106" } }, Copy if you're using motion instead of framer-motion, you can make the following changes: "dependencies": { "motion": "^12.0.0-alpha.1", "next": "15.0.3", "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", "tailwind-merge": "^2.5.5" }, "overrides": { "motion": { "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106" } },

[Command-Line Output] North Valley ... [honcho] post-tool-use -4 captured: L PostToolUse:Wrtte says: function call_gemtnt) le7a1HKzJr6dKq5sBZE" L Running... (1m 3s timeout 10m) (ctrl+b to run in background) * Roosting... (2m 22s 4.9k tokens) Install Next. js Install Next. js with Create Next App Create a new project npx create-next-app@latest On installation, you'll see the following prompts: What is your project named? my-app ... Wrote D:\Ecosystem\tools\Development-Translatton-Brtdge\scrtpts\regen-tnfographtcs-nano-banana-2.py ... Key Differences in v4 CSS-First Configuration: Theme configuration is now done in CSS using the @theme inline directive instead of tailwind. config.js New Import Syntax: Use @tmport "tailwindcss" instead of the three @tatlwtnd directives Package Changes: PostCSS plugin is now @tatlwtndcss/postcss CLI is now @tatlwtndcss/clt Native CSS Cascade Layers: Uses real CSS @layer instead of Tailwind's custom implementation CSS Variables: All design tokens are available as CSS variables (e.g., --color-blue-500, --font-sans)

[SUGGESTED_QUERY] Python script for infographic generation

[SUGGESTED_QUERY] Next.js project setup with Tailwind CSS

[Web Browser Content] Aceternity UI - Install Tailwind CSS Installation Guide: 1. Install Next.js 2. Install Tailwind CSS 3. Add utilities Configuration Files: - app/globals.css: Add @import "tailwindcss"; and theme variables. - postcss.config.js: Update plugins to include "@tailwindcss/postcss". - tailwind.config.ts: Configure template paths for content. Key Differences in v4: - CSS-First Configuration using @theme inline. - New import syntax: @import "tailwindcss". - PostCSS plugin is now @tailwindcss/postcss. - Native CSS Cascade Layers support. - Design tokens available as CSS variables.

[SUGGESTED_QUERY] Tailwind CSS v4 configuration changes

[SUGGESTED_QUERY] Aceternity UI Tailwind configuration

[SUGGESTED_QUERY] Tailwind CSS installation guide Next.js

Tag: frontend-framework Source: CLOUD_LLM

[SUGGESTED_QUERY] How to configure PostCSS for Tailwind CSS