Skip to main content

​
Prerequisites

Before using any Arctis UI component, make sure your project is set up with the following:
1

React + Next.js

Arctis UI components are written for React 18+ and are fully compatible with the Next.js App Router.
pnpm create next-app@latest my-app —typescript —tailwind
2

Tailwind CSS

All components use Tailwind for styling. If you didn’t set it up via the Next.js wizard, install it manually:
pnpm add -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p
3

TypeScript

Arctis UI is written in TypeScript. It works with plain JavaScript too, but TypeScript is recommended for the best experience.

​
Using Your First Component

Let’s add the Flair Cursor Follower — a GSAP-powered cursor animation — to your project.
1

Install dependencies

Some components require additional packages. Check the component page for its specific dependency.For the Flair Cursor Follower, install GSAP:
pnpm add gsap
2

Copy the component

Go to the component page, click the Code tab, and copy the full component source. Paste it into your project — for example at:
src/components/ui/flair-cursor-follower.tsx
Every Arctis UI component is self-contained. You own the file the moment you paste it.
3

Import and use it

Add the component to any page or layout. For global cursor effects, place it in your root layout:
import { FlairCursorFollower } from "@/components/ui/flair-cursor-follower";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <FlairCursorFollower />
        {children}
      </body>
    </html>
  );
}
4

Run your app

Start your dev server and move your cursor around — you should see the flair animation in action!
pnpm dev
We recommend keeping Arctis UI components in a dedicated folder so they’re easy to find and update: 
src/
└── components/
    └── ui/               ← Arctis UI components live here
        ├── flair-cursor-follower.tsx
        ├── magnetic-button.tsx
        └── ...

​
Tips & Best Practices

Each component page lists its required packages under the Installation tab. Some components need GSAP, some need Three.js, and some have zero external dependencies.
All animation and interactive components require the "use client" directive at the top of the file since they use browser APIs like window, addEventListener, and refs. This is already included in every component — don’t remove it.
Every component is designed to be modified. Colors, sizes, timing, easing — it’s all just code in your project. No configuration files, no theme tokens to look up.
Each component file includes a small comment header crediting the author. You’re not required to keep it, but it helps others trace where the component came from. It means a lot!

​
Need Help?

Browse Components

Explore the full component library and find what you need.

GitHub

Found a bug or want to contribute? Open an issue or PR on GitHub.