🏄‍♂️ 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

🎯 Minimal Theme

Subtle gray styling, perfect for minimal designs

🌊 Ocean Theme

Blue ocean-inspired colors matching the coastal vibe

🌅 Sunset Theme

Warm orange and yellow colors like a beach sunset

🌙 Dark Theme

Dark background with cyan accents for modern apps

🌸 Tokyo Theme

Japanese-inspired pink and purple colors

🧛 Dracula Theme

Dark purple theme inspired by Dracula colors

🕺 Disco Theme

Retro neon colors with cyan and magenta

📱 Small Size

Compact version perfect for sidebars

💻 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}
/>