---
name: "@emerald-ui"
slug: "emerald-ui"
description: "Emerald UI is a dual-purpose platform combining an inspirational website-design gallery with a CLI-installable shadcn component registry. Motion (Framer Motion) components include 3D marquee, animated dropdown, animated input, animated number, buttons, cards, flip-card, tooltip-cat, footer, gradient file upload, hero, parallax image, pricing, subscribe input, and text animations. GSAP components add color text reveal, fancy text hover, interactive team, link hover, magnetic effect, and scroll text reveal variants. The gallery uses Payload CMS v3, Supabase auth, and Cloudflare R2. Built on Next.js + React 19, Tailwind CSS v4. Free, MIT licensed. Use for: sourcing GSAP and Framer Motion-powered interactive components for high-motion marketing or portfolio sites, or browsing curated site designs for creative inspiration."
category: "Animated components"
tags: ["3d", "accessibility", "aesthetic", "animation", "auth", "backgrounds", "blocks", "buttons", "cards", "cms", "forms", "marketing", "media", "overlays", "pro-available", "text-effects"]
framework: "react"
license: "MIT"
author: "Shatlyk1011"
website: "https://emerald-ui.com"
github: "https://github.com/Shatlyk1011/emerald-ui"
registry: "https://emerald-ui.com/r/{name}.json"
pro: true
pro_url: "https://emerald-ui.com/docs/components/pricing"
github_stars: 5
component_count: 0
generated_at: "2026-07-28T08:00:50.948Z"
---

# @emerald-ui

Emerald UI is a dual-purpose platform combining an inspirational website-design gallery with a CLI-installable shadcn component registry. Motion (Framer Motion) components include 3D marquee, animated dropdown, animated input, animated number, buttons, cards, flip-card, tooltip-cat, footer, gradient file upload, hero, parallax image, pricing, subscribe input, and text animations. GSAP components add color text reveal, fancy text hover, interactive team, link hover, magnetic effect, and scroll text reveal variants. The gallery uses Payload CMS v3, Supabase auth, and Cloudflare R2. Built on Next.js + React 19, Tailwind CSS v4. Free, MIT licensed. Use for: sourcing GSAP and Framer Motion-powered interactive components for high-motion marketing or portfolio sites, or browsing curated site designs for creative inspiration.

## Links

- Website: https://emerald-ui.com
- GitHub: https://github.com/Shatlyk1011/emerald-ui
- Registry JSON: https://emerald-ui.com/r/{name}.json
- Directory page: https://sh4dcn.vercel.app/registry/emerald-ui
- This file: https://sh4dcn.vercel.app/md/emerald-ui.md
- Pro / pricing: https://emerald-ui.com/docs/components/pricing

## Install

```sh
# clone the source repo
git clone https://github.com/Shatlyk1011/emerald-ui.git
# fetch the raw registry index
curl -s https://emerald-ui.com/r/{name}.json
```

## Components (0)

_No public registry index resolved for this library._

## For AI agents

```text
You are adding components from @emerald-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/emerald-ui.md) for the component list.
2. Fetch the machine-readable index: https://emerald-ui.com/r/{name}.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: emerald-ui).
```