🏄♂️ MuizenMesh Webring Widget Demo
Explore different themes and configurations for the React widget
📝 Note: This page demonstrates the available themes using vanilla JavaScript.
The actual React widget (located in the widgets/ directory) provides better functionality,
TypeScript support, and smoother interactions, but can't be shown here since it requires React.
Use this demo to preview themes, then implement the real React component in your project.
🚀 Quick Start
Copy the widget files to your React project and start using them:
npm install react next
# Copy these files to your project:
# - WebringWidget.tsx
# - WebringWidget.module.css
# - types.ts🎨 Default Theme
Clean blue design with the classic MuizenMesh styling
Community Links
🎯 Minimal Theme
Subtle gray styling, perfect for minimal designs
Webring
🌊 Ocean Theme
Blue ocean-inspired colors matching the coastal vibe
MuizenMesh Community
🌅 Sunset Theme
Warm orange and yellow colors like a beach sunset
🌙 Dark Theme
Dark background with cyan accents for modern apps
MuizenMesh Webring
🌸 Tokyo Theme
Japanese-inspired pink and purple colors
Tokyo Webring
🧛 Dracula Theme
Dark purple theme inspired by Dracula colors
🕺 Disco Theme
Retro neon colors with cyan and magenta
Retro Webring
📱 Small Size
Compact version perfect for sidebars
Links
💻 Usage Examples
import WebringWidget from './path/to/WebringWidget';
// Default theme
<WebringWidget title="Community Links" />
// Ocean theme, large size
<WebringWidget
theme="ocean"
size="large"
title="MuizenMesh Community"
/>
// Minimal theme, no image
<WebringWidget
theme="minimal"
showImage={false}
showDescription={false}
/>