### Install Badge Button Component

Source: https://skiper-ui.com/docs/components/badge-button

Install the Badge Button component using the shadcn CLI. This command fetches the component's configuration and adds it to your project.

```shell
npx shadcn@latest add "http://skiper-ui.com/registry/badge-button.json"
```

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

### Install Share Button Component using CLI

Source: https://skiper-ui.com/docs/components/share-button

This snippet demonstrates how to install the Share Button component into your project using the skiper-ui CLI. Ensure you have Node.js and npm/npx installed. The command fetches the component's configuration from the specified registry.

```cli
npx shadcn@latest add "http://skiper-ui.com/registry/share-button.json"
```

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

### Install Text Flipper Effect

Source: https://skiper-ui.com/docs/components/text-effect-flipper

Installs the Text Flipper Effect component using npx. This command fetches the component from the specified registry and adds it to your project.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/text-effect-flipper.json"
```

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

### Install Image Ripple Component

Source: https://skiper-ui.com/docs/components/image-ripple

Install the Image Ripple component using the provided npx command. This command fetches the component's configuration from the skiper-ui registry.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/image-ripple.json"
```

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

### Install Dependencies for Skiper-ui (npm)

Source: https://skiper-ui.com/docs/installation

Installs the necessary npm packages for Skiper-ui components, including tailwindcss, clsx, tailwind-merge, and framer-motion. These are essential for styling and animations.

```bash
npm install -D tailwindcss@latest clsx tailwind-merge framer-motion
```

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

### Install Hover Expand Component

Source: https://skiper-ui.com/docs/components/hover-expand

Installs the Hover Expand component into your project using the shadcn-ui CLI. This command fetches the component's configuration from a specified registry URL.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/hover-expand.json"
```

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

### Install AI Input Component via CLI

Source: https://skiper-ui.com/docs/components/ai-input

Installs the AI Input component using the shadcn-ui CLI. This command fetches the component's configuration and files from the specified registry URL.

```shell
npx shadcn@latest add "http://skiper-ui.com/registry/ai-input.json"
```

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

### Install Minimal Card Component

Source: https://skiper-ui.com/docs/components/minimal-card

Instructions to install the Minimal Card component using the shadcn CLI. This command adds the necessary configuration and code for the component to your project.

```shell
npx shadcn@latest add "http://skiper-ui.com/registry/minimal-card.json"
```

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

### Install Blur Vignette Component

Source: https://skiper-ui.com/docs/components/blur-vignette

Installs the Blur Vignette component using npx. This command adds the component's registry file to your project, enabling its integration.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/blur-vignette.json"
```

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

### Install Image CursorTrail Component

Source: https://skiper-ui.com/docs/components/image-cursortrail

Use this command to install the Image CursorTrail component into your project via the shadcn-ui CLI. Ensure you have Node.js and npm/npx installed.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/image-cursortrail.json"
```

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

### Install Expanded Tabs Component

Source: https://skiper-ui.com/docs/components/expanded-tabs

Installs the Expanded Tabs component and its dependencies using the shadcn CLI. This command fetches the component's configuration from the specified registry URL.

```shell
npx shadcn@latest add "http://skiper-ui.com/registry/expanded-tabs.json"
```

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

### Install Masked Div Component

Source: https://skiper-ui.com/docs/components/masked-div

Installs the Masked Div component using the shadcn-ui CLI. This command fetches the component configuration from the specified registry URL.

```cli
npx shadcn@latest add "http://skiper-ui.com/registry/masked-div.json"
```

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

### Install Skiper Marquee Component (CLI)

Source: https://skiper-ui.com/docs/components/skiper-marquee

Installs the Skiper Marquee component using the shadcn CLI. This command adds the necessary files and configurations to your project directory.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/skiper-marquee.json"
```

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

### Install PopoverForm Component using shadcn-ui CLI

Source: https://skiper-ui.com/docs/components/popover-form

This command installs the PopoverForm component using the shadcn-ui CLI. It fetches the component configuration from the specified registry URL, allowing for easy integration into your project.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/minimal-card.json"
```

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

### Install Animated Number Random Component

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

Installs the Animated Number Random component using the shadcn-ui CLI. This command fetches the component's configuration and code.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/animated-number-random.json"
```

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

### Install Slide Button Component

Source: https://skiper-ui.com/docs/components/slide-button

