Mox UI
Quick start
NewMatrix orb and Animated counter

The foundation of
exceptional
interfaces.

24 animated React components, all free. Each one is a single file you own, built with Tailwind CSS and Motion and installed with the shadcn CLI.

npx shadcn@latest add mox/mox-ui/matrix-orb
Browse all 24
Idle

24 components:

Open
Animated beamNewDisplay
Open
Magazine templateNewDisplay
Open
Contribution skylineNewDisplay
Open
Folder componentDisplay
Open
Bounce sidebarNavigation
Open
Hook SidebarNewNavigation
Open
Proximity SidebarNavigation
Open
Duration PickerInputs
Open
Fluid OrbAI kit
Open
Scroll ProgressNavigation
Open
Code BlockDisplay
Open
Gravity LettersDisplay
Open
OTP InputInputs
Open
GitHub activityDisplay
Open
Emoji reactionFeedback
Open
Notification bellFeedback
Open
Step playerDisplay
Open
Grid RevealAI kit
Open
Liquid tab barNavigation
Open
Delete buttonInputs
Open
Animated counterNewDisplay
Open
Matrix orbNewAI kit
Recording soon
Open
Liquid metal cardNewDisplay
Recording soon
Open
SaaS templateNewDisplay

Built on the stack you already ship. React, Tailwind CSS and Motion, delivered by the shadcn CLI. Nothing new to learn.

Built with:

  • React
  • Tailwind CSS
  • Motion
  • TypeScript

Installs with:

  • shadcn CLI
  • npm
  • pnpm
  • yarn
  • bun

One command.
Your code.

Every component ships through the shadcn registry. Run it yourself or hand it to your agent, and the source lands in your repo.

$ npx shadcn@latest add mox/mox-ui/otp-input✔ Checking registry.✔ Installing dependencies.✔ Created 1 file: - components/ui/otp-input.tsx

shadcn CLI

Works with npm, pnpm, yarn and bun. Dependencies come along.

Add the Matrix orb from Mox UI to the voice screen

  • Read moxui.dev/llms.txt
  • Ran npx shadcn@latest add mox/mox-ui/matrix-orb
  • Edited app/voice/page.tsx
+18 −2Review changes

Coding agents

Your agent reads llms.txt and installs any component for you.

Prompt

Add the Delete button from Mox UI with npx shadcn@latest add mox/mox-ui/delete-button and use it for every delete action in my app.

Paste into
  • Claude
  • Codex
  • v0
  • Cursor

Prompt any AI tool

Paste it into Claude, Codex or v0 to add the component.

demo.tsx
"use client"


import { DeleteButton } from "@/components/ui/delete-button"


export function Demo() {
  return <DeleteButton onConfirm={() => remove(id)} />
}
Delete buttonLive

Click the bin. Escape backs out.

Real code, ready to ship

React and Tailwind with shadcn conventions: cn() merges your classes, other props spread onto the root, and data-slot marks it.

Animated counter
12,480
<AnimatedCounter value={12480} />

Every prop, live

Docs pages come with live controls, so you can feel a component before you install it.

Recreated with care. Most components start from great work around the web, then get rebuilt, extended and credited on their own page.

Questions,
answered

Everything you need to know about installing and using Mox UI. Still stuck? Open an issue on GitHub.

01What is Mox UI?

A free, open-source registry of animated React components. Each one is a single file built with Tailwind CSS and Motion, and you install it with the shadcn CLI.

02Is it free?

Yes. Use and modify components in personal and commercial projects. Attribution is appreciated. Please don't resell them as your own kit.

03How do I install a component?

Run npx shadcn@latest add mox/mox-ui/<name> in your React project. pnpm, yarn and bun work too. The CLI adds the file and any dependency it needs.

04Do components work with shadcn/ui?

Yes. They follow shadcn conventions: cn() merges your className, other props spread onto the root, and the root carries a data-slot.

05What does my project need?

React and Tailwind CSS. Most components animate with Motion, which the CLI installs for you.

06Do animations respect reduced motion?

Yes. Interactive components honor prefers-reduced-motion and settle into instant or static states.

07Are these original designs?

Most are recreations of great work from around the web, reverse-engineered and extended. Each component page credits its sources.

24 components, free and open source

Crafted for developers.
Ready for your next build.

Browse componentsStar on GitHub