Introduction

Motion is a calm, content-first React design system: quiet surfaces, dense layouts and a full set of components, from buttons to a block editor and database views.

What’s inside

@krackedui/motion is one npm package:

  • Design tokens for light and dark (--ds-* standard names plus Motion’s full palette), as CSS variables, Tailwind utilities and DTCG JSON
  • An icon set (Lucide drawings, ISC license) behind one <Icon name> component
  • Every KrackedUI standard component: actions, forms, data display, charts, navigation, overlays, feedback and an app shell
  • Two modules: a block editor and database views (table, board, gallery, list, calendar, timeline, chart)
  • Two sector templates built only from the package: project management and a fintech dashboard

Part of KrackedUI

Motion follows the KrackedUI standard. Every KrackedUI design system exports the same components with the same props, so code written for one works in another by changing the import. Only the look differs.

Before a release, Motion passes the KrackedUI gate: strict types, lint, contract conformance, behaviour tests for every interactive component, WCAG 2.2 AA (axe, contrast, keyboard, focus, target size), responsive checks from 320 to 1440 px, install checks in fresh Vite and Next.js apps, and complete documentation.

Next Steps

Installation
Install the package and render your first component.
Theming
Light and dark, tokens, and using them in your own code.
Templates
Project management and fintech apps built with Motion.
Using with AI
SYSTEM.md and llms.txt for AI-assisted prototyping.
© 2026 Motion. Internal documentation.