Magic UI

Magic UI is a React, TypeScript, Tailwind CSS, and Motion component/effects library for shadcn-style design engineering.

Routing Summary

Load through Component Library Sources when a screen needs animated beams, grids, marquees, shimmer, border effects, interactive cards, or other structural motion that should remain source-owned. The official site describes 150+ free and open-source animated components and effects built with React, TypeScript, Tailwind CSS, and Motion, and positions Magic UI as a companion for shadcn/ui. Source: Magic UI, 2026-07-07

Position In Kevin's Stack

• Magic UI: structural animated effects and section-level motion.
• Kokonut UI: polished animated shadcn-aligned components.
• React Bits: expressive effects, backgrounds, and text animation.
• Motion Primitives: smaller editable primitives before custom Motion code.

Use Magic UI when the motion is part of the section architecture. Use smaller primitive sources when the motion is just one interaction.

Integration Rules

• Copy source into the app, retokenize it, and remove demo copy.
• Keep one dominant animated source per viewport.
• Verify reduced-motion behavior and mobile performance.
• Prefer Motion.dev directly when the effect becomes app state or repeated UI behavior.

---

Timeline

• 2026-07-07 | Promoted from skill-only shelf mention into a first-class component-source route during the component-library coverage audit. Source: User request, 2026-07-07; https://magicui.design/; https://github.com/magicuidesign/magicui