# imskyleen/animate-ui

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/imskyleen-animate-ui).**

3,374 stars · 163 forks · TypeScript · other

## Links

- GitHub: https://github.com/imskyleen/animate-ui
- Homepage: https://animate-ui.com
- awesome-repositories: https://awesome-repositories.com/repository/imskyleen-animate-ui.md

## Topics

`components` `framer-motion` `motion` `nextjs` `radix` `react` `shadcn-ui` `tailwindcss` `typescript`

## Description

Animate UI is an animated UI component library and motion-enhanced design system. It provides a collection of pre-animated interface elements and layout primitives used to build interactive web user interfaces.

The library is integrated with the Model Context Protocol, making it an MCP compatible component set that allows AI coding tools to automatically discover and implement its components. It also functions as an accessibility-aware animation framework that respects system-level reduced motion settings.

The system covers a broad range of interactive visual effects, including animated typography, dynamic backgrounds, and motion-enhanced icons. It includes pre-animated components for building structured layout blocks, dialogs, and tabs.

## Tags

### User Interface & Experience

- [Animated UI Components](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries/animated-ui-components.md) — Provides a comprehensive library of pre-animated UI components like dialogs and tabs. ([source](https://animate-ui.com/docs/roadmap))
- [Accessibility Motion Controls](https://awesome-repositories.com/f/user-interface-experience/accessibility-motion-controls.md) — Implements an accessibility-aware motion system that respects system-level reduced motion settings. ([source](https://animate-ui.com/docs/accessibility))
- [Component Composition Primitives](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-composition/component-composition-primitives.md) — Uses a primitive-based design system to compose complex interfaces from small, pre-animated base elements.
- [Accessibility-Aware Animations](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/dynamic-animation-controllers/dynamic-element-animation/accessibility-aware-animations.md) — Implements animations that automatically adjust or disable themselves based on system-level reduced motion settings.
- [Motion Effects](https://awesome-repositories.com/f/user-interface-experience/interaction-effects/motion-effects.md) — Provides dynamic visual animations and transitions that react to user interaction across typography and backgrounds.
- [Motion Design Systems](https://awesome-repositories.com/f/user-interface-experience/motion-design-systems.md) — Ships a cohesive design system of visual components and typography effects prioritizing smooth, consistent interactive motion.
- [Physics-Based Animation Libraries](https://awesome-repositories.com/f/user-interface-experience/physics-based-animation-libraries.md) — Implements physics-based spring animations via Framer Motion for natural-feeling UI transitions.
- [Smooth Animation Interfaces](https://awesome-repositories.com/f/user-interface-experience/ui-animations/smooth-animation-interfaces.md) — Enables the construction of fluid user interfaces using pre-animated primitives. ([source](https://animate-ui.com/docs))
- [Animated Typography](https://awesome-repositories.com/f/user-interface-experience/animated-typography.md) — Provides typography-specific motion effects to draw attention to headings and content. ([source](https://animate-ui.com/docs/roadmap))
- [Background Effects](https://awesome-repositories.com/f/user-interface-experience/background-effects.md) — Includes dynamic visual backdrops and effects to add depth and movement to pages. ([source](https://animate-ui.com/docs/roadmap))
- [Tailwind CSS Integration](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration.md) — Integrates Tailwind CSS for utility-first styling of animated components and trigger classes.
- [Animated Layout Blocks](https://awesome-repositories.com/f/user-interface-experience/layout-animation-engines/animated-layout-blocks.md) — Offers pre-animated layout patterns for assembling structured interface sections with visual movement. ([source](https://animate-ui.com/docs/roadmap))
- [Motion Preference Handlers](https://awesome-repositories.com/f/user-interface-experience/motion-preference-handlers.md) — Detects system-level reduced motion preferences to conditionally disable heavy animations.
- [Animated](https://awesome-repositories.com/f/user-interface-experience/vector-icons/animated.md) — Embeds motion-enhanced vector icons into interfaces to improve visual feedback and engagement. ([source](https://animate-ui.com/docs))

### Graphics & Multimedia

- [Web Interface Animation Libraries](https://awesome-repositories.com/f/graphics-multimedia/web-interface-animation-libraries.md) — Provides a library for creating interactive web elements with smooth motion primitives.

### Artificial Intelligence & ML

- [AI-Driven Component Discovery](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-driven-component-discovery.md) — Connects component libraries to MCP servers for automated discovery and deployment by AI tools.
- [MCP Protocol Integrations](https://awesome-repositories.com/f/artificial-intelligence-ml/external-tool-integrations/mcp-protocol-integrations.md) — Integrates with the Model Context Protocol to allow AI coding tools to automatically discover and implement components.
- [Model Context Protocol Implementations](https://awesome-repositories.com/f/artificial-intelligence-ml/model-context-protocol-implementations.md) — Provides a Model Context Protocol server to expose component metadata for AI agent discovery.