Installation

DriftKit uses a copy-paste model. No package to install — grab the components you need and they're yours.

Prerequisites

DriftKit components require three peer dependencies:

React 18+You probably already have this

Framer Motion 10+The animation engine that powers everything

Tailwind CSS 3+For styling (v4 supported)

1. Install Framer Motion

If you don't already have Framer Motion:

npm install framer-motion

Or with your preferred package manager:

yarn add framer-motion

pnpm add framer-motion

2. Copy Components

Browse the component catalog, find what you need, and copy the source file into your project.

Recommended structure:

your-project/
├── src/
│   ├── components/
│   │   ├── ui/           ← DriftKit components go here
│   │   │   ├── button.tsx
│   │   │   ├── dialog.tsx
│   │   │   ├── toast.tsx
│   │   │   └── ...
│   │   └── ...           ← Your custom components
│   └── ...

3. Use

Import and use like any other component:

import { Button } from "@/components/ui/button";
import { Dialog, DialogTitle } from "@/components/ui/dialog";

export function MyPage() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        Open Dialog
      </Button>
      
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>Spring-powered modal</DialogTitle>
        <p>This dialog entered with spring physics.</p>
      </Dialog>
    </>
  );
}

Path Aliases

DriftKit components use @/components imports internally. Make sure your tsconfig.json has path aliases configured:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Next.js, Vite, and most modern setups already have this. Adjust import paths if your setup differs.

Default Spring Configurations

Most DriftKit components use these shared spring presets. You can customize them in each component file:

// These appear at the top of most component files
const springs = {
  snappy: { type: "spring", stiffness: 500, damping: 30, mass: 0.5 },
  smooth: { type: "spring", stiffness: 300, damping: 30, mass: 1   },
  quick:  { type: "spring", stiffness: 500, damping: 40, mass: 0.3 },
};

Want to understand what these numbers mean? Read Spring Physics 101 →

That's it.

No build plugins. No config files. No provider wrappers. Copy the component, import it, use it. The motion is built into each file — self-contained and customizable.

← Introduction Spring Physics 101 →