Installs the Slide Button component into your project using the shadcn/ui CLI. This command fetches the component's configuration and code from the specified registry URL.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/slide-button.json"
```

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

### Install Card Carousel using CLI

Source: https://skiper-ui.com/docs/components/card-carousel

Installs the Card Carousel component into your project using the shadcn CLI. This command fetches the component's JSON definition from the specified URL.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/card-carousel.json"
```

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

### Install Skiper Card Component

Source: https://skiper-ui.com/docs/components/skiper-card

Installs the Skiper Card component using npx and a provided registry URL. This command adds the component to your project via shadcn.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/skiper-card.json"
```

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

### Install Animated Number Countdown Component

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

Installs the Animated Number Countdown component using the shadcn-ui CLI. This command adds the necessary files and configurations for the countdown timer.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/animated-number-countdown.json"
```

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

### Usage Example

Source: https://skiper-ui.com/docs/components/skiper-marquee

Example of how to use the Skiper Marquee component in your application. This component is designed to create a cursor effect that follows images.

```jsx
<SkiperMarquee />
```

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

### Install Stack Dialog Component

Source: https://skiper-ui.com/docs/components/stacked-dialog

Installs the Stack Dialog component into your project using the shadcn CLI. This command fetches the component's configuration and code from the specified registry URL.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/stacked-dialog.json"
```

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

### Install Wrap Button Component (CLI)

Source: https://skiper-ui.com/docs/components/wrap-button

Installs the Wrap Button component into your project using the shadcn-ui CLI. This command fetches the component's source code and integrates it into your project's registry.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/wrap-button.json"
```

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

### Install Card Swipe Component

Source: https://skiper-ui.com/docs/components/card-swipe

Provides the command to install the Card Swipe component using npx. This command fetches the component's configuration from the skiper-ui registry, making it available for use in your project.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/card-swipe.json"
```

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

### Install Text Scroll Effect Component

Source: https://skiper-ui.com/docs/components/text-scroll

This command installs the Text Scroll Effect component into your project using npx. It fetches the component definition from the specified registry URL, allowing you to integrate it into your application.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/text-scroll.json"
```

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

### Basic Stacked Dialog Example

Source: https://skiper-ui.com/docs/components/stacked-dialog

A basic example showcasing the usage of the DialogStack component in React. It illustrates how to render multiple dialog contents, manage navigation between them using DialogStackPrevious and DialogStackNext, and includes a trigger and overlay.

```jsx
function BasicExample() {
  const items = [
    {
      title: "I'm the first dialog",
      description: "With a fancy description",
      content: <p></p>,
    },
    {
      title: "I'm the second dialog",
      description: "With a fancy description",
      content: <p></p>,
    },
    {
      title: "I'm the third dialog",
      description: "With a fancy description",
      content: <p></p>,
    },
    {
      title: "I'm the fourth dialog",
      description: "With a fancy description",
      content: <p></p>,
    },
    {
      title: "I'm the fifth dialog",
      description: "With a fancy description",
      content: <p></p>,
    },
  ]

  return (
    <DialogStack>
      {/* Trigger */}
      <DialogStackTrigger>
        Click to open &nbsp;{" "}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
        >
          <path
            fill="#ffffff"
            d="M11.589 3a.75.75 0 0 0-1.5 0v1.978a.75.75 0 0 0 1.5 0zM5.983 4.945A.75.75 0 0 0 4.917 6l1.47 1.483A.75.75 0 1 0 7.452 6.43zM16.761 6a.75.75 0 0 0-1.065-1.055l-1.47 1.484a.75.75 0 1 0 1.065 1.055zM11.8 10.096c-1.025-.404-1.994.617-1.61 1.61l3.581 9.25c.41 1.058 1.901 1.059 2.311 0l1.374-3.543l3.508-1.385c1.048-.414 1.048-1.903 0-2.317zm-6.84.067H3a.75.75 0 0 0 0 1.5h1.96a.75.75 0 0 0 0-1.5m2.492 5.234a.75.75 0 0 0-1.065-1.056l-1.47 1.484a.75.75 0 1 0 1.066 1.056z"
          />
        </svg>{" "}
      </DialogStackTrigger>

      {/* Overlay */}
      <DialogStackOverlay className=" backdrop-blur-[2px] " />

      {/* Body */}
      <DialogStackBody>
        {items.map((item, index) => (
          <DialogStackContent key={index}>
            <DialogStackHeader className="mt-2 flex flex-row  items-center gap-2">
              <Avatar>
                <AvatarImage
                  src="https://100x-wallet.gxuri.in/avatar.png"
                  alt="@gxuri"
                />
              </Avatar>
              <div>
                <h1 className="text-2xl font-semibold leading-none tracking-tight">
                  {item.title}
                </h1>
                <p className=" text-black/50 ">{item.description}</p>
              </div>
            </DialogStackHeader>

            {/* content here */}
            <div className="h-[50px]">{item.content}</div>

            <DialogStackFooter>
              <DialogStackPrevious className="flex gap-3">
                {" "}
                <Icons.arrow className="rotate-180" /> Previous{" "}
              </DialogStackPrevious>
              <DialogStackNext className="flex gap-3 ">
                {" "}
                Next <Icons.arrow />{" "}
              </DialogStackNext>
            </DialogStackFooter>
          </DialogStackContent>
        ))}
      </DialogStackBody>
    </DialogStack>
  )
}
```

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

