Col
...
All libraries
DiMAAC UI logo

DiMAAC UI

ui.dimaac.com

Animated React components for galleries, cards, scrolling, and text effects.

Animation & Motion
Stacks
ReactTypeScript
Use cases
Micro-interactionsCreative & Experimental
Visit website Documentation Repository

Installation

Initialize the components directory
npx dimaac init
Add one component (dimaac CLI)
npx dimaac add ImageGallery
Add every component
npx dimaac add --all
Add one component plus its demo example
npx dimaac add MouseTiltCard -e
Runtime deps for manual installs
npm install react @gsap/react

Getting started

  1. Prerequisites: Node.js 14 or newer, an existing React project with TypeScript support, and Tailwind CSS. The `dimaac` CLI copies component source into your repo; there is no runtime npm package to depend on.
  2. Create the components directory in your project by running `npx dimaac init` from the project root.
  3. Add a component with `npx dimaac add MouseTiltCard`. Run `npx dimaac add` with no argument to list the available components, add the `-e` flag to also copy the matching demo, or use `--all` to install every component at once.
  4. Install the dependencies the component imports: `npm install react @gsap/react`, plus any GSAP plugins that component registers, for example Draggable, MotionPathPlugin, InertiaPlugin, ScrollTrigger or Flip. Components land under `components/` grouped by category and demos under `examples/`.
  5. Import the component into a page and render it. Every component is a client component (`"use client"`) that calls `gsap.registerPlugin(...)` and drives its animation through the `useGSAP` hook, so it must run in a browser environment.

Agent setup prompt

Paste this into a coding agent to set DiMAAC UI up in an existing project.

Help me use DiMAAC UI (https://ui.dimaac.com) in this existing project. It is a catalog of copy-paste React components for galleries, cards, scroll animations and text effects, built with Tailwind CSS and GSAP.

Prerequisites:
- My stack is React + TypeScript with Tailwind CSS. Check that Tailwind is already set up before adding components.
- Components are source files copied into my repo, not an npm runtime package. Do not add a dimaac dependency to package.json.
- Requirements per the docs: Node.js >= 14, React with TypeScript support, and Tailwind CSS.

Steps:
1. From the project root, run npx dimaac init to create the components directory.
2. Pick a component from https://ui.dimaac.com and run npx dimaac add <ComponentName>, for example npx dimaac add ImageGallery. Use npx dimaac add on its own to list the available components, the -e flag to also copy the matching demo example, or --all to install every component.
3. Install what the component actually imports: npm install react @gsap/react, plus the specific GSAP plugins it registers. The CLI does not install these, so read the component source and add every import it needs (for example gsap/Draggable, gsap/MotionPathPlugin, gsap/InertiaPlugin, gsap/ScrollTrigger, gsap/Flip). Also add clsx and tailwind-merge if the project is missing the lib/utils.ts cn() helper the components rely on.
4. First usage: import the copied component into an existing page and render it. The component lands in components/<category>/<Name>.tsx and its demo in examples/<category>/<Name>Demo.tsx. Adapt it to my theme tokens and import conventions, then confirm the app still builds and the animation runs.
5. If the component imports next/image, keep it on a Next.js page or swap it for a plain img in another React setup, since the gallery components are written against next/image.

Consult the component page on https://ui.dimaac.com for the current CLI command, the prop list and the full source before changing anything. Each page shows both a "Using CLI" command and a "Manual Installation" alternative. Keep the copied files in my repo and treat them as mine to edit.