# Mox UI

> A shadcn registry of animated React components: frosted-glass, springy, Apple-flavored UI built with Tailwind CSS and Motion (Framer Motion). Every component is free to use and installable with one command via the shadcn CLI.

Install any component into a React / Next.js project:

```
npx shadcn@latest add mox/mox-ui/<component-name>
```

Source code for all components: https://github.com/Moxsahil/mox-ui

## Components

### Animated beam

- Page: https://moxui.dev/components/animatedbeam
- Description: Animated light beams connecting elements.
- Install: `npx shadcn@latest add mox/mox-ui/animated-beam`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/animated-beam.tsx
- Dependencies: motion

### Liquid metal card

- Page: https://moxui.dev/components/liquidmetalcard
- Description: A metallic debit card with a reflective surface.
- Install: `npx shadcn@latest add mox/mox-ui/liquid-metal-id-card`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/liquid-metal-id-card.tsx
- Dependencies: framer-motion, lucide-react

### Magazine template

- Page: https://moxui.dev/components/magazinetemplate
- Description: An editorial magazine template with featured stories, a visual index, and an issue archive.
- Install: `npx shadcn@latest add mox/mox-ui/magazine-template`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/magazine-template.tsx
- Dependencies: motion, lucide-react

### SaaS template

- Page: https://moxui.dev/components/saastemplate
- Description: A dark landing page template with a navbar, a hero, and a product screenshot.
- Install: `npx shadcn@latest add mox/mox-ui/saas-template`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/saas-template.tsx
- Dependencies: lucide-react

### Contribution skyline

- Page: https://moxui.dev/components/contributionskyline
- Description: A contribution calendar with a heatmap and an interactive 3D skyline.
- Install: `npx shadcn@latest add mox/mox-ui/contribution-skyline`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/contribution-skyline.tsx

### Folder component

- Page: https://moxui.dev/components/foldercomponent
- Description: An animated folder whose cards fan out on hover and lift open on click, with a 3D-tilted flap. Supports color and size (sm/md/lg) props.
- Install: `npx shadcn@latest add mox/mox-ui/folder-component`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/folder-component.tsx
- Dependencies: motion

### Bounce sidebar

- Page: https://moxui.dev/components/bouncesidebar
- Description: A vertical navigation list with a bouncy, spring-animated active indicator.
- Install: `npx shadcn@latest add mox/mox-ui/bounce-sidebar`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/bounce-sidebar.tsx
- Dependencies: motion

### Hook Sidebar

- Page: https://moxui.dev/components/hooksidebar
- Description: A vertical navigation list with a dashed rail that marks the active item.
- Install: `npx shadcn@latest add mox/mox-ui/hook-sidebar`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/hook-sidebar.tsx
- Dependencies: motion

### Proximity Sidebar

- Page: https://moxui.dev/components/proximitysidebar
- Description: An interactive sidebar with proximity hover effects that appears while scrolling and responds to scroll intensity.
- Install: `npx shadcn@latest add mox/mox-ui/proximity-sidebar`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/proximity-sidebar.tsx
- Dependencies: motion

### Duration Picker

- Page: https://moxui.dev/components/durationpicker
- Description: A spring-animated picker for entering a duration in hours and minutes.
- Install: `npx shadcn@latest add mox/mox-ui/duration-picker`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/duration-picker.tsx
- Dependencies: motion, figma-squircle, flubber, react-use-measure, @radix-ui/react-slot

### Fluid Orb

- Page: https://moxui.dev/components/fluidorb
- Description: An animated WebGL orb with drifting fluid shading, inspired by ChatGPT's voice mode.
- Install: `npx shadcn@latest add mox/mox-ui/fluid-orb`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/fluid-orb.tsx

### Scroll Progress

- Page: https://moxui.dev/components/scrollprogressindicator
- Description: A scroll progress pill that tracks reading position and expands into a squircle menu of sections you can jump to.
- Install: `npx shadcn@latest add mox/mox-ui/scroll-progress`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/scroll-progress.tsx
- Dependencies: motion