### Popover Form Feedback Example (React/TypeScript)

Source: https://skiper-ui.com/docs/components/popover-form

Demonstrates a complete example of using the PopoverForm component to collect user feedback. It manages form state, handles submission logic with loading and success states, and includes keyboard event listeners for 'Escape' and 'Ctrl+Enter' shortcuts.

```TypeScript
export default function PopoverFormFeedbackExample() {
  const [formState, setFormState] = useState<FormState>("idle")
  const [open, setOpen] = useState(false)
  const [feedback, setFeedback] = useState("")

  function submit() {
    setFormState("loading")
    setTimeout(() => {
      setFormState("success")
    }, 1500)

    setTimeout(() => {
      setOpen(false)
      setFormState("idle")
      setFeedback("")
    }, 3300)
  }

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setOpen(false)
      }

      if (
        (event.ctrlKey || event.metaKey) &&
        event.key === "Enter" &&
        open &&
        formState === "idle"
      ) {
        submit()
      }
    }

    window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [open, formState])

  return (
    <div className="flex w-full items-center justify-center">
      <PopoverForm
        title="Feedback"
        open={open}
        setOpen={setOpen}
        width="364px"
        height="192px"
        showCloseButton={formState !== "success"}
        showSuccess={formState === "success"}
        openChild={
          <form
            onSubmit={(e) => {
              e.preventDefault()
              if (!feedback) return
              submit()
            }}
          >
            <div className="relative">
              <textarea
                autoFocus
                placeholder="Feedback"
                value={feedback}
                onChange={(e) => setFeedback(e.target.value)}
                className="h-32 w-full resize-none rounded-t-lg p-3 text-sm outline-none"
                required
              />
            </div>
            <div className="relative flex h-12 items-center px-[10px]">
              <PopoverFormSeparator />
              <div className="absolute left-0 top-0 -translate-x-[1.5px] -translate-y-1/2">
                <PopoverFormCutOutLeftIcon />
              </div>
              <div className="absolute right-0 top-0 translate-x-[1.5px] -translate-y-1/2 rotate-180">
                <PopoverFormCutOutRightIcon />
              </div>
              <PopoverFormButton loading={formState === "loading"} />
            </div>
          </form>
        }
        successChild={
          <PopoverFormSuccess
            title="Feedback Received"
            description="Thank you for supporting our project!"
          />
        }
      />
    </div>
  )
}
```

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

### Install Theme Toggle Button

Source: https://skiper-ui.com/docs/components/theme-toggle-animations

Command to add the theme toggle button component to your project using shadcn-ui. This command fetches the necessary files from a remote registry.

```bash
npx shadcn@latest add "http://skiper-ui.com/registry/theme-toggle-button.json"
```

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

### HoverExpand Component Usage Example

Source: https://skiper-ui.com/docs/components/hover-expand

Demonstrates how to use the HoverExpand component with various props. It takes an array of image URLs and configuration options for display and interaction.

```javascript
const images = [
  "https://images.pexels.com/photos/30082445/pexels-photo-30082445.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.unsplash.com/photo-1692606743169-e1ae2f0a960f?q=80&w=3560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://assets.lummi.ai/assets/QmQLSBeCFHUwCv7WBpGr7T3P67UXaAw8B2vvmtKimyinrL?auto=format&w=1500",
  "https://assets.lummi.ai/assets/QmXe6v7jBF5L2R7FCio8KQdXwTX2uqzRycUJapyjoXaTqd?auto=format&w=1500",
  "https://assets.lummi.ai/assets/QmNfwUDpehZyLWzE8to7QzgbJ164S6fQy8JyUWemHtmShj?auto=format&w=1500",
  "https://images.unsplash.com/photo-1706049379414-437ec3a54e93?q=80&w=1200&auto=format",
  "https://assets.lummi.ai/assets/Qmb2P6tF2qUaFXnXpnnp2sk9HdVHNYXUv6MtoiSq7jjVhQ?auto=format&w=1500",
  "https://images.unsplash.com/photo-1508873881324-c92a3fc536ba?q=80&w=1200&auto=format",
]

function BasicExample() {
  return (
    <HoverExpand
          images={images}
          initialSelectedIndex={0}
          thumbnailHeight={200}
          modalImageSize={400}
          maxThumbnails={11}
    />
  )
}
```

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

