// Rainbow button with hover effect
import { RainbowButton } from "@/components/ui/rainbow-button";

<RainbowButton href="/dashboard">
  Get Started
</RainbowButton>

// Card with 3D hover effect
import { Card3D } from "@/components/ui/card-3d";

<Card3D className="p-6">
  <h3>3D Card</h3>
  <p>Hover to see the effect</p>
</Card3D>

// Card with spotlight effect
import { CardSpotlight } from "@/components/ui/card-spotlight";

<CardSpotlight>
  <div className="p-4">
    <h3>Spotlight Card</h3>
    <p>Move your mouse to see the spotlight</p>
  </div>
</CardSpotlight>

// Text with sparkles
import { SparklesText } from "@/components/ui/sparkles-text";

<SparklesText>
  ✨ Magical Text ✨
</SparklesText>

// Text with fade effect
import { FadeText } from "@/components/ui/fade-text";

<FadeText>
  This text will fade in
</FadeText>

// Text with hover effect
import { TextHoverEffect } from "@/components/ui/text-hover-effect";

<TextHoverEffect>
  Hover over me
</TextHoverEffect>

// Text with generate effect
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";

<TextGenerateEffect words="AI is generating this text" />

// Data table with sorting and filtering
import { DataTable } from "@/components/ui/data-table";

<DataTable
  columns={columns}
  data={data}
  searchKey="name"
  pagination
/>

// Number ticker animation
import { NumberTicker } from "@/components/ui/number-ticker";

<NumberTicker
  value={1234}
  duration={1000}
/>

// Animated testimonials
import { AnimatedTestimonials } from "@/components/ui/animated-testimonials";

<AnimatedTestimonials testimonials={[
  {
    text: "Amazing product!",
    author: "John Doe"
  }
]} />

// Meteor shower effect
import { Meteors } from "@/components/ui/meteors";

<Meteors />

// Animated border beam
import { BorderBeam } from "@/components/ui/border-beam";

<BorderBeam />

// Interactive particles
import { Particles } from "@/components/ui/particles";

<Particles />

// Retro grid background
import { RetroGrid } from "@/components/ui/retro-grid";

<RetroGrid />

// Animated vortex
import { Vortex } from "@/components/ui/vortex";

<Vortex />

// Wavy line animation
import { WavyLine } from "@/components/ui/wavy-line";

<WavyLine />

// Mouse-following spotlight
import { Spotlight } from "@/components/ui/spotlight";

<Spotlight />

// Shooting stars animation
import { ShootingStars } from "@/components/ui/shooting-stars";

<ShootingStars />

// Canvas reveal effect
import { CanvasRevealEffect } from "@/components/ui/canvas-reveal-effect";

<CanvasRevealEffect />

// Dot pattern background
import { DotPattern } from "@/components/ui/dot-pattern";

<DotPattern />

import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import * as z from "zod";

const formSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

export function LoginForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  });

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <Input
          type="email"
          placeholder="Email"
          {...form.register("email")}
        />
        <Button type="submit" disabled={form.formState.isSubmitting}>
          {form.formState.isSubmitting ? "Loading..." : "Submit"}
        </Button>
      </form>
    </Form>
  );
}

// Global search with command palette
import { GlobalSearch } from "@/components/ui/global-search";

<GlobalSearch />

// Breadcrumb navigation
import { BreadcrumbNav } from "@/components/ui/breadcrumb-nav";

<BreadcrumbNav items={[
  { label: "Home", href: "/" },
  { label: "Dashboard", href: "/dashboard" }
]} />

// Sidebar navigation
import { Sidebar } from "@/components/ui/sidebar";

<Sidebar items={navigationItems} />

// src/components/ui/my-component.tsx
import { cn } from "@/lib/utils";
import { type ComponentProps } from "react";

interface MyComponentProps extends ComponentProps<"div"> {
  variant?: "default" | "secondary";
}

export function MyComponent({
  className,
  variant = "default",
  ...props
}: MyComponentProps) {
  return (
    <div
      className={cn(
        "rounded-lg border bg-card p-4 text-card-foreground shadow-sm",
        {
          "bg-secondary text-secondary-foreground": variant === "secondary",
        },
        className
      )}
      {...props}
    />
  );
}

// types.ts
export type MyComponentVariant = "default" | "secondary";

export interface MyComponentProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: MyComponentVariant;
}

/**
 * MyComponent - A reusable component with variants
 *
 * @example
 * ```tsx
 * <MyComponent variant="secondary">
 *   Content goes here
 * </MyComponent>
 * ```
 */

# Add a single component
pnpm ui:add button

# Add multiple components
pnpm ui:add button card input

# Configure component options
pnpm ui:add table --template=data-table