### Code Block

- Page: https://moxui.dev/components/codeblock
- Description: A clean code block that builds its entire theme from a single accent color. Pass code and a hex, it does the rest.
- Install: `npx shadcn@latest add mox/mox-ui/code-block`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/code-block.tsx
- Dependencies: motion, prism-react-renderer, lucide-react

### Gravity Letters

- Page: https://moxui.dev/components/gravityletters
- Description: A playful gravity field where letters, numbers, emoji, or any components you pass fall and pile up like real objects.
- Install: `npx shadcn@latest add mox/mox-ui/gravity-letters`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/gravity-letters.tsx

### OTP Input

- Page: https://moxui.dev/components/otpinput
- Description: A one-time-code input whose characters roll into place behind a caret that slides from slot to slot.
- Install: `npx shadcn@latest add mox/mox-ui/otp-input`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/otp-input.tsx
- Dependencies: motion

### GitHub activity

- Page: https://moxui.dev/components/githubactivity
- Description: A contribution heatmap with a footer panel that expands over the grid to rank your top repositories.
- Install: `npx shadcn@latest add mox/mox-ui/github-activity`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/github-activity.tsx
- Dependencies: motion

### Emoji reaction

- Page: https://moxui.dev/components/emojireaction
- Description: A tapback-style reaction button that opens a bar of Apple emoji and sends copies of your pick floating up out of it.
- Install: `npx shadcn@latest add mox/mox-ui/emoji-reaction`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/emoji-reaction.tsx
- Dependencies: motion, react-apple-emojis, lucide-react, @radix-ui/react-slot

### Notification bell

- Page: https://moxui.dev/components/notificationbell
- Description: An iOS-style notification bell with an unread count badge.
- Install: `npx shadcn@latest add mox/mox-ui/notification-bell`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/notification-bell.tsx
- Dependencies: motion, @radix-ui/react-slot

### Step player

- Page: https://moxui.dev/components/stepplayer
- Description: An iOS-style stepped progress track with a play, pause and replay control. The active step stretches into a bar that fills as it plays.
- Install: `npx shadcn@latest add mox/mox-ui/step-player`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/step-player.tsx
- Dependencies: motion, flubber

### Grid Reveal

- Page: https://moxui.dev/components/gridreveal
- Description: A loading state for AI images that turns into the real picture when it arrives.
- Install: `npx shadcn@latest add mox/mox-ui/grid-reveal`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/grid-reveal.tsx
- Dependencies: motion

### Liquid tab bar

- Page: https://moxui.dev/components/liquidtabbar
- Description: A liquid glass tab bar with a stretchy selection lens and a detached search button.
- Install: `npx shadcn@latest add mox/mox-ui/liquid-tab-bar`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/liquid-tab-bar.tsx
- Dependencies: motion

### Delete button

- Page: https://moxui.dev/components/deletebutton
- Description: A delete button that asks for confirmation in place, no dialog needed.
- Install: `npx shadcn@latest add mox/mox-ui/delete-button`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/delete-button.tsx
- Dependencies: motion

### Animated counter

- Page: https://moxui.dev/components/animatedcounter
- Description: A number that counts to its new value on a wheel of digits, like an odometer.
- Install: `npx shadcn@latest add mox/mox-ui/animated-counter`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/animated-counter.tsx
- Dependencies: motion

### Matrix orb

- Page: https://moxui.dev/components/matrixorb
- Description: A dot-matrix orb that animates through idle, listening and thinking states.
- Install: `npx shadcn@latest add mox/mox-ui/matrix-orb`
- Source: https://github.com/Moxsahil/mox-ui/blob/main/components/ui/matrix-orb.tsx

## Notes

- Components are TypeScript + Tailwind CSS, following shadcn/ui conventions (cn + className merging, prop spreading, data-slot attributes).
- Free for personal and commercial use. Attribution appreciated; please don't resell as your own kit.