### Wrap Root Layout with ThemeProvider

Source: https://skiper-ui.com/docs/components/theme-toggle-animations

Example of how to integrate the ThemeProvider into your application's root layout file (`layout.tsx`) to manage theme settings across the application.

```typescript
import { ThemeProvider } from "@/components/ui/theme-provider"

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <>
      <html lang="en" suppressHydrationWarning>
        <head />
        <body>
          <ThemeProvider attribute="class" defaultTheme="system" enableSystem >
            {children}
          </ThemeProvider>
        </body>
      </html>
    </>
  )
}
```

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

### Use Theme Toggle Button Component

Source: https://skiper-ui.com/docs/components/theme-toggle-animations

Demonstrates how to import and use the ThemeToggleButton component within your React application. It shows a basic usage example.

```typescript
import ThemeToggleButton from "@components/ui/theme-toggle-button"

// Usage:
<ThemeToggleButton />
```

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

### Import HoverExpand Component

Source: https://skiper-ui.com/docs/components/hover-expand

Imports the HoverExpand component into your React application. Ensure your project's alias setup correctly points to the component's location.

```javascript
import HoverExpand from "@/ui/hover-expand"
```

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

### Usage Example

Source: https://skiper-ui.com/docs/components/text-effect-flipper

Demonstrates how to import and use the FlipLink component in a React application. The component is designed to create a text flipping animation, often used for links.

```javascript
import FlipLink from "../ui/text-effect-flipper"

function BasicExample() {
  return (
    <FlipLink href="https://x.com/guri_who">Behance</FlipLink>
  )
}
```

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

### Use Animated Number Counter Component

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

Provides an example of using the basic AnimatedNumberCounter component. This component likely handles simple number counting animations.

```typescript
import { AnimatedNumberCounter } from "./components/ui/animated-number-counter";

<AnimatedNumberCounter />
```

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

### Theme Toggle Button with GIF Variant

Source: https://skiper-ui.com/docs/components/theme-toggle-animations

Example of using the ThemeToggleButton with the 'gif' variant, specifying a URL for a transparent GIF to be displayed during the theme transition. This allows for custom animated effects.

```html
<ThemeToggleButton variant="gif" url="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMWI1ZmNvMGZyemhpN3VsdWp4azYzcWUxcXIzNGF0enp0eW1ybjF0ZyZlcD12MV9zdGlja2Vyc19zZWFyY2gmY3Q9cw/Fa6uUw8jgJHFVS6x1t/giphy.gif" />
<ThemeToggleButton variant="gif" url="https://media.giphy.com/media/ArfrRmFCzYXsC6etQX/giphy.gif?cid=ecf05e47kn81xmnuc9vd5g6p5xyjt14zzd3dzwso6iwgpvy3&ep=v1_stickers_search&rid=giphy.gif&ct=s"/>
```

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

### Utility Function for Class Merging (TypeScript)

Source: https://skiper-ui.com/docs/installation

Provides a utility function `cn` to merge CSS class names using clsx and tailwind-merge. This function is crucial for applying dynamic Tailwind CSS classes in React applications.

```typescript
import clsx, { ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
```

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

### Use Wrap Button Component (React)

Source: https://skiper-ui.com/docs/components/wrap-button

Demonstrates how to import and use the Wrap Button component in a React application. It shows a basic example with a button that wraps text and includes an icon, with custom styling applied via className.

```javascript
import { WrapButton } from "@/components/ui/wrap-button"
import { Globe } from "lucide-react" // Assuming Globe is imported from lucide-react or similar
```

```jsx
function BasicExample() {
  return (
   <div className="w-full flex ">
        <WrapButton className="mt-10" href="/docs/components/card-carousel" >
            <Globe className="animate-spin " />
            Get started
        </WrapButton>
    </div>
  )
}
```

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

### Use Expanded Tabs Component

Source: https://skiper-ui.com/docs/components/expanded-tabs

