Animated Copy-Paste UI Components Library

Kaif UI is a ready-to-use, copy-paste UI components library built with Next.js, shadcn/ui, Tailwind CSS, and Framer Motion.

It focuses on delivering high-quality UI components without requiring complex installations or dependencies.

You can access all components through their documentation website and add them to your applications within minutes.

GitHub Repo

Browse UI Components

Features

🔧 Copy-Paste – No installation required, simply copy component code into your project

🧱 Pre-built Blocks: Includes larger sections like hero headers, pricing tables, and footers.

♿ Accessibility First – All components built with accessibility standards and ARIA compliance

🎯 Customizable Components – Easy to modify styling and behavior using Tailwind CSS classes

🎭 Animation Ready – Integrated Framer Motion animations for smooth interactions

🧩 Modular Approach – Use individual components or combine them for complex layouts

Use Cases

SaaS Dashboard Development – Build admin panels and user dashboards with components like circular navigation, floating docks, and custom loaders for professional applications
Marketing Website Creation – Utilize hero sections, pricing blocks, and authentication components to create conversion-focused landing pages and marketing sites
E-commerce Storefronts – Implement carousels for product displays, infinite sliders for testimonials, and custom cursors to create engaging shopping experiences
Portfolio and Agency Sites – Use zoom parallax effects, scroll velocity components, and Tailwind backgrounds to create visually impressive portfolio websites
Mobile-First Applications – Deploy responsive components like emoji navigation and pendulum effects for touch-friendly mobile web applications

Installation

1. Visit Kaif UI’s Documentation

2. Browse the component gallery and select the components you need for your project.

3. Click on any component to view its code and copy it to your clipboard.

4. Add the component code directly to your React application files.

5. Some components require specific dependencies. Check the component documentation for any additional packages:

npm install framer-motion
npm install tailwindcss

6. Here’s how to add a infinite slider component to your web application:

import {
  InfiniteSlider
} from '@/components/kaif-ui/infiniteSlider';
import Image from 'next/image';

const images = [{
    title: "Image 1",
    image: "https://cdn.pixabay.com/photo/2024/09/20/05/39/panda-9060543_640.jpg",
  },
  {
    title: "Image 2",
    image: "https://cdn.pixabay.com/photo/2024/04/12/18/18/ai-generated-8692405_1280.jpg",
  },
  {
    title: "Image 3",
    image: "https://cdn.pixabay.com/photo/2024/01/10/03/29/ai-generated-8498790_1280.jpg",
  },
  {
    title: "Image 4",
    image: "https://cdn.pixabay.com/photo/2024/05/30/17/23/bicycle-8798997_640.jpg",
  },
  {
    title: "Image 5",
    image: "https://cdn.pixabay.com/photo/2024/05/26/10/26/ai-generated-8788505_960_720.jpg",
  },
  {
    title: "Image 1 second row",
    image: "https://cdn.pixabay.com/photo/2024/09/20/05/39/panda-9060543_640.jpg",
  },
  {
    title: "Image 2 second row",
    image: "https://cdn.pixabay.com/photo/2024/04/12/18/18/ai-generated-8692405_1280.jpg",
  },
  {
    title: "Image 3 second row",
    image: "https://cdn.pixabay.com/photo/2024/01/10/03/29/ai-generated-8498790_1280.jpg",
  },
  {
    title: "Image 4 second row",
    image: "https://cdn.pixabay.com/photo/2024/05/30/17/23/bicycle-8798997_640.jpg",
  },
  {
    title: "Image 5 second row",
    image: "https://cdn.pixabay.com/photo/2024/05/26/10/26/ai-generated-8788505_960_720.jpg",
  },
];

export function InfiniteSliderVertical() {
  return ( <
    div className = 'flex h-[400px] space-x-4 mx-auto w-full max-w-max' >
    <
    InfiniteSlider direction = 'vertical' > {
      images.map((image) => ( <
        div className = 'aspect-square w-[120px] rounded-[4px]' >
        <
        Image key = {
          image.title
        }
        src = {
          image.image
        }
        alt = {
          image.title
        }
        width = {
          1200
        }
        height = {
          1200
        }
        className = "object-cover h-full w-full rounded-[4px]" /
        >
        <
        /div>
      ))
    } <
    /InfiniteSlider> <
    InfiniteSlider direction = 'vertical'
    reverse > {
      images.map((image) => ( <
        div className = 'aspect-square w-[120px] rounded-[4px]' >
        <
        Image key = {
          image.title
        }
        src = {
          image.image
        }
        alt = {
          image.title
        }
        width = {
          1200
        }
        height = {
          1200
        }
        className = "object-cover h-full w-full rounded-[4px]" /
        >
        <
        /div>
      ))
    } <
    /InfiniteSlider> <
    /div>
  );
}

Related Resources

Shadcn/ui – A collection of reusable components built using Radix UI and Tailwind CSS that inspired Kaif UI’s architecture
Framer Motion – The animation library powering Kaif UI’s smooth transitions and interactive effects
Tailwind UI – Official Tailwind CSS component library offering professional designs and patterns

FAQs

Q: Do I need to install Kaif UI as a package?
A: No, Kaif UI follows a copy-paste approach. You simply copy the component code from their website and paste it directly into your project files.

Q: Can I modify the component styles?
A: Yes, all components use Tailwind CSS classes, making them easy to customize. You can modify colors, spacing, animations, and other properties by editing the CSS classes.