Docs

Installation

Kinetic is a shadcn-compatible registry. Nothing is installed as a package — the CLI writes the actual files into your repository, and from that moment the code is yours to edit.

Requirements

• React 19.2 or newer — the preview host uses the stable <Activity> API, and several components rely on it to suspend off-screen work.
• Tailwind CSS v4, configured through @theme in CSS rather than a JS config.
• A components.json at the project root. If you do not have one, run the init command below first.

Add one component

Every component page carries its own command. It is always a full URL, and that is deliberate: a bare name like magnetic-buttonresolves against shadcn’s own registry, not this one, so a short command would either fail or install something else entirely.

The CLI writes the component, every hook, shader and helper it imports, and installs the npm dependencies it declares. Shared files are written once — install four WebGL components and you get one copy of the WebGL helper, not four.

Add the registry as a namespace

If you plan to install more than one component, register the origin once and then use short names.

That writes a registries entry into components.json. You can also add it by hand:

After that, installs are short:

Copy it by hand

The Code panel on every component page shows every file the component needs, including the hooks and shaders, each labelled with the path it installs to. Copying all of them into those paths is exactly equivalent to running the command — there is no hidden runtime and no package to add.

The one thing to check: these files import each other as @/components/motion/.... The CLI does not rewrite import paths, so if your alias differs, adjust the imports after copying.

Peer dependencies

Most components are dependency-free. Where one needs a library it is declared in the registry item and installed for you. Two are worth knowing about before you install:

• GSAP is used by some components and is not redistributed here — you install it from npm under its own licence. Nothing in this registry uses a paid Club plugin. See Licensing.
• three is a large dependency. If you only need one shader effect, check whether a css or canvas2d component in the same category does the job — the cost badge on each card tells you which.

Reduced motion

Every component reads prefers-reduced-motion and renders a still, correct state rather than a zero-duration animation. You do not need to wire anything up; the behaviour for each one is written on its page.