Renders the ExpandedTabs component by passing the defined tabs data structure as a prop. This example demonstrates the basic integration into a React application.

```jsx
<ExpandedTabs tabs={tabs} />
```

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

### Import Stacked Dialog Components

Source: https://skiper-ui.com/docs/components/stacked-dialog

Demonstrates how to import all necessary components for the Stacked Dialog UI from the '@/ui/stacked-dialog' module. This is typically the first step before utilizing the dialog functionality in your application.

```typescript
import {
  DialogStack,
  DialogStackBody,
  DialogStackContent,
  DialogStackFooter,
  DialogStackHeader,
  DialogStackNext,
  DialogStackOverlay,
  DialogStackPrevious,
  DialogStackTrigger,
} from "@/ui/stacked-dialog"
```

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

### Import Popover Form Components (TypeScript)

Source: https://skiper-ui.com/docs/components/popover-form

Imports the necessary UI components for the PopoverForm, including the form itself, buttons, icons, and separators, from a local registry path.

```TypeScript
import {
  PopoverForm,
  PopoverFormButton,
  PopoverFormCutOutLeftIcon,
  PopoverFormCutOutRightIcon,
  PopoverFormSeparator,
  PopoverFormSuccess,
} from "@/registry/default/ui/popover-form"
```

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

### Import ImageCursorTrail Component

Source: https://skiper-ui.com/docs/components/image-cursortrail

Imports the ImageCursorTrail component from its module path. This is the first step to using the component in your React application.

```javascript
import ImageCursorTrail from "@/ui/image-cursortrail"
```

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

### Basic Usage of ImageCursorTrail Component

Source: https://skiper-ui.com/docs/components/image-cursortrail

Demonstrates how to render the ImageCursorTrail component with a list of images and custom child content. It configures properties like maxNumberOfImages, distance, and styling classes.

```jsx
function BasicExample() {
  return (
    <ImageCursorTrail
        items={images}
        maxNumberOfImages={5}
        distance={25}
        imgClass="sm:w-40 w-28 sm:h-48 h-36  "
        className=" max-w-4xl rounded-3xl "
        >
          <article className="relative z-50 flex flex-col items-center justify-center ">
            <h1 className="max-w-2xl text-center text-5xl font-semibold tracking-tight ">
              Images That Follow the Cursor Cooool Right
            </h1>
          </article>
    </ImageCursorTrail>
  )
}
```

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

### HoverExpand Component Props (API)

Source: https://skiper-ui.com/docs/components/hover-expand

Defines the available props for the HoverExpand component, detailing their types, default values, and purpose. These props control the component's behavior and appearance.

```APIDOC
HoverExpand:
  Props:
    images: Array<string>
      Description: An array of image URLs to display.
      Required: true
    initialSelectedIndex: number
      Description: The index of the image to be initially selected.
      Default: 0
    thumbnailHeight: number
      Description: The height of the image thumbnails in pixels.
      Default: 200
    modalImageSize: number
      Description: The size (width/height) of the image displayed in the modal when expanded, in pixels.
      Default: 400
    maxThumbnails: number
      Description: The maximum number of thumbnails to display before pagination or scrolling.
      Default: 11
```

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

### Use AI Input Component in React

Source: https://skiper-ui.com/docs/components/ai-input

Imports and renders the AI Input component within a React application. This component provides a text area interface similar to ChatGPT.

```jsx
<AiInput/>
```

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

### Skiper Card Component Props

Source: https://skiper-ui.com/docs/components/skiper-card

Defines the properties available for the Skiper Card component, detailing their purpose and expected values for customization.

```APIDOC
SkiperCard:
  Props:
    title: string
      Description: The title of the component, e.g., "Components that pop".
    description: string
      Description: A brief description: "Make your app 🤌".
    bgClass: string
      Description: Configuration for the background styling of the component.
    image: object
      Description: Object containing all image mappings, including light and alt versions.
    alt: string
      Description: The alternate text for images, e.g., "Something".
```

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

### Use Animated Number Countdown Component

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

Shows how to implement the AnimatedNumberCountdown component. It requires an 'endDate' prop to set the target date for the countdown and accepts a 'className' for styling.

```typescript
import { AnimatedNumberCountdown } from "./components/ui/animated-number-countdown";

<AnimatedNumberCountdown endDate={new Date("2025-12-31")} className="my-4" />
```

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

### Use Card Swipe Component in React

Source: https://skiper-ui.com/docs/components/card-swipe

