Emerald UI

https://www.emerald-ui.com/docs
Admin
Emerald UI offers beautifully crafted UI components for direct application integration, bypassing...
Tokens:3,916
Snippets:77
Trust Score:3.9
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Simple Hero Component

Source: https://www.emerald-ui.com/docs/components/hero

Install the simple hero component using npm, yarn, or pnpm. This is the initial setup step before using the component.

```bash
pnpm dlx shadcn@latest add @emerald-ui/simple-hero
```

--------------------------------

### Install Emerald UI Pricing Card

Source: https://www.emerald-ui.com/docs/components/pricing

Use this command to install the Emerald UI pricing card component. Ensure you have shadcn-ui installed.

```bash
pnpm dlx shadcn@latest add @emerald-ui/node-ui-pricing-card
```

--------------------------------

### Install Subscribe Input Component

Source: https://www.emerald-ui.com/docs/components/subscribe-input

Install the Subscribe Input component using npm, yarn, or pnpm.

```bash
pnpm dlx shadcn@latest add @emerald-ui/subscribe-input
```

--------------------------------

### Install Footer Component

Source: https://www.emerald-ui.com/docs/components/footer

Install the @emerald-ui/keep-it-touch package to use the footer component. This command works with npm, pnpm, and bun.

```bash
pnpm dlx shadcn@latest add @emerald-ui/keep-it-touch
```

--------------------------------

### Initialize Emerald UI Setup

Source: https://www.emerald-ui.com/docs

Run this command to initialize the Emerald UI setup in your project. This command configures the project's component architecture using `components.json`.

```bash
bunx --bun shadcn@latest init
```

```bash
npx shadcn@latest init
```

```bash
pnpm dlx shadcn@latest init
```

--------------------------------

### Install Voice Record Component

Source: https://www.emerald-ui.com/docs/components/voice-record

Install the voice record component using npm, pnpm, or bun. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @emerald-ui/voice-record
```

--------------------------------

### Install Stacked Article Cards

Source: https://www.emerald-ui.com/docs/components/cards

Install the stacked article cards component using npm or pnpm. These cards expand on click with smooth glassmorphism transitions.

```bash
pnpm dlx shadcn@latest add @emerald-ui/stacked-article-cards
```

--------------------------------

### Install Emerald UI Simple Pricing Card

Source: https://www.emerald-ui.com/docs/components/pricing

Install the simple and reusable pricing card component from Emerald UI. This is a straightforward option for displaying pricing.

```bash
pnpm dlx shadcn@latest add @emerald-ui/simple-pricing-card
```

--------------------------------

### Install Animated Dropdown with npm

Source: https://www.emerald-ui.com/docs/components/animated-dropdown

Install the Animated Dropdown component using npm. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @emerald-ui/animated-dropdown
```

--------------------------------

### Install Gradient File Upload

Source: https://www.emerald-ui.com/docs/components/gradient-file-upload

Install the Gradient File Upload component using npm, pnpm, or bun. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @emerald-ui/gradient-file-upload
```

--------------------------------

### Install Tooltip Cat Component

Source: https://www.emerald-ui.com/docs/components/tooltip-cat

Install the Tooltip Cat component using npm, yarn, or pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @emerald-ui/tooltip-cat
```

--------------------------------

### Render 3D Marquee Component

Source: https://www.emerald-ui.com/docs

Example of how to import and render the `3D Marquee` component in your React application after installation.

```javascript
import 3DMarquee from "@/components/ui/3d-marquee";

export default function Page() {
    return <3DMarquee />;
}
```

--------------------------------

### Install 3D Marquee with npm

Source: https://www.emerald-ui.com/docs/components/3d-marquee

Install the 3D Marquee component using npm. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @emerald-ui/3d-marquee
```

--------------------------------

### Install Parallax Image Component

Source: https://www.emerald-ui.com/docs/components/parallax-image

Install the Parallax Image component using npm, pnpm, or bun. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @emerald-ui/parallax-image
```

--------------------------------

### Install Emerald UI Holographic Pricing Card

Source: https://www.emerald-ui.com/docs/components/pricing

Install the holographic pricing card component from Emerald UI. This component features futuristic effects.

```bash
pnpm dlx shadcn@latest add @emerald-ui/holographic-pricing-card
```

--------------------------------

### Install Animated Number

Source: https://www.emerald-ui.com/docs/components/animated-number

