Getting started

A little setup.
A lot of possibility.

Pick a component. Bring the source into your project. Make it yours. Anticraft UI is free, open source, and built to fit the way you work.

Before you start

You need an existing React 18+ project with TypeScript and support for CSS imports. Next.js works out of the box. Each component ships as a small TypeScript file and a matching ordinary CSS file, with no animation library or runtime dependency beyond React.

The documentation site runs on Next.js 16 and has been tested with Node.js 24. Your app only needs to meet the requirements of its own framework.

You own the code. There is no published Anticraft npm package to install. Add only the components you need, then edit them directly in your project.

Option 01

Install with the CLI

Already using shadcn in your React or Next.js project? Run this command from your app's root directory to add Magnetic Button and its stylesheet. Your project should already have a configured components.json.

Terminal

npx shadcn@latest add http://localhost:5173/r/magnetic-button.json

This URL points to the local development registry. Keep the Anticraft preview running with npm run dev in the Anticraft repository while you run the install command in your own project. If you host the registry, replace http://localhost:5173 with its actual address.

The CLI uses the component aliases in your components.json. For example, if @/components resolves to src/components, the files are placed in src/components/anticraft. Use that same alias when importing.

Option 02

Copy the source

Prefer to do it by hand? You can use every component without shadcn or Tailwind. All the styling lives in the included CSS file.

Open Magnetic Button and select the Code tab.
Copy MagneticButton.tsx and magnetic-button.css into the same components/anticraft folder in your project. If your project uses a src directory, place that folder inside it.
Keep both filenames intact. The component already imports ./magnetic-button.css, so the styling comes with it.

Your component files

components/
└── anticraft/
    ├── MagneticButton.tsx
    └── magnetic-button.css

Bring it to life

Import the component and render it wherever you need it. This example uses the common @/ alias; a relative import works too.

example.tsx

import { MagneticButton } from '@/components/anticraft/MagneticButton';

export default function Example() {
  return (
    <MagneticButton strength={0.2}>
      Make something unexpected ↗
    </MagneticButton>
  );
}

Interactive source files already include 'use client', so you can render them from a Next.js Server Component. If your example adds event handlers or React hooks, make that example a Client Component as well.

Make it feel like you

Every component has working default colors. Override the optional --ac-* CSS variables globally or on a parent element, pass a className, or edit the source. No theme provider is required. These variables customize Magnetic Button:

Your global stylesheet · optional

:root {
  --ac-accent: #d5fa55;
  --ac-accent-hover: #c7ee43;
  --ac-ink: #171914;
  --ac-focus: #6d782e;
}

Motion follows the visitor's reduced-motion preference. Looping effects such as Aurora Background, Gradient Text, and Border Beam also expose a paused prop so you can add an explicit pause control to your design. Marquee includes its own pause button.

Your next move

Find your first component.

Explore the collection, try the live previews, and take the pieces that give your next idea a little more character.

Explore components