v0.1 · 50+ Components

Your UI deserves
more than
basics.

The creative layer shadcn/ui doesn't give you. Spotlight effects, animated text, meteor showers, theme editor — motion-rich components you paste into your project and make your own.Your code. Your brand.

Terminal
npx arupui add spotlight-card shimmer-button
Spotlight CardRetro GridShimmer ButtonMeteorsShine BorderGlobe SpinnerNumber TickerWord RotateGradient TextLetter PullupPulsating ButtonDot PatternAnimated BeamFlip CardBlur InTilt CardFloating DockAurora BGMarqueeBento Grid
Spotlight CardRetro GridShimmer ButtonMeteorsShine BorderGlobe SpinnerNumber TickerWord RotateGradient TextLetter PullupPulsating ButtonDot PatternAnimated BeamFlip CardBlur InTilt CardFloating DockAurora BGMarqueeBento Grid
Why ArupUI
Core Principle

You own every line of code.

Other libraries give you a dependency. ArupUI gives you the source. Paste it, tweak it, rebrand it — it's yours forever. No update anxiety. No breaking changes. No asking permission.

Copy-Paste
TypeScript
Tailwind
Framer Motion

Visual Theme Editor

10 presets, 56 fonts, HSL pickers. The entire site updates live. Export Tailwind v3/v4 CSS.

One-Command Install

npx arupui add — resolves deps, transforms imports, writes files.

0+creative components
0React hooks, zero deps
Live Showcase

Components that move.

Using your current theme. Hit the button to remix.

Spotlight Card

Cursor-tracking radial spotlight on hover.

Shine Border

Rotating conic gradient spotlight sweep.

Hover to flip

3D Flip

Glowing Border + Bento Grid

Combine effects for unique feature sections. Each component is composable.

Creative
Composable

Globe + Meteors

Text Effect

Beautiful Animated Gradients

Entrance Effect

ArupUI Components
Features

50+ Creative Components

Meteors raining down your hero. Text that types itself. Cards that glow when you hover. The stuff that makes people pause and say 'how did they do that?'

Framer MotionCSS AnimationsZero Lock-in

Visual Theme Editor

Pick a preset and watch every component on the site transform instantly. Tweak HSL colors, swap fonts, adjust radius — then export Tailwind CSS in one click.

10 Presets56 FontsLive PreviewCSS Export

Source Code on Every Page

Expand 'Manual Install' on any component page — full source with syntax highlighting, numbered steps, and a copy button. No hidden magic, no black boxes.

Full SourceShiki HighlightingCopy Button

One-Command CLI

Type npx arupui add spotlight-card. It fetches the source, installs what's needed, rewrites imports for your project, and you're done. That's the whole workflow.

Registry APIAuto DependenciesImport Transform

14 React Hooks, Zero Deps

useDebounce, useIntersection, useKeyboardShortcut, useReducedMotion — tiny, focused hooks with zero dependencies. Just paste the file and import.

Pure ReactSSR SafeTypeScript

Three steps. Ship today.

01

Pick your theme

Choose from 10 presets or go custom. The whole site previews your theme.

// Open /themes → pick a preset
// Or customize colors & fonts
// Everything updates live
02

Add components

CLI or copy-paste. Each component is self-contained with zero coupling.

npx arupui add spotlight-card
npx arupui add shimmer-button
npx arupui add retro-grid
03

Export & ship

Export your theme for Tailwind v3 or v4. Paste and go.

// Click 'Export CSS'
// Paste into globals.css
// That's it. You're done.
Yourinterfaceshouldfeelalive.ArupUImakesthateffortless.
Theme Editor

Make it yours.

Your brand. Your colors. Your fonts. The whole site transforms live.

Your next project deserves
the wow factor.

50+ motion-rich components. 14 hooks. Visual theme editor.
Paste it. Brand it. Ship it.

Theme Editor

Theme

Radius0.5rem
Letter Spacing0em

Colors

light