🎨 Telecop

Modern React UI Components Library with beautiful buttons and gradients.

📦 Installation

npm install telecop

⚠️ Important: Import Styles

You must import the CSS file in your main layout or app file:

// app/layout.tsx (Next.js App Router)
import 'telecop/style.css';

// or _app.tsx (Next.js Pages Router)
import 'telecop/style.css';

// or main.tsx (React/Vite)
import 'telecop/style.css';

🚀 Usage

Buttons

import { 
  SolidBlue, 
  GradientPurplePink, 
  GlassBlue,
  AnimatedShimmer,
  NeonPink 
} from 'telecop';

function App() {
  return (
    <div>
      <SolidBlue onClick={() => alert('Clicked!')}>
        Click Me
      </SolidBlue>
      
      <GradientPurplePink>
        Beautiful Gradient
      </GradientPurplePink>
      
      <GlassBlue>
        Glass Effect
      </GlassBlue>
    </div>
  );
}

Home Template

import { Home } from 'telecop';

function HomePage() {
  return (
    <Home
      name="Your Name"
      title="Full Stack Developer"
      description="Building amazing things"
      backgroundGradient="linear-gradient(308deg, #a70b0b 0%, #000000 75%)"
      animationType="flow"
      primaryButtonText="Get Started"
      secondaryButtonText="Learn More"
    />
  );
}

📋 Available Components

Buttons (30 styles)

• Solid Buttons (5)
• Gradient Buttons (5)
• Glass Buttons (4)
• Animated Buttons (4)
• Outlined Buttons (3)
• Ghost Buttons (3)
• 3D Buttons (3)
• Neon Buttons (3)

Templates

• Home - Beautiful hero section with gradients

🎨 Features

• ✅ 30+ Beautiful Button Styles
• ✅ Gradient Animations
• ✅ Glass Morphism Effects
• ✅ Neon Effects
• ✅ 3D Buttons
• ✅ TypeScript Support
• ✅ Tailwind CSS
• ✅ Zero Dependencies

📚 Documentation

Visit telecop.dev for full documentation and live examples.

📄 License

MIT © Laith Alawad