---
title: "Retro Floppy"
description: "A beautiful, interactive 3.5\" floppy disk React component for retro-themed UIs"
impact: "Nostalgic UI component bringing physical computing artifacts to modern web interfaces"
github_url: "https://github.com/cameronrye/retro-floppy"
demo_url: "https://cameronrye.github.io/retro-floppy/"
technologies: ["React", "TypeScript", "UI", "Animation", "Interactive"]
featured: false
order: 10
problem: "Modern web applications often lack personality and visual interest. While retro computing aesthetics are popular, there's no easy way to add authentic, interactive vintage hardware elements to React applications without building complex custom components from scratch."
solution: "Created a fully-featured React component that renders an interactive 3.5-inch floppy disk with realistic hover animations, multiple built-in themes, and extensive customization options through TypeScript-safe props and CSS custom properties."
results: ["Authentic metal slider animation on hover", "Five built-in themes (Light, Dark, Neon, Retro, Pastel)", "Fully typed with TypeScript generics", "Accessible with ARIA labels and keyboard support"]
metrics: [{"label":"Themes","value":"5"}, {"label":"Bundle","value":"<8KB"}, {"label":"TypeScript","value":"100%"}, {"label":"Dependencies","value":"React"}]
canonical_url: https://rye.dev/projects/retro-floppy/
---

import RetroFloppyDemo from '../../components/demos/RetroFloppyDemo.tsx';

Retro Floppy is a beautiful, interactive 3.5" floppy disk React component designed for retro-themed user interfaces. It brings the nostalgia of physical computing artifacts to modern web applications with an authentic metal slider animation.

<div class="my-8 p-6 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm rounded-xl border border-gray-200/50 dark:border-gray-700/50">
  <RetroFloppyDemo client:only="preact" />
</div>

## Quick Start

Install the package and import the component:

```bash
npm install retro-floppy
```

```tsx
import { FloppyDisk } from 'retro-floppy';
import 'retro-floppy/dist/retro-floppy.css';

function App() {
  return (
    <FloppyDisk
      label={{ name: 'My App', author: 'v1.0' }}
      size="medium"
    />
  );
}
```

## Theme Customization

Choose from built-in themes or create your own:

```tsx
import { FloppyDisk, NEON_THEME, RETRO_THEME } from 'retro-floppy';

// Use a built-in theme
<FloppyDisk theme={NEON_THEME} />

// Or create a custom theme
<FloppyDisk theme={{
  diskColor: '#1a1a2e',
  slideColor: '#c0c0c0',
  labelColor: '#ffffff',
  labelBg: '#2d2d44',
}} />
```

## Event Handling

The component supports click and hover events:

```tsx
<FloppyDisk
  onClick={() => console.log('Disk clicked')}
  onDoubleClick={() => console.log('Disk opened')}
  onHover={(isHovering) => console.log('Hover:', isHovering)}
/>
```

## Key Features

- **Interactive Design**: Realistic floppy disk with sliding metal shutter animation on hover
- **Built-in Themes**: Light, Dark, Neon, Retro, and Pastel themes included
- **TypeScript Support**: Full type definitions with generics for type-safe props
- **Customizable**: CSS custom properties and theme objects for complete control
- **Accessible**: ARIA labels and keyboard navigation support
- **Multiple Sizes**: Tiny, small, medium, and large size variants