PURPLE UI - Premium Component Library

Premium UI component library with modern animations, custom cursor, 3D effects and interactive interactions. ParticleBackground creates an interactive particle background that reacts to mouse movement. CustomCursor is a stylish custom cursor with neon glow. Designed for discerning developers.

Installation

npm install @marinaburyakova/purple-ui-library

Tailwind CSS Setup

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

**Update tailwind.config.js

/** @type {import('tailwindcss').Config} / export default { content: [ "./src/**/.{js,jsx,ts,tsx}", "./node_modules/@marinaburyakova/purple-ui-library/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [],

** Add Tailwind to src/index.css

@tailwind base; @tailwind components; @tailwind utilities;

body { background: #0a0a0c; margin: 0; min-height: 100vh; }

Configure TypeScript for style imports

**Create src/vite-env.d.ts:

///

declare module '*.css' { const content: string; export default content; }

declare module '@marinaburyakova/purple-ui-library/styles' { const content: string; export default content; }

Quick Start

For correct display of Inter font, add to index.html:

** Import styles

** In src/main.tsx or src/App.tsx:

import '@marinaburyakova/purple-ui-library/styles';

** Use components

import React from 'react'; import { PremiumButton } from '@marinaburyakova/purple-ui-library';

function App() { return Click me; }

Demo Application

** Below is a complete example application demonstrating all library components:

**// src/App.tsx // src/App.tsx import { useState } from 'react'; import { PremiumButton, GlassCard, NeonInput, CustomSelect, InteractiveTabs, useToast, ToastContainer, TypingAnimation, MorphingBackground, ScrollProgress, MagneticButton, CustomCursor, ParticleBackground } from '@marinaburyakova/purple-ui-library';

import '@marinaburyakova/purple-ui-library/styles'; import './index.css';

interface SelectOption { value: string | number; label: string; }

function App() { const { toasts, addToast, removeToast } = useToast(); const [inputValue, setInputValue] = useState(''); const [selectValue, setSelectValue] = useState<SelectOption | null>(null); const [activeTab, setActiveTab] = useState(0);

const options: SelectOption[] = [ { value: 'option1', label: 'Premium Plan' }, { value: 'option2', label: 'Enterprise Suite' }, { value: 'option3', label: 'Developer Pro' }, ];

const tabs = [ { label: 'Luxury', content: Enjoy the heights of digital craftsmanship with high-quality components. Every interaction is designed to be intuitive and luxurious. }, { label: 'Performance', content: Lightning-fast interactions powered by modern CSS and optimized React hooks. 60fps animations guaranteed. }, { label: 'Elegance', content: Every detail matters — from typography to micro-animations. Crafted with precision and passion. }, ];

return ( <>

  <div className="relative min-h-screen overflow-hidden">
    {/* Orbs */}
    <div className="fixed -top-[200px] -left-[200px] w-[600px] h-[600px] rounded-full 
      bg-primary-500/40 blur-[80px] pointer-events-none opacity-40" />
    <div className="fixed -bottom-[100px] -right-[100px] w-[500px] h-[500px] rounded-full 
      bg-secondary-500/30 blur-[80px] pointer-events-none opacity-40" />
    <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
      w-[400px] h-[400px] rounded-full bg-pink-500/20 blur-[80px] pointer-events-none opacity-40" />
    
    <div className="relative z-10 max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
      <header className="mb-8 text-center sm:mb-12">
        <div className="inline-flex items-center gap-2 px-4 sm:px-5 py-2 
          bg-glass backdrop-blur-[12px] rounded-full 
          text-xs sm:text-sm tracking-[0.5px] mb-4 sm:mb-6 
          border border-[rgba(49,24,163,0.69)]">
          <span className="w-1.5 sm:w-2 h-1.5 sm:h-2 rounded-full bg-primary-500 animate-pulse" />
          Premium Component Library
        </div>
        
        <h1 className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.1] mb-4 sm:mb-6">
          <span className="block text-2xl text-transparent sm:text-4xl md:text-5xl lg:text-6xl bg-gradient-text bg-clip-text animate-shimmer">
            PURPLE UI
          </span>
          <TypingAnimation 
            texts={['Component Library', 'Design System', 'Micro-interactions', 'Premium Experience']}
            typingSpeed={120}
            deletingSpeed={60}
            pauseTime={2500}
          />
        </h1>
        
        <p className="text-sm sm:text-base md:text-lg lg:text-xl text-white/50 max-w-2xl mx-auto leading-relaxed 
          shadow-[0_2px_4px_rgba(0,0,0,0.3)] px-4">
          Designed for the discerning developer - where code meets artistry. Experience the future of web interfaces.
        </p>
      </header>
      <div className="grid grid-cols-1 gap-4 mt-6 md:grid-cols-2 sm:gap-6 lg:gap-8 sm:mt-8">
        <GlassCard title="Premium Buttons" glowIntensity="high">
          <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-3 lg:gap-4">
            <PremiumButton variant="primary">Primary Action</PremiumButton>
            <PremiumButton variant="secondary">Secondary</PremiumButton>
            <PremiumButton variant="outline">Outline Style</PremiumButton>
          </div>
          <div className="flex justify-center mt-3 sm:mt-4">
            <MagneticButton strength={0.2}>
              <PremiumButton variant="primary">Magnetic Button</PremiumButton>
            </MagneticButton>
          </div>
        </GlassCard>

        <GlassCard title="Custom Select" glowIntensity="medium">
          <CustomSelect
            options={options}
            value={selectValue}
            onChange={setSelectValue}
            placeholder="Choose your tier"
          />
          {selectValue && (
            <p className="mt-2 text-xs text-center sm:mt-3 sm:text-sm text-white/50">
              Selected: {selectValue.label}
            </p>
          )}
        </GlassCard>

        <GlassCard title="Neon Input" glowIntensity="medium">
          <NeonInput
            value={inputValue}
            onChange={setInputValue}
            placeholder="Enter your email"
            validation="email"
            errorMessage="Please enter a valid email address"
          />
          <div className="flex items-center gap-2 mt-2 sm:mt-3 text-[10px] sm:text-xs text-white/30">
            <span className="w-1 sm:w-1.5 h-1 sm:h-1.5 bg-primary-500 rounded-full animate-pulse" />
            Real-time email validation with neon glow
          </div>
        </GlassCard>

        <GlassCard title="Interactive Tabs" glowIntensity="low">
          <InteractiveTabs
            tabs={tabs}
            activeTab={activeTab}
            onChange={setActiveTab}
            variant="underline"
          />
        </GlassCard>

        <GlassCard title="Toast Notifications" glowIntensity="medium">
          <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-3">
            <PremiumButton 
              variant="outline" 
              size="sm"
              onClick={() => addToast('success', 'Action completed successfully!')}
            >
              Success
            </PremiumButton>
            <PremiumButton 
              variant="outline"
              size="sm"
              onClick={() => addToast('error', 'Something went wrong')}
            >
              Error
            </PremiumButton>
            <PremiumButton 
              variant="outline"
              size="sm"
              onClick={() => addToast('info', 'ℹ New update available')}
            >
              Info
            </PremiumButton>
            <PremiumButton 
              variant="outline"
              size="sm"
              onClick={() => addToast('warning', 'Warning: Low battery')}
            >
              Warning
            </PremiumButton>
          </div>
        </GlassCard>
      </div>

    
      <div className="p-6 mt-12 text-center glass-card">
        <h2 className="mb-4 text-2xl font-semibold text-white">
         ParticleBackground | CustomCursor
        </h2>
        <p className="max-w-2xl mx-auto text-white/60">
          ParticleBackground creates an interactive particle background that reacts to mouse movement. CustomCursor is a stylish custom cursor with neon glow.
        </p>
        <div className="flex justify-center gap-4 mt-6">
          <div className="px-4 py-2 text-sm rounded-full bg-primary-500/20 text-primary-300">
            Hover over buttons
          </div>
          <div className="px-4 py-2 text-sm rounded-full bg-secondary-500/20 text-secondary-300">
            Particles react
          </div>
        </div>
      </div>

      <footer className="text-center mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-white/5 text-white/40 sm:text-white/50 text-[10px] sm:text-sm tracking-[1px] sm:tracking-[2px]">
        <p>• Premium UI Kit •</p>
      </footer>
    </div>
    
    <ToastContainer toasts={toasts} removeToast={removeToast} />
  </div>
</>

); }

