Getting Started · 02

Quick Start

Get started with EasyUI in under 2 minutes. Install components directly into any React project using the shadcn CLI or copy the raw source code.

Step 01

Initialize shadcn in your project

If your project doesn't have shadcn initialized yet, run the setup command in your terminal:

Terminal

npx shadcn@latest init

Step 02

Install Components via shadcn CLI

Reference the repository path and component slug to install any component directly:

Terminal

# Install Magnetic Button
npx shadcn@latest add Surajmaurya1/easyui/magnetic-button

# Install Spotlight Card
npx shadcn@latest add Surajmaurya1/easyui/spotlight-card

# Install Animated Tabs
npx shadcn@latest add Surajmaurya1/easyui/animated-tabs

Automatic during CLI installation:

Component source file is placed in your components/ui/ folder.
Required packages (framer-motion, lucide-react) are installed.
Shared motion tokens and utilities are placed in lib/ automatically if referenced.

Step 03

Import & Use in your Code

Import the installed component directly into your React pages or components with full TypeScript autocomplete:

src/components/FeaturePreview.tsx

import React from 'react';
import { MagneticButton } from '@/components/ui/magnetic-button';
import { SpotlightCard } from '@/components/ui/spotlight-card';
import { ArrowRight } from 'lucide-react';

export function FeaturePreview() {
  return (
    <SpotlightCard className="p-6 bg-[#0E0E0E] border border-[#1F1F1F] rounded-2xl max-w-sm">
      <h3 className="text-sm font-semibold text-white mb-2">Tactile Interface</h3>
      <p className="text-xs text-neutral-400 mb-6 leading-relaxed">
        Pointer-aware micro-animations with continuous 60 FPS physics.
      </p>

      <MagneticButton variant="primary" strength={0.35}>
        <span>Explore Components</span>
        <ArrowRight className="w-4 h-4" />
      </MagneticButton>
    </SpotlightCard>
  );
}

Manual Setup (Utilities & Tokens)

If you are copying source code manually without the shadcn CLI, ensure you have standard cn and motion tokens:

src/lib/motion-tokens.ts

// src/lib/motion-tokens.ts
export const motionTransitions = {
  springSmooth: { type: 'spring', stiffness: 300, damping: 30 },
  springSnappy: { type: 'spring', stiffness: 400, damping: 25 },
  springBouncy: { type: 'spring', stiffness: 500, damping: 15 },
  springGentle: { type: 'spring', stiffness: 180, damping: 24 },
  easeOutCubic: { ease: [0.33, 1, 0.68, 1], duration: 0.25 },
} as const;

Install Components via shadcn CLI

Reference the repository path and component slug to install any component directly:

Terminal

# Install Magnetic Button
npx shadcn@latest add Surajmaurya1/easyui/magnetic-button

# Install Spotlight Card
npx shadcn@latest add Surajmaurya1/easyui/spotlight-card

# Install Animated Tabs
npx shadcn@latest add Surajmaurya1/easyui/animated-tabs

Automatic during CLI installation:

Component source file is placed in your components/ui/ folder.
Required packages (framer-motion, lucide-react) are installed.
Shared motion tokens and utilities are placed in lib/ automatically if referenced.

Import & Use in your Code

Import the installed component directly into your React pages or components with full TypeScript autocomplete:

src/components/FeaturePreview.tsx

import React from 'react';
import { MagneticButton } from '@/components/ui/magnetic-button';
import { SpotlightCard } from '@/components/ui/spotlight-card';
import { ArrowRight } from 'lucide-react';

export function FeaturePreview() {
  return (
    <SpotlightCard className="p-6 bg-[#0E0E0E] border border-[#1F1F1F] rounded-2xl max-w-sm">
      <h3 className="text-sm font-semibold text-white mb-2">Tactile Interface</h3>
      <p className="text-xs text-neutral-400 mb-6 leading-relaxed">
        Pointer-aware micro-animations with continuous 60 FPS physics.
      </p>

      <MagneticButton variant="primary" strength={0.35}>
        <span>Explore Components</span>
        <ArrowRight className="w-4 h-4" />
      </MagneticButton>
    </SpotlightCard>
  );
}

// src/lib/motion-tokens.ts export const motionTransitions = { springSmooth: { type: 'spring', stiffness: 300, damping: 30 }, springSnappy: { type: 'spring', stiffness: 400, damping: 25 }, springBouncy: { type: 'spring', stiffness: 500, damping: 15 }, springGentle: { type: 'spring', stiffness: 180, damping: 24 }, easeOutCubic: { ease: [0.33, 1, 0.68, 1], duration: 0.25 }, } as const;