@rayvelez/stripes-ui

A dynamic React UI component library featuring animated stripe patterns, elastic transitions, and cyberpunk aesthetics. Build futuristic interfaces with smooth, staggered animations and neon color schemes.

Installation

npm install @rayvelez/stripes-ui

Quick Start

Wrap your app with the StripesProvider to enable the theme system:

import { StripesProvider, StripeButton, StripeCard } from '@rayvelez/stripes-ui';

function App() {
  return (
    <StripesProvider>
      <StripeCard title="Welcome" variant="glass">
        <p>Your content here</p>
        <StripeButton variant="neon" onClick={() => alert('Clicked!')}>
          Get Started
        </StripeButton>
      </StripeCard>
    </StripesProvider>
  );
}

Available Components

Core Components

• StripesProvider - Theme context provider (required wrapper)
• StripeButton - Button with animated stripe overlays
• StripeCard - Card container with stripe patterns
• StripeInput - Input field with animated underlines
• StripeToggle - Toggle switch with stripe fill animation
• StripeLoader - Multiple loading animation styles
• StripeSection - Full-width section with diagonal stripes

Component Examples

StripeButton

import { StripeButton } from '@rayvelez/stripes-ui';

// Variants: primary, secondary, ghost, neon
<StripeButton variant="neon" size="large">
  Click Me
</StripeButton>

StripeCard

import { StripeCard } from '@rayvelez/stripes-ui';

// Variants: default, bordered, glass, neon
<StripeCard
  title="Features"
  subtitle="Our services"
  variant="glass"
  hoverable
>
  <p>Card content</p>
</StripeCard>

StripeInput

import { StripeInput } from '@rayvelez/stripes-ui';

// Variants: default, neon, minimal, cyber
<StripeInput
  label="Email"
  type="email"
  placeholder="Enter your email"
  variant="cyber"
/>

StripeToggle

import { StripeToggle } from '@rayvelez/stripes-ui';

<StripeToggle
  label="Enable notifications"
  variant="neon"
  size="medium"
  onChange={(checked) => console.log(checked)}
/>

StripeLoader

import { StripeLoader } from '@rayvelez/stripes-ui';

// Variants: bars, wave, pulse, dots
<StripeLoader variant="wave" size="large" />

StripeSection

import { StripeSection } from '@rayvelez/stripes-ui';

// Variants: hero, feature, diagonal, animated
<StripeSection
  variant="hero"
  title="Welcome to the Future"
  subtitle="Experience next-gen UI"
  fullHeight
  animated
>
  <StripeButton variant="neon">Get Started</StripeButton>
</StripeSection>

Theme System

The library includes a comprehensive token system:

Colors

• Electric Blue (#05eafa)
• Hot Pink (#ff6bd3)
• Neon Cyan (#00ffff)
• Dark backgrounds with gradient support

Typography

• Display font: Orbitron
• Body font: Inter
• Mono font: IBM Plex Mono

Animations

• Elastic easing curves
• Staggered stripe animations
• Pulse, glow, and wave effects
• Configurable animation durations

Design Tokens

Access design tokens directly:

import { colors, typography, animations, effects } from '@rayvelez/stripes-ui';

const customStyle = {
  color: colors.electricBlue,
  fontFamily: typography.fonts.heading,
  transition: animations.transitions.all,
  boxShadow: effects.shadows.neonGlow
};

Features

• 🎨 Cyberpunk Aesthetics - Neon colors, dark themes, futuristic design
• ⚡ Elastic Animations - Smooth, staggered stripe effects on interactions
• 🎭 Multiple Variants - Each component offers several style variants
• 📱 Responsive - Mobile-friendly components
• 🔧 TypeScript Support - Full type definitions included
• 🎯 Zero Dependencies - Only requires React as peer dependency
• 🌈 Blend Modes - Advanced CSS effects for visual depth

Requirements

• React 18.0.0 or higher
• React DOM 18.0.0 or higher

License

MIT

Author

Ray Velez

Keywords

react, ui, design-system, stripes, animation, cyberpunk, neon, elastic, components