---
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", "pro-available", "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: true
pro_url: "https://forgeui.in/pricing"
github_stars: 183
component_count: 24
generated_at: "2026-09-21T01:50:16.753Z"
---

# @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
- Pro / pricing: https://forgeui.in/pricing

## 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 (24)

| 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-otp | registry:ui | Animated OTP input with glowing digit transitions, inspired by Clerk’s authentication UI and rebuilt with custom behavior. | `npx shadcn@latest add https://forgeui.in/r/animated-otp.json` |
| animated-tabs | registry:ui | Switch tabs smoothly with motion-based underline or highlight effects. | `npx shadcn@latest add https://forgeui.in/r/animated-tabs.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` |
| 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` |
| 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` |
| 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` |
| 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` |
| 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` |
| 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` |
| noctylis | registry:ui | A WebGL-powered nocturnal glow background with layered simplex noise, soft violet blooms, and a gentle drifting warp. | `npx shadcn@latest add https://forgeui.in/r/noctylis.json` |
| notification-center | registry:ui | Beautifully animated mobile UI inspired by Clerk’s product design, showcasing notifications with hover-triggered transitions and customizable content blocks. | `npx shadcn@latest add https://forgeui.in/r/notification-center.json` |
| progress-stack | registry:ui | Animated onboarding progress card showing three steps with visual loaders, transitions, and completion indicators. | `npx shadcn@latest add https://forgeui.in/r/progress-stack.json` |
| security-card | registry:ui | Dynamic security identity card with animated verification, glowing avatar outline, and infinite character scramble stream, inspired by Clerk’s product design. | `npx shadcn@latest add https://forgeui.in/r/security-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` |
| 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` |
| 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` |
| 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-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-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` |
| vault-lock | registry:ui | Animated vault showcasing secure password input with motion effects and interactive hover-based unlock behavior, inspired by Clerk’s product design. | `npx shadcn@latest add https://forgeui.in/r/vault-lock.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` |
| 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` |

## 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).
```