BuildWithMe UI / Handbook
From discovery to a working interface.
Install source into an existing application. These recipes target Next.js, Nuxt 4, and SvelteKit; npm packages remain unpublished. Start with your framework below.
Prepare the existing project
Run commands at your application root. Use Node.js 22+ and pnpm. Keep your existing components.json and application configuration: merge the relevant fields below rather than replacing either file. The documented CLI transport uses @/ mapped to src/ and a src/app.css file (create an empty file if missing; preserve an existing file). BuildWithMe source imports its own CSS and does not require you to restyle the application with Tailwind. If you already configured shadcn, preserve its CSS path and aliases and inspect the resulting file locations.
Resolve the CLI transport alias
Merge this @/* mapping into the compilerOptions.paths used by your application TypeScript configuration. Keep all existing path entries and extends settings. This alias locates the transport output; it does not replace Nuxt ~/ or SvelteKit $lib. If @/ already points somewhere else, preserve it and inspect that output location instead. For Nuxt and SvelteKit, use this mapping only during the CLI step, then restore your previous TypeScript configuration after moving the folders. Keep native aliases and never edit generated .nuxt or .svelte-kit configuration files.
{
"compilerOptions": {
"paths": {
"@/*": [
"./src/*"
]
}
}
}React / Next.js
Use an existing Next.js App Router application with React and TypeScript. Configure @/ to resolve to src/. Merge this components.json transport configuration. Point @/* at ./src/* in your existing TypeScript paths; Nuxt and SvelteKit keep their generated TypeScript configuration and native aliases.
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/app.css",
"baseColor": "neutral",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
}
}Install and locate the source
Keep the complete installed folder in src/components/buildwithme. Interactive components retain use client; put application state and event handlers in a client component. The default transport receives components/buildwithme/magnetic-button under src/. Inspect the CLI output before importing. Keep the complete folder, including CSS, helpers, artwork modules when present, LICENSE, and THIRD_PARTY_NOTICES.md. For a custom project layout, adjust the destination and usage import together.
pnpm dlx shadcn@latest add https://build-with-me-ui.vercel.app/r/react/magnetic-button.jsonRender the first component
Use this manifest-authored example after placing the folder. The source imports its styles. Wrap the rendered component in an element with data-bwm-theme="dark" or data-bwm-theme="light" to set its theme independently from your application. React state and callback handlers belong in a client component. Choose Animated Tabs in the integration examples to try application data and controlled state.
import MagneticButton from "@/components/buildwithme/magnetic-button/react";
<MagneticButton />Vue / Nuxt
Use an existing Nuxt 4 application with Vue 3 and TypeScript. The ~/ alias resolves to app/ in the documented default layout. Merge this components.json transport configuration. Point @/* at ./src/* in your existing TypeScript paths; Nuxt and SvelteKit keep their generated TypeScript configuration and native aliases.
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/app.css",
"baseColor": "neutral",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
}
}Install and locate the source
The handbook CLI configuration delivers files into src/components/buildwithme. Move each complete component folder into app/components/buildwithme, then import it explicitly through ~/. Preserve existing Nuxt aliases and adapt the destination if your srcDir differs. The default transport receives components/buildwithme/magnetic-button under src/. Inspect the CLI output before importing. Keep the complete folder, including CSS, helpers, artwork modules when present, LICENSE, and THIRD_PARTY_NOTICES.md. For a custom project layout, adjust the destination and usage import together.
pnpm dlx shadcn@latest add https://build-with-me-ui.vercel.app/r/vue/magnetic-button.jsonRender the first component
Use this manifest-authored example after placing the folder. The source imports its styles. Wrap the rendered component in an element with data-bwm-theme="dark" or data-bwm-theme="light" to set its theme independently from your application. React state and callback handlers belong in a client component. Choose Animated Tabs in the integration examples to try application data and controlled state.
<script setup lang="ts">
import MagneticButton from "~/components/buildwithme/magnetic-button/vue.vue";
</script>
<template>
<MagneticButton />
</template>Svelte / SvelteKit
Use an existing SvelteKit application with Svelte 5 and TypeScript. The $lib alias resolves to src/lib/. Merge this components.json transport configuration. Point @/* at ./src/* in your existing TypeScript paths; Nuxt and SvelteKit keep their generated TypeScript configuration and native aliases.
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/app.css",
"baseColor": "neutral",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
}
}Install and locate the source
The handbook CLI configuration delivers files into src/components/buildwithme. Move each complete component folder into src/lib/components/buildwithme, then import it through $lib. Preserve your existing SvelteKit configuration. The default transport receives components/buildwithme/magnetic-button under src/. Inspect the CLI output before importing. Keep the complete folder, including CSS, helpers, artwork modules when present, LICENSE, and THIRD_PARTY_NOTICES.md. For a custom project layout, adjust the destination and usage import together.
pnpm dlx shadcn@latest add https://build-with-me-ui.vercel.app/r/svelte/magnetic-button.jsonRender the first component
Use this manifest-authored example after placing the folder. The source imports its styles. Wrap the rendered component in an element with data-bwm-theme="dark" or data-bwm-theme="light" to set its theme independently from your application. React state and callback handlers belong in a client component. Choose Animated Tabs in the integration examples to try application data and controlled state.
<script lang="ts">
import MagneticButton from "$lib/components/buildwithme/magnetic-button/svelte.svelte";
</script>
<MagneticButton />Recover from installation problems
Missing components.json: add the transport configuration above or merge it into the existing file. Unresolved alias: check the actual destination and the alias used by the import. Missing CSS or helper: restore the entire installed folder, including relative dependencies; moving only the entry file is insufficient. React server-boundary errors: retain the source use client directive and place callbacks in your own client component. Clipboard unavailable: use the manual-copy field shown after a failed copy, or select the command directly. Before reinstalling, review local edits; do not overwrite customized source blindly.
What installation verification means
The local CLI consumer suite installs Animated Tabs, Magnetic Button, and Code Snippet into isolated applications, then checks files, type checking, builds, and interactions. This is sample coverage, not verification of every component contract or an endorsement of every framework version. See the repository compatibility guide for tested versions. Package publication remains unavailable.