Install the Animated Number component using npm, pnpm, or yarn. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @emerald-ui/animated-number
```

--------------------------------

### Install Job Listing Card

Source: https://www.emerald-ui.com/docs/components/cards

Install the job listing card component using npm or pnpm. This card displays company information, position details, requirements, and application statistics.

```bash
pnpm dlx shadcn@latest add @emerald-ui/job-listing-card
```

--------------------------------

### Install Text Shimmer Component

Source: https://www.emerald-ui.com/docs/components/text

Use this command to add the text shimmer component to your project. It requires the shadcn CLI.

```bash
pnpm dlx shadcn@latest add @emerald-ui/text-shimmer
```

--------------------------------

### Install Profile Card

Source: https://www.emerald-ui.com/docs/components/cards

Install the profile card component using npm or pnpm. This component features a user's avatar, verification badge, stats, and a follow button.

```bash
pnpm dlx shadcn@latest add @emerald-ui/profile-card
```

--------------------------------

### Install Checkout Card

Source: https://www.emerald-ui.com/docs/components/cards

Install the checkout card component using npm or pnpm. This component presents product details, delivery status, and a payment summary for a checkout process.

```bash
pnpm dlx shadcn@latest add @emerald-ui/checkout-card
```

--------------------------------

### Install Typing Effect Component

Source: https://www.emerald-ui.com/docs/components/text

Use this command to add the typing effect component to your project. It requires the shadcn CLI.

```bash
pnpm dlx shadcn@latest add @emerald-ui/typing-effect
```

--------------------------------

### Flip Card - On Click Example

Source: https://www.emerald-ui.com/docs/components/flip-card

Demonstrates a flip card that animates its flip on click. Use this for content that users should intentionally reveal.

```html
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h3>On Click</h3>
      <p>Discover what's hidden on the other side of this card.</p>
    </div>
    <div class="flip-card-back">
      <h3>You found it!</h3>
      <p>This side can hold additional details, quick actions, or hidden content your users might find useful.</p>
      <button>Action Button</button>
    </div>
  </div>
</div>
```

--------------------------------

### Install Job Details Card

Source: https://www.emerald-ui.com/docs/components/cards

Install the job details card component using npm or pnpm. This card provides comprehensive job information including company logo, tags, and applicant statistics.

```bash
pnpm dlx shadcn@latest add @emerald-ui/job-details-card
```

--------------------------------

### Install Team Member Card

Source: https://www.emerald-ui.com/docs/components/cards

Install the team member card component using npm or pnpm. This component displays a team member's profile with their role, name, and bio.

```bash
pnpm dlx shadcn@latest add @emerald-ui/team-member-card
```

--------------------------------

### Install Text Scramble Component

Source: https://www.emerald-ui.com/docs/components/text

Use this command to add the text scramble component to your project. It requires the shadcn CLI.

```bash
pnpm dlx shadcn@latest add @emerald-ui/text-scramble
```

--------------------------------

### Flip Card - On Hover Example

Source: https://www.emerald-ui.com/docs/components/flip-card

Illustrates a flip card that animates its flip on hover. Ideal for quick reveals of supplementary information without requiring a click.

```html
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h3>On Hover</h3>
      <p>Discover whats hidden on the other side of this card.</p>
    </div>
    <div class="flip-card-back">
      <h3>You found it!</h3>
      <p>This side can hold additional details, quick actions, or hidden content your users might find useful.</p>
      <button>Action Button</button>
    </div>
  </div>
</div>
```

--------------------------------

### Add 3D Marquee Component

Source: https://www.emerald-ui.com/docs

Install the `3D Marquee` component into your project using the CLI. This command automatically fetches all required dependencies, including styles and animation utilities.

```bash
bunx --bun shadcn@latest add @emerald-ui/3d-marquee
```

```bash
npx shadcn@latest add @emerald-ui/3d-marquee
```

```bash
pnpm dlx shadcn@latest add @emerald-ui/3d-marquee
```

--------------------------------

### Flip Card - Vertical Flip Example

Source: https://www.emerald-ui.com/docs/components/flip-card

Shows a flip card with a vertical flipping animation. This variant offers a different visual effect for revealing content.

```html
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h3>Vertical Flip</h3>
      <p>Discover whats hidden on the other side of this card.</p>
    </div>
    <div class="flip-card-back">
      <h3>You found it!</h3>
      <p>This side can hold additional details, quick actions, or hidden content your users might find useful.</p>
      <button>Action Button</button>
    </div>
  </div>
</div>
```

--------------------------------

### Add Base Utilities (cn function)

Source: https://www.emerald-ui.com/docs

Install the core utility function `cn` which is used by most Emerald UI components. Ensure your environment is configured for Tailwind CSS v4.

```bash
bunx --bun shadcn@latest add https://emerald-ui.com/r/utils.json
```

```bash
npx shadcn@latest add https://emerald-ui.com/r/utils.json
```

```bash
pnpm dlx shadcn@latest add https://emerald-ui.com/r/utils.json
```

--------------------------------

### Connect Emerald UI Registry

Source: https://www.emerald-ui.com/docs

Append this JSON block to your `components.json` file to connect the Emerald UI registry. This allows the CLI to fetch components from Emerald UI.

```json
{
  "registries": {
    "@emerald-ui": "https://emerald-ui.com/r/{name}.json"
  }
}
```

--------------------------------

### Basic Tooltip Cat Usage

Source: https://www.emerald-ui.com/docs/components/tooltip-cat

Demonstrates the basic implementation of the Tooltip Cat component. The cat is initially sleeping and animates when the tooltip is hovered.

```javascript
import TooltipCat from "@emerald-ui/tooltip-cat";

function App() {
  return (
    <TooltipCat>
      Shhhh... The cat is sleeping 🐱
    </TooltipCat>
  );
}
```
Tokens:
Raw