@forgeui

ForgeUI is an animation-first React component library built with Next.js, TypeScript, Tailwind CSS, and Framer Motion. Components include animated-form, animated-otp, bot-detection, framework-agnostic, fraud-card, notification-center, security-card, vault-lock, and visual background effects (auralis, chromatic-fluid, cloudscape, cosmicrift, lumadrift, velaris, velora). Also provides animated-tabs, expandable-card, notification-panel, onboard-card, social-card, spectrum-switcher, stack-ripple, stats-card, text-morph, text-reveal, and text-shimmer. Distributed via the shadcn registry. Source is available for personal and commercial use but redistribution as a UI library is prohibited. Use for: adding distinctive motion-enhanced forms, OTP inputs, and animated background effects to product landing pages or dashboards when visual differentiation and micro-interactions are the priority.

28 components react shadcn-cli

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://forgeui.in/r/registry.json

pnpm pnpm dlx shadcn@latest add https://forgeui.in/r/registry.json

bun bunx shadcn@latest add https://forgeui.in/r/registry.json

fetch registry curl -s https://forgeui.in/r/registry.json

Components

28 total

Animated Form ui

Animated form mimicking account creation with progressive name/password animation and completion checkmarks.

npx shadcn@latest add https://forgeui.in/r/animated-form.json

Animated Tabs ui

witch tabs smoothly with motion-based underline or highlight effects.

npx shadcn@latest add https://forgeui.in/r/animated-tabs.json

Animated OTP ui

Looping animated OTP input with glowing digit transitions to simulate secure, timed authentication flow.

npx shadcn@latest add https://forgeui.in/r/animated-otp.json

Bot Detection ui

Animated radar-style component that simulates real-time bot detection using glowing pulses and scanning motion.

npx shadcn@latest add https://forgeui.in/r/bot-detection.json

Expandable Card ui

Interactive UI component to expand cards with smooth animations and detailed content using layout transitions.

npx shadcn@latest add https://forgeui.in/r/expandable-card.json

Framework Agnostic ui

Visually demonstrates cross-framework adaptability using animated stack icons and a glowing pipeline effect.

npx shadcn@latest add https://forgeui.in/r/framework-agnostic.json

Fraud Card ui

A security alert card inspired by Clerk's landing page, showcasing blocked emails with smooth hover animations.

npx shadcn@latest add https://forgeui.in/r/fraud-card.json

Notification Center ui

Beautifully animated mobile UI showcasing notifications with hover-triggered transitions and customizable content blocks.

npx shadcn@latest add https://forgeui.in/r/notification-center.json

Notification Panel ui

A collapsible notification panel displaying recent alerts with icons, timestamps, and smooth animated transitions.

npx shadcn@latest add https://forgeui.in/r/notification-panel.json

Onboard Card ui

Animated onboarding progress card showing three steps with visual loaders, transitions, and completion indicators.

npx shadcn@latest add https://forgeui.in/r/onboard-card.json

Security Card ui

Dynamic security identity card with animated verification, glowing avatar outline, and infinite character scramble stream.

npx shadcn@latest add https://forgeui.in/r/security-card.json

Social Card ui

An animated profile card showing name, avatar, and social links on hover.

npx shadcn@latest add https://forgeui.in/r/social-card.json

Stats Card ui

A dynamic stats card comparing two individuals with avatars, data points, and animated background graph.

npx shadcn@latest add https://forgeui.in/r/stats-card.json

Spectrum Switcher ui

Interactive spectrum switcher with animated gradients, smooth dropdown transitions, and selectable themed color palettes.

npx shadcn@latest add https://forgeui.in/r/spectrum-switcher.json

Text Reveal ui

A stylish effect that sequentially fades in text on page load, creating a dynamic reveal.

npx shadcn@latest add https://forgeui.in/r/text-reveal.json

Text Morph ui

A React component that animates rotating text characters using Motion, customizable by words, interval, styling, and animation timing.

npx shadcn@latest add https://forgeui.in/r/text-morph.json

Text Shimmer ui

A React component that creates an animated text shimmer effect using Motion, customizable by tag, duration, spread, delay, and repeat delay.

npx shadcn@latest add https://forgeui.in/r/text-shimmer.json

Stack Ripple ui

Animated stacked notification cards ripple open with smooth transitions, showing messages, signups, and billing reminders.

npx shadcn@latest add https://forgeui.in/r/stack-ripple.json

Vault Lock ui

Animated vault showcasing secure password input with motion effects and interactive hover-based unlock behavior.

npx shadcn@latest add https://forgeui.in/r/vault-lock.json

Cloudscape ui

A WebGL-powered animated cloud gradient that creates a soft, flowing sky-like background using layered noise and color blending.

npx shadcn@latest add https://forgeui.in/r/cloudscape.json

Lumadrift ui

A WebGL-powered animated gradient that produces smooth, flowing light patterns using procedural noise and color blending.

npx shadcn@latest add https://forgeui.in/r/lumadrift.json

Cosmicrift ui

A WebGL-powered animated cosmic background featuring a procedural starfield with twinkling effects and flowing nebula-like wave distortions, rendered in real t…

npx shadcn@latest add https://forgeui.in/r/cosmicrift.json

Chromatic Fluid ui

A WebGL-powered animated fluid effect featuring procedural noise, chromatic glint highlights, and dynamic lighting with film grain.

npx shadcn@latest add https://forgeui.in/r/chromatic-fluid.json

Velora ui

A WebGL-powered animated radial light effect featuring swirling color streaks, 3D noise-based flow, and dynamic color transitions with film grain.

npx shadcn@latest add https://forgeui.in/r/velora.json

Velaris ui

A WebGL-powered animated background featuring layered simplex noise, multi-color blending, vignette glow, and subtle film grain effects.

npx shadcn@latest add https://forgeui.in/r/velaris.json

Auralis ui

A WebGL-powered animated background featuring layered simplex noise, glowing light effects, vignette, and subtle film grain for a dramatic ambiance.

npx shadcn@latest add https://forgeui.in/r/auralis.json

Nebulore ui

A WebGL-powered animated nebula background featuring flowing aurora ribbons, domain-warped simplex noise, and customizable color glow with film grain.

npx shadcn@latest add https://forgeui.in/r/nebulore.json

Noctylis ui

A WebGL-powered nocturnal glow background featuring chained simplex noise layers, soft violet light blooms, vignette, and film grain.

npx shadcn@latest add https://forgeui.in/r/noctylis.json