Introduction

A free, copy-paste library of animated React components and page templates, built with Tailwind CSS and Motion.

Mox UI helps you add thoughtful interactions to your projects. Explore the live previews, find a component that fits, and bring its source into your app. From a small input to a full page, each piece is yours to customize.

There is no Mox UI package to keep in sync. The shadcn CLI copies the files into your project and installs their dependencies. Work with them just like the rest of your code.

Each component page brings the preview, code, installation guide, and available props together. Use the sidebar to explore the collection and try the interactions before adding them to your project.

Ready to try one? With React, Tailwind CSS, and shadcn set up, run this command in your project to add animated beam:

pnpm dlx shadcn@latest add mox/mox-ui/animated-beam

Starting from scratch? The installation guide walks through setting up a new project.

What's inside

Small interface details and complete layouts, ready to explore and adapt:

Components: Inputs, buttons, counters, and cards for the details people interact with every day.
Motion and effects: Animated beams, falling letters, and liquid surfaces that bring movement to your interface.
Navigation and feedback: Sidebars, menus, scroll indicators, notifications, and reactions that help people find their way and see what changed.
AI interfaces: Fluid and matrix orbs for voice states, plus image reveals for generated content.
Page templates: Complete SaaS and magazine layouts you can adapt into a starting point for your own site.

Philosophy

A component should be easy to understand and feel at home in your project. These ideas guide the collection:

Own the source. Components live in your project. Read, restyle, and change them without waiting for a library update.
Make motion useful. Animation should explain a change, guide attention, or make an interaction feel natural.
Respect preferences. Interactive components honor reduced motion with instant transitions or static states.
Keep it adaptable. Familiar React props and Tailwind classes let you fit each component to your design.

Frequently asked questions

Is Mox UI free to use?

Yes. The code is available under the MIT license for personal and commercial projects. Keep the copyright and license notice with copies of the code.

What does my project need?

Start with React and Tailwind CSS v4. Set up shadcn before using the install command. The CLI adds the component file and its dependencies, including Motion when needed.

Can I use these components with shadcn/ui?

Yes. Mox UI follows shadcn conventions and installs into your project alongside your existing components. You can also copy the source from the manual installation guide.

Can I customize the components?

Yes. Every component page includes a live preview, source code, and usage guidance. Adjust the props for quick changes, or edit the source to make it your own.

Where do the designs come from?

Many components recreate and extend work from around the web. Component pages credit their references so you can explore the original ideas.

How can I report a problem or contribute?

Open an issue or a pull request on GitHub. Bug reports, suggestions, and new component contributions are welcome.