Installation

Install @krackedui/motion from npm, import one stylesheet and wrap your UI in <Theme>. Tailwind is not required.

Setup

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Wrap your UI in <Theme>. It applies Motion’s fonts, colors and appearance; menus and dialogs follow it automatically:

/src/App.tsx
import { Theme, Button } from '@krackedui/motion';

export function App() {
  return (
    <Theme appearance="light">
      <Button variant="primary">New</Button>
    </Theme>
  );
}

Next.js (App Router)

Import the CSS in app/layout.tsx and render <Theme asChild> around <body>. Components work from server components. In a server file, use the flat names of compound parts (MenuRoot, MenuItem, DialogContent, SidebarItem…) instead of Menu.Root.

/app/layout.tsx
import '@krackedui/motion/styles.css';
import type { ReactNode } from 'react';
import { Theme } from '@krackedui/motion';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <Theme asChild appearance="system">
        <body>{children}</body>
      </Theme>
    </html>
  );
}

Tailwind v4 apps (optional)

To use Motion’s tokens as utilities in your own code (bg-n-bg-secondary, text-n-text-secondary, rounded-n-lg…), import the Tailwind build instead of styles.css:

/src/app.css
@import 'tailwindcss';
@import '@krackedui/motion/tailwind.css';

Start from a template

Or start a whole app from one of Motion’s templates:

terminal
npm create @krackedui my-app -- --system motion --template fintech

Copy the source instead

Prefer owning the code? Every component page has a **Copy the source** section with a one-line npx shadcn add command that drops the component and everything it imports into your project.

© 2026 Motion. Internal documentation.