---
name: "@forgeui"
slug: "forgeui"
description: "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."
category: "Animated components"
tags: ["accessibility", "aesthetic", "animation", "auth", "backgrounds", "blocks", "buttons", "cards", "dashboard", "design-system", "forms", "loaders", "marketing", "navigation", "overlays", "saas", "text-effects"]
framework: "react"
license: null
author: "AmanShakya0018"
website: "https://forgeui.in/"
github: "https://github.com/AmanShakya0018/forgeui"
registry: "https://forgeui.in/r/registry.json"
pro: false
pro_url: null
github_stars: 183
component_count: 28
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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.

## Links

- Website: https://forgeui.in/
- GitHub: https://github.com/AmanShakya0018/forgeui
- Registry JSON: https://forgeui.in/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/forgeui
- This file: https://sh4dcn.vercel.app/md/forgeui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://forgeui.in/r/registry.json
pnpm dlx shadcn@latest add https://forgeui.in/r/registry.json
bunx shadcn@latest add https://forgeui.in/r/registry.json
# clone the source repo
git clone https://github.com/AmanShakya0018/forgeui.git
# fetch the raw registry index
curl -s https://forgeui.in/r/registry.json
```

## Components (28)

| name | type | description | install |
| --- | --- | --- | --- |
| animated-form | registry: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 | registry:ui | witch tabs smoothly with motion-based underline or highlight effects. | `npx shadcn@latest add https://forgeui.in/r/animated-tabs.json` |
| animated-otp | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @forgeui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/forgeui.md) for the component list.
2. Fetch the machine-readable index: https://forgeui.in/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: forgeui).
```