9 components and counting
Featured components
Every component ships with a live preview, an interactive props playground, its full source and a one-line shadcn install command.
- Animated CounterA number counter that animates from 0 to the target value using GSAP. Great for statistics and metrics.
- Animated MenuA slide-out navigation menu with staggered links, an animated curve accent, and motion-driven transitions. This component is inspired from Oliver larose tutorial and I built this in the library just for fun and learning purposes.
- Hold ButtonA confirmation button that fills up while being held, perfect for destructive or irreversible actions. Prevents accidental clicks by requiring a sustained press.
- Theme ToggleA theme toggle button with a stunning clip-path view transition animation. The theme change expands from the button in a smooth circular reveal effect.
- CTA ButtonAn animated call-to-action button with a traveling arrow and expanding background effect. Perfect for hero sections and prominent action triggers.
- SeparatorAn interactive separator with a wobbling string animation. The line bends toward the mouse cursor and oscillates with a satisfying spring effect when released.
Install in one command
messy-ui is a shadcn registry, so the CLI drops the source straight into your project. Nothing is hidden behind an npm package - you get the file, you own the file.
npx shadcn@latest add https://messyui.dev/r/animated-counter.jsonFrequently asked questions
- What is messy-ui?
- messy-ui is a free collection of 9 animated React components built with TypeScript, Tailwind CSS, GSAP and Framer Motion. It is not an npm dependency - you install the source into your own project and own it from then on.
- How do I install a messy-ui component?
- Run "npx shadcn@latest add https://messyui.dev/r/[component].json" in a project that already uses shadcn/ui, or open the component page and copy the source from the Code tab.
- Do I need shadcn/ui to use these components?
- No. The shadcn CLI is the fastest path, but every component page shows the full source, its dependencies and its props, so you can paste it into any React project that uses Tailwind CSS.
- Do I have to credit messy-ui?
- No. The components are meant to be copied into your project and edited freely - that is the whole point of a registry rather than an npm package.
- Does messy-ui use GSAP or Framer Motion?
- Both, depending on the component. Each component page lists exactly which animation library it needs under Installation, so you only install what that component uses.