@saas-factory/ui-retro

A nostalgic, neomorphic design system featuring soft, inset/embossed effects. Combines retro-inspired aesthetics with modern neomorphic UI trends. Perfect for portfolios, creative projects, and conversation-starting designs.

Design Philosophy

• Neomorphic: Soft, embossed, inset shadows
• Retro-Inspired: 80s/90s aesthetic elements
• Soft UI: Smooth, flowing shapes
• Monochromatic Base: Single color with depth variations
• Tactile: Design feels physical and touchable
• Unique: Stand out from typical corporate designs

Key Features

✅ Neomorphic Components (inset/embossed effects) ✅ Retro Color Schemes (vintage palettes) ✅ Soft Shadows (CSS shadow optimization) ✅ 3D Effects (subtle depth) ✅ Glassmorphism (layered glass effects) ✅ Smooth Animations (retro transitions) ✅ Unique Buttons (embossed variants) ✅ Retro Typography (vintage fonts) ✅ Conversation-Starter design ✅ Fully Functional (not just aesthetic)

Installation

npm install @saas-factory/ui-retro

Quick Start

import { RetroProvider, NeomorphicButton } from '@saas-factory/ui-retro';

export default function App() {
  return (
    <RetroProvider theme="beige">
      <NeomorphicButton>
        Press Me
      </NeomorphicButton>
    </RetroProvider>
  );
}

Themes

• beige - Warm, vintage beige palette
• mint - Soft mint green
• lavender - Soft purple
• peachy - Warm peach tones
• slate - Cool gray neomorphic
• custom - Define your own

Neomorphic Components

Buttons

• NeomorphicButton - Embossed button
• PressedButton - Active/pressed state
• ToggleButton - Soft toggle switch
• FloatingButton - FAB with soft shadow

Cards & Containers

• NeomorphicCard - Embossed card
• InsetCard - Inset/sunken card
• GlassCard - Glassmorphic card
• Container - Soft container

Forms

• NeomorphicInput - Embossed input field
• SoftSelect - Soft dropdown
• NeomorphicToggle - Embossed toggle
• SoftSlider - Smooth range slider

Status & Feedback

• Badge - Soft badge
• Alert - Gentle alerts
• Toast - Retro toast notifications
• Spinner - Retro loading spinner

Animation Library

• Bounce Effects - Soft bouncing
• Press Animation - Button press effect
• Pulse Animation - Gentle pulsing
• Rotate Animation - Smooth rotation

Retro Typography

Includes retro fonts:

• Courier Prime (monospace, 80s feel)
• Inconsolata (vintage coding)
• IBM Plex Mono (retro-modern)

Templates

• Portfolio - Show off your work
• Retro Landing - Unique homepage
• Vintage Dashboard - Retro admin panel
• Creative Studio - Agency showcase

Performance

Uses pure CSS effects (no JavaScript for shadows). Optimized animations with CSS transforms.

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Graceful degradation for older browsers

Accessibility

Despite unique aesthetics, maintains accessibility:

• Keyboard navigation
• Screen reader support
• High contrast options
• Focus indicators

License

MIT