Motiq: 80+ Animated UI Components for React & shadcn/ui

Motiq is a React component library and shadcn-compatible registry that adds animated product UI to your React and Next.js applications.

It currently includes 80+ UI components, workflow blocks, and one-command packs for AI products, developer tools, collaboration, live data, commerce, security, files, communication, productivity, and motion-heavy UI.

The shadcn CLI copies TypeScript and Tailwind CSS source into your project. Your application owns the state, network requests, model calls, sockets, polling, and workflow data.

Github Repo

Browse All Components

Features

Editable TypeScript and Tailwind CSS source installed through shadcn.
Shared semantic tokens and motion primitives.
Explicit "use client" boundaries plus SSR and React Server Component checks.
WCAG 2.2 AA accessibility goal with keyboard, focus, and screen-reader patterns.
prefers-reduced-motion behavior for animations and offscreen pause for continuous effects.
MIT license for personal, commercial, client, and open-source projects.

How To Use Motiq

Initialize shadcn first when your project does not have its configuration and cn() utility.

npx shadcn@latest init

Add a Component

Use the @motiq registry namespace with a current shadcn CLI. No manual Motiq registry entry is required. Registry dependencies are installed with the selected item.

npx shadcn@latest add @motiq/ai-response-stream

Use the Direct Registry URL

Use the direct registry endpoint when you want an explicit Motiq URL or need the fallback documented for older shadcn CLI releases.

npx shadcn@latest add https://motiq.dev/r/ai-response-stream

Install from GitHub

The repository can serve registry items directly.

npx shadcn@latest add RMahammad/motiq/ai-response-stream

Basic Usage: AI Response Stream

import { AiResponseStream } from "@/components/motiq/ai-response-stream";
<AiResponseStream
  segments={segments}
  state={state}
  sources={sources}
  onStop={() => controller.abort()}
  onRetry={() => refetch()}
/>

Config the component

Prop	Type	Default	Purpose
`segments`	`ResponseSegment[]`	Required	Ordered text, code, and citation segments.
`state`	`"streaming" \| "stopped" \| "complete" \| "error"`	Required	Application-owned response lifecycle state.
`sources`	`StreamSource[]`	`undefined`	Sources referenced by citation segments.
`assistantName`	`string`	`"Assistant"`	Label used in the header and status announcements.
`errorMessage`	`string`	Built-in error text	Message rendered for the error state.
`caret`	`boolean`	`true`	Stream caret while the response is active.
`onStop`	`() => void`	`undefined`	Stop action shown during streaming.
`onRetry`	`() => void`	`undefined`	Retry action shown after stopped or error states.
`onCopy`	`(text: string) => void`	`undefined`	Callback after a successful response copy.
`className`	`string`	`undefined`	Classes applied to the root component.

Available Workflow Packs

Pack	Main Components
AI Interface Pack	Agent Run Timeline, Tool Call Activity, AI Response Stream, Source Citation Rail
Developer Tools Pack	Environment Switcher, Deployment Pipeline, Live Log Stream, API Request Inspector
Collaboration Pack	Live Presence Stack, Approval Workflow, Comment Thread, Activity Stream
Data Motion Pack	KPI Number Morph, Data Refresh State, Filter Result Transition, Streaming Data Rows

Featured UI Components

Product Area	Components
AI products	AI Response Stream, Agent Run Timeline, Tool Call Activity
Developer tools	Deployment Pipeline, Live Log Stream, API Request Inspector
Collaboration	Live Presence Stack, Comment Thread, Approval Workflow
Data motion	KPI Number Morph, Streaming Data Rows, Data Refresh State
Marketing and creative UI	Kinetic Emphasis, Sticky Zoom Hero, Aurora Panel
Pointer, scroll, and media motion	Cursor Comet, Depth Parallax Scene, Compare Reveal

Styling and Local Source

Each registry install writes local component source. Edit the component markup, Tailwind classes, semantic tokens, and motion values in your own codebase. Shared Motiq utilities live under @/lib/motiq, while standard shadcn helpers use @/lib/utils.

Registry items declare their own Motiq utilities, primitives, composed components, and third-party dependencies. The shadcn CLI resolves those dependencies during installation.