Welcome to ArupUI

The creative layer your UI is missing. Motion-rich, theme-aware components that go beyond the basics — designed for developers who refuse to ship boring interfaces.

What is ArupUI?

ArupUI gives you the components that shadcn/ui doesn't — spotlight effects, meteor showers, retro grids, morphing text, pulsating buttons, and dozens more. Every component is yours to copy, tweak, and ship. No packages to maintain. No version hell. No vendor lock-in.

Think of it this way: shadcn/ui handles your buttons and inputs. ArupUI handles the wow factor.

The ArupUI Difference

Most component libraries give you the same buttons and cards everyone else has. ArupUI is different:

  • Motion-first — Every component is designed around animation. Framer Motion powers the interactions, CSS handles the rest. Nothing feels static.
  • Theme editor built in — Not a separate tool. Pick a preset, drag some sliders, and watch the entire site transform. Export the CSS when you're happy. Done.
  • Your code, your rules — We don't publish an npm package for you to depend on. You get the source. You paste it. You own it forever. Modify anything you want.
  • Works with what you have — Already using shadcn/ui? Perfect. ArupUI sits right on top. Same Tailwind classes, same CSS variable system, same copy-paste philosophy.

What You Get

50+ Creative Components — Spotlight Card, Aurora Background, Retro Grid, Meteors, Shine Border, Globe Spinner, Number Ticker, Gradient Text, Letter Pullup, Pulsating Button, Animated Beam, Typing Animation, Word Rotate, and many more.

14 React Hooks — useDebounce, useIntersection, useKeyboardShortcut, useCopyToClipboard, useMousePosition, useReducedMotion, and more. Every hook is pure React with zero external dependencies.

Visual Theme Editor — 10 presets, 56 Google Fonts, HSL color pickers, radius control. The entire site updates as you customize. Export production CSS for Tailwind v3 or v4 with one click.

CLI Toolnpx arupui add spotlight-card and you're done. Resolves dependencies, transforms imports, writes files.

Manual Install on Every Page — Don't want the CLI? Every component page shows the full source code with Shiki syntax highlighting, a copy button, and step-by-step instructions.

What ArupUI is NOT

ArupUI doesn't include base primitives — no Button, Input, Dialog, Select, or Tabs. For those, use shadcn/ui. ArupUI is built to complement shadcn/ui, not compete with it.

Built With

  • React 19 + TypeScript
  • Tailwind CSS v4
  • Framer Motion
  • Shiki for syntax highlighting
  • Zustand for theme state
Theme Editor

Theme

Radius0.5rem
Letter Spacing0em

Colors

light