Installation

The fastest way to add Motion Kit components to your project is using the shadcn CLI. Simply run the add command with our registry URL:

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/<component-name>.json

Replace <component-name> with the component you want to install. For example, to install the magnetic component:

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/magnetic.json

The CLI will automatically:

• Download the component source files
• Install required dependencies (GSAP, Lit, etc.)
• Place files in the correct directories
• Update your package dependencies

Motion Kit ships Lit-based custom elements as source. If your project compiles TypeScript, enable decorators in your tsconfig.json before importing the component:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

If you prefer manual setup or need more control, you can configure Motion Kit components manually:

1. Install Dependencies

pnpm add gsap lit

2. Copy Component Files

Browse our components and copy the source files directly into your project. Each component page shows you the exact files you need.

3. Configure Your Project

Make sure your build tool can handle Web Components and TypeScript. If you compile TypeScript source from the registry, enable experimentalDecorators in your tsconfig.json.

4. Register Custom Elements

Import and register the custom elements in your client code:

import "./magnetic-element";

// The component registers itself automatically.
// Use it in your HTML:
<magnetic-lit></magnetic-lit>

Motion Kit components work best in a standard project structure. Here's a recommended setup:

src/
├── components/
│   └── motion-kit/          # Motion Kit components
│       ├── magnetic/
│       │   └── magnetic-element.ts
│       ├── card-stack/
│       │   └── card-stack-element.ts
│       └── ...
├── lib/
│   └── utils.ts              # Shared utilities
└── pages/

Each component is self-contained with its own styles and logic. You can modify them to fit your needs.

Components not rendering? Make sure you've registered the custom elements before using them in your markup.

Build errors? Ensure your build tool supports TypeScript, Web Components, and Lit decorators. If you see decorator parse errors, first enable experimentalDecorators in tsconfig.json and make sure any Babel step also parses decorators.

GSAP not working? Verify GSAP is installed and the plugins are registered. See the component source for required plugins.