Getting started

Kinetiq UI is not a package. It's a collection of components you copy into your codebase and own. Here's everything you need.

Requirements

React 18 or 19
Tailwind CSS v4 (v3 works with minor class tweaks)
TypeScript recommended, not required

Start a new project

If you don't have a project yet, create a Next.js app with Tailwind already configured:

$ npx create-next-app@latest my-site --ts --tailwind --app

Install dependencies

Every component uses two small libraries: Motion for animation and Lucide for icons.

$ npm i motion lucide-react

Add a component

Open any page in Components, copy the code and save it as components/ui/<name>.tsx. Then import it:

app/page.tsx

import { ShimmerButton } from "@/components/ui/shimmer-button";

export default function Page() {
  return <ShimmerButton>Get started</ShimmerButton>;
}

For a full page, open a template, copy its code and paste it into app/page.tsx.

Respect reduced motion

Wrap your app once so animations calm down for people who enable “reduce motion” in their OS settings:

app/providers.tsx

"use client";
import { MotionConfig } from "motion/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return <MotionConfig reducedMotion="user">{children}</MotionConfig>;
}

Deploy

Everything is static-friendly. Push your project to GitHub and import it on Vercel or Cloudflare Pages — no extra configuration needed.

License

MIT. Use the components in personal, client and commercial projects. Source is on GitHub.