export default App;

Components

-- ** PremiumButton

<PremiumButton variant="primary" // 'primary' | 'secondary' | 'outline' size="md" // 'sm' | 'md' | 'lg' onClick={handleClick} loading={false} disabled={false} fullWidth={false}

Click me

-- **GlassCard

<GlassCard title="Title" glowIntensity="medium" // 'low' | 'medium' | 'high' className="custom-class"

--**NeonInput

<NeonInput value={value} onChange={setValue} placeholder="Enter email" validation="email" // 'none' | 'required' | 'email' | 'url' | 'phone' errorMessage="Please enter a valid email" validateOnChange={true} required={false} disabled={false} />

--**CustomSelect

<CustomSelect options={[ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' } ]} value={selected} onChange={setSelected} placeholder="Select option" searchable={true} />

--**InteractiveTabs

<InteractiveTabs tabs={[ { label: 'Tab 1', content: Content 1 }, { label: 'Tab 2', content: Content 2 } ]} activeTab={0} onChange={(index) => console.log(index)} variant="underline" // 'underline' | 'pill' | 'minimal' />

--**Toast Notifications

const { toasts, addToast, removeToast, clearToasts } = useToast();

// Add notification addToast('success', 'Operation completed!'); addToast('error', 'An error occurred'); addToast('info', 'Information message'); addToast('warning', 'Warning');

// Remove notification removeToast(toastId);

// Clear all clearToasts();

// Render container TypingAnimation tsx <TypingAnimation texts={['Hello', 'World', 'PURPLE UI']} typingSpeed={100} deletingSpeed={50} pauseTime={2000} />

-- **MagneticButton

Requirements

Dependency Version React >= 19.2.6 React DOM >= 19.2.6 Tailwind CSS >= 3.4.4

Links

NPM: https://www.npmjs.com/package/@marinaburyakova/purple-ui-library

GitHub: https://github.com/marinaburyakova/purple-ui-library

GitHub Pages: https://marinaburyakova.github.io/purple-ui-library/

License

MIT © Marina Buryakova

** If you like this library, please give it a star on GitHub!