Retro Card
A nostalgic card component with a retro aesthetic featuring bold borders, vibrant colors, and interactive shadow effects.
Features
- Retro Design: Bold black borders with vibrant accent colors
- Interactive Shadows: Hover effects that expand the shadow and lift the card
- Flexible Content: Supports any React children
- Accessible: Built with proper semantic HTML and keyboard navigation
- Customizable: Extends standard div props for easy customization
Installation
Usage
Basic Usage
With Custom Styling
Examples
Basic Examples
Basic Examples
HELLO WORLD
A simple retro card with basic content.
Perfect for simple content display, statistics, and status indicators. These examples show the fundamental usage patterns.
Form Examples
Form Examples
Ideal for authentication interfaces and data collection forms with retro styling.
Profile & Info Cards
Profile & Info Cards
JOHN DOE
Full Stack Developer
RETRO KEYBOARD
Mechanical switches
System maintenance scheduled for tonight at 2:00 AM EST.
Great for displaying user information, product details, and notifications with retro flair.
Gaming & Interactive
Gaming & Interactive
HIGH SCORE
Perfect for retro gaming interfaces, scoreboards, and terminal-style displays.
Interactive Features
Interactive Features
HOVER EFFECT
Hover over this card to see the shadow expand and the card lift up.
ACTIONS
LOADING...
Showcase hover effects, interactive buttons, and progress indicators.
Use Cases
1. Login Forms
Perfect for creating retro-styled authentication interfaces with a nostalgic computing feel. The bold borders and monospace fonts create an authentic terminal-like experience.
2. Dashboard Cards
Use for displaying metrics, stats, or information in a retro dashboard layout. The bright accent colors make important data stand out.
3. Product Showcases
Great for highlighting products or features with a unique vintage aesthetic. The card's distinctive style draws attention to key content.
4. Notification Cards
Ideal for alerts, messages, or status updates with retro styling. The visual design makes notifications feel less intrusive and more engaging.
5. Profile Cards
Display user information, team members, or contact details with retro flair. Perfect for developer portfolios or team pages.
6. Game UI Elements
Perfect for retro gaming interfaces, scoreboards, or game menus. The aesthetic matches classic arcade and computer game designs.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Content to display inside the card |
| className | string | - | Additional CSS classes to apply |
| ...props | HTMLDivElement | - | All standard div props are supported |
Styling
The RetroCard uses a distinctive visual style:
- Border: 2px solid black border
- Background: Bright green (#00ff84) accent with white content area
- Shadow: Dynamic shadow that grows on hover (4px → 8px)
- Animation: Smooth transitions with slight upward movement on hover
- Typography: Works best with monospace fonts for authentic retro feel
Accessibility
- Supports keyboard navigation
- Maintains proper focus states
- Compatible with screen readers
- Follows semantic HTML structure
Browser Support
Works in all modern browsers that support CSS transforms and transitions.