Documentation / Start building
Add to an existing app
Use the complete starter for the full connected system. For an existing application, install a focused editable component bundle or only the shared runtime.
The component bundles target Next.js, React 19, Tailwind CSS 4, and shadcn with Base UI. Review compatibility before installing into a different stack. No package-read credential is required for the public npm release.
Start from an application already configured with shadcn Base UI. The registry uses that application's components.json aliases and CSS destination; it does not convert another primitive library into Base UI.
Install editable components
Two bundles are available:
| Bundle | Includes |
|---|---|
motion-primitives | Shared page/text entrances, content reveals, animated lists, and interactive surfaces |
animated-metrics | Animated numbers and synchronized progress primitives |
Inspect the selected installation first:
bunx --bun shadcn add itsNintu/creator-core-kit/motion-primitives#v0.2.7 --dry-run
bunx --bun shadcn add itsNintu/creator-core-kit/animated-metrics#v0.2.7 --dry-run
Run the chosen command without --dry-run after reviewing its source and dependency changes. The bundles install editable source into your configured shadcn destinations and declare the exact matching runtime dependency. Review any existing cn helper or Progress implementation before accepting changes.
Import the shared runtime stylesheet as shown below. It supplies generated default motion variables; an existing root layout can also apply the exported variables. Keep your application's semantic colors and existing providers. These two bundles do not install authentication, account UI, Convex, service projects, or a backend.
Browse motion primitives and animated numbers for the real examples and source.
Install the runtime only
bun add @nintu/creator-core-runtime@0.2.7
React 19 and Motion 12 are peer dependencies. Install compatible versions when your application does not already provide them. Add the shared stylesheet to your application's global CSS:
@import "@nintu/creator-core-runtime/styles.css";
Apply the exported CSS variables to the root element in your Next.js layout:
import { motionVariables } from "@nintu/creator-core-runtime/motion";
<html lang="en" style={motionVariables}>
<body>{children}</body>
</html>
This is the relevant part of your existing layout; preserve its fonts, providers, metadata, and other attributes. The complete starter already applies both integrations.
Runtime entry points
| Import suffix | Responsibility |
|---|---|
/motion | Server-safe timing, easing, delays, transitions, CSS variables, and ActionStatus |
/use-animated-value | Interruptible numeric motion for client components |
/use-async-action | Duplicate-action protection and pending/success/error state |
/action-results | Provider-independent result validation and error messages |
/styles.css | Shared skeleton and action styles |
Client hooks retain their client boundaries. Import the entry point you need; there is no combined client-only barrel wrapping the server-safe tokens.
Verify and keep control of updates
Run your application's type, build, and behavior checks. Inspect keyboard focus, both themes, and narrow layouts. Check increasing and decreasing metrics and shared progress labels. Existing pages should keep their appearance except for the changes you chose.
For updates, pin a published version, review the dependency and source diffs, and follow the three update paths. Never overwrite customized component source blindly.