Demonstrates how to import and use the Card Swipe component in a React application. It shows passing an array of image objects with 'src' and 'alt' properties, along with configuration options like 'autoplayDelay' and 'slideShadows'.

```jsx
import { CardSwipe } from "@/components/ui/card-swipe"

function BasicExample() {
  const images = [
    { src: "/card/1.png", alt: "Image 1" },
    { src: "/card/2.png", alt: "Image 2" },
    { src: "/card/3.png", alt: "Image 3" },
  ]

  return (
   <div className="w-full">
      <CardSwipe images={images} autoplayDelay={2000} slideShadows={false} />
    </div>
  )
}
```

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

### Use Card Carousel Component in React

Source: https://skiper-ui.com/docs/components/card-carousel

Demonstrates how to import and use the `CardCarousel` component in a React application. It shows how to pass an array of image objects and configure carousel behavior like autoplay and navigation.

```javascript
import { CardCarousel } from "@/components/ui/card-carousel"

function BasicExample() {
  const images = [
    { src: "/card/1.png", alt: "Image 1" },
    { src: "/card/2.png", alt: "Image 2" },
    { src: "/card/3.png", alt: "Image 3" },
  ]

  return (
    <div className="pt-40">
      <CardCarousel
        images={images}
        autoplayDelay={2000}
        showPagination={true}
        showNavigation={true}
      />
    </div>
  )
}
```

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

### Configure Tailwind CSS Animations

Source: https://skiper-ui.com/docs/components/skiper-marquee

Updates your `tailwind.config.ts` file to include custom keyframes for marquee and marquee-vertical animations, essential for the Skiper Marquee component's functionality.

```typescript
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        "marquee": "marquee var(--duration) linear infinite",
        "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
      },
      keyframes: {
        marquee: {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(calc(-100% - var(--gap)))" },
        },
        "marquee-vertical": {
          from: { transform: "translateY(0)" },
          to: { transform: "translateY(calc(-100% - var(--gap)))" },
        },
      },
    },
  },
};
```

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

### Define Image Data for Cursor Trail

Source: https://skiper-ui.com/docs/components/image-cursortrail

An array of image URLs to be displayed by the ImageCursorTrail component. These URLs are used to populate the trail effect.

```javascript
const images = [
  "https://images.pexels.com/photos/30082445/pexels-photo-30082445.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.unsplash.com/photo-1692606743169-e1ae2f0a960f?q=80&w=3560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format",
  "https://images.unsplash.com/photo-1548192746-dd526f154ed9?q=80&w=1200&auto=format",
  "https://images.unsplash.com/photo-1644141655284-2961181d5a02?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  "https://images.pexels.com/photos/30082445/pexels-photo-30082445.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://assets.lummi.ai/assets/QmNfwUDpehZyLWzE8to7QzgbJ164S6fQy8JyUWemHtmShj?auto=format&w=1500",
  "https://images.unsplash.com/photo-1706049379414-437ec3a54e93?q=80&w=1200&auto=format",
  "https://assets.lummi.ai/assets/Qmb2P6tF2qUaFXnXpnnp2sk9HdVHNYXUv6MtoiSq7jjVhQ?auto=format&w=1500",
  "https://images.unsplash.com/photo-1508873881324-c92a3fc536ba?q=80&w=1200&auto=format"
]
```

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

### Define Tabs Data Structure

Source: https://skiper-ui.com/docs/components/expanded-tabs

Defines the data structure for the tabs used in the ExpandedTabs component. It includes titles, optional icons from 'lucide-react', and supports separator types.

```typescript
import { Home, Bell, Settings, HelpCircle, Shield, User, } from "lucide-react"

const tabs = [
    { title: "Dashboard", icon: Home },
    { title: "Notifications", icon: Bell },
    { type: "separator" as const },
    { title: "Settings", icon: Settings },
    { title: "Support", icon: HelpCircle },
    { title: "Security", icon: Shield },
  ]
```

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

### Use Animated Number Random Component

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

Demonstrates how to use the AnimatedNumberRandom component in a React application. It takes a 'value' and an optional 'diff' prop to display animated numerical changes.

```typescript
import { AnimatedNumberRandom } from "./components/ui/animated-number-random";
import React, { useState } from "react";

function example() {
  const numbers = [124.23, 41.75, 2125.95];
  const diffs = [0.0564, -0.114, 0.0029];
  const [currentIndex, setCurrentIndex] = useState(0);

  return (
    <AnimatedNumberRandom value={numbers[currentIndex]} diff={diffs[currentIndex]} />
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.