Morphing Pill

Installation

Prerequisites

Before you begin, ensure your project meets the following requirements:

• TailwindCSS: Used for all styling. Refer to the TailwindCSS documentation for setup if you haven't already.
• Framer Motion: The core animation library. All animations and animated components rely on it. See the Framer Motion documentation for more details.
• Lucide React: Used for icons within the component. See Lucide React.

Setup

Follow these steps to integrate the Morphing Pill into your project.

1. Install Dependencies

Install the necessary dependencies for the component and its underlying libraries:

You'll also need tailwindcss-animate if you haven't already installed it for other shadcn/ui components:

2. Configure tailwind.config.js

Ensure tailwindcss-animate is added to your Tailwind CSS configuration:

// tailwind.config.js
module.exports = {
  // ... other configurations
  plugins: [
    require("tailwindcss-animate"),
    // ... other plugins
  ],
};

3. Create cn Utility Function

If you don't already have it from installing other shadcn/ui components, create a utility file, typically utils.ts (or utils.js), inside a lib folder (e.g., @/lib/utils.ts or src/lib/utils.ts). This file will contain a helper function cn for conditionally joining class names.

Paste the following code into lib/utils.ts:

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Ensure your tsconfig.json or jsconfig.json is set up for path aliases if you're using them (e.g., "@/lib/cn"). Example for tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"] // Adjust if your lib folder is not in src
    }
    // ... other compiler options
  }
}

4. Global CSS (if needed for .center)

The MorphingPill component internally uses a class center. If not already defined globally in your project (e.g. from other components or a general utility stylesheet), you can add it:

/* Your global CSS file (e.g., app.css, globals.css, index.css) */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer utilities {
  .center {
    @apply flex items-center justify-center;
  }
  /* Add other custom utilities here if needed */
}

Alternatively, you can modify the component's source code to use flex items-center justify-center directly where center is used.

Basic Usage

After installation and setup, you can import and use the MorphingPill component in your React application:

import MorphingPill from "@/components/ui/morphing-pill"; // Adjust path based on your installation location
 
export default function MyPage() {
  return (
    <div className="flex h-screen items-center justify-center">
      <MorphingPill />
    </div>
  );
}

The MorphingPill component is self-contained and manages its own state for the interactive elements. The default items are defined within the component. For customization (e.g., different items, icons, colors), you would need to modify the component's source code directly after installation.