Package Manager Installation

Before using FingUI, make sure you have a package manager installed.
We recommend Bun for speed, but you can also use npm or pnpm depending on your preference.

1. Prerequisites

Install Bun globally

Develop, test, run, and bundle JavaScript & TypeScript projects—all with Bun. Bun is an all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager. Bun aims for 100% Node.js compatibility.

On macOS / Linux

curl -fsSL https://bun.sh/install | bash

Then add Bun to your PATH (if not added automatically):

export BUN_INSTALL="$HOME/.bun"
export PATH="$BUN_INSTALL/bin:$PATH"

Verify installation:

bun --version

On Windows (PowerShell):

powershell -c "irm bun.sh/install.ps1 | iex"

Install npm (Node Package Manager):

npm comes bundled with Node.js If you have Node.js installed, npm is already available.

Check version:

npm --version

Update npm globally:

npm install -g npm

Install pnpm (Performant npm):

pnpm is a fast, disk space-efficient package manager.

Install it globally using npm:

npm install -g pnpm

Verify Installation:

pnpm --version

2. Install required dependencies:

Before getting started, install the following core libraries:

• Framer Motion → Powerful animation library for React, ideal for smooth transitions and gestures.
• GSAP → Industry-standard JavaScript animation library, highly performant and flexible.
• Tailwind CSS v4 → A utility-first CSS framework, now even faster and more optimized in v4.
• Lucide React → Beautifully simple icons for your React apps.
• class-variance-authority → Utility for managing Tailwind variants and conditional styles.
• tailwind-variants → Variant management for Tailwind components.

bun add gsap framer-motion tailwindcss lucide-react class-variance-authority tailwind-variants

npm install gsap framer-motion tailwindcss lucide-react class-variance-authority tailwind-variants

pnpm add gsap framer-motion tailwindcss lucide-react class-variance-authority tailwind-variants

3. Install FingUI Utilities:

All components use Tailwind CSS v4 .Many components also use the cn utility function. Install it with:

bunx shadcn@latest add https://ui.fingui.dev/r/utils.json 

npx shadcn@latest add https://ui.fingui.dev/r/utils.json

pnpm dlx shadcn@latest add https://ui.fingui.dev/r/utils.json

4. Installing a Component:

For example, to install - AI Input Speech Recognition
Convert voice to text with built-in speech recognition for hands-free input.

bunx shadcn@latest add https://fing-ui.vercel.app/r/ai-input-03.json

npx shadcn@latest add https://fing-ui.vercel.app/r/ai-input-03.json

pnpm dlx shadcn@latest add https://fing-ui.vercel.app/r/ai-input-03.json

Then use it directly in your code:

Example Usage

"use client";

import { AIInputThree } from "@/components/FingUIComponents/AIInputThree";

export default function ExamplePage() {
  const handleStart = () => {
    console.log("Recording started...");
  };

  const handleStop = (duration: number) => {
    console.log("Recording stopped after", duration, "seconds");
  };

  const handleSubmit = (transcript: string, duration: number) => {
    console.log("User said:", transcript);
    console.log("Duration:", duration, "seconds");
    alert(`You spoke for ${duration} seconds.\nTranscript: ${transcript}`);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-black">
      <AIInputThree
        demo={false}
        useSpeechRecognition={true}
        onStart={handleStart}
        onStop={handleStop}
        onSubmit={handleSubmit}
      />
    </div>
  );
}