M-Bio SDK

A powerful, reusable bio/profile component SDK with a plugin system. Import on any page and control full layout, background, and color scheme.

Features

✨ Multiple Layouts

• Card layout (compact, centered)
• Full layout (hero section with cover)
• Minimal layout (text-only)

🎨 Theme System

• Pre-built themes (default, light, neon)
• Custom color schemes
• Live color extraction from video
• CSS variable generation

🔌 Plugin System

• Register/unregister plugins dynamically
• Built-in plugins (Video Player, Social Links)
• Create custom plugins easily
• Plugin lifecycle hooks (init, onLoad, onUnload)

📱 Responsive Design

• Mobile-first approach
• Framer Motion animations
• Smooth transitions

Installation

npm install m-bio
# or
yarn add m-bio

Quick Start

import { MBio } from 'm-bio'

export default function MyProfile() {
  return (
    <MBio
      user={{
        id: '123',
        name: 'John Doe',
        bio: 'Creative developer & designer',
        avatar: 'https://...',
        socials: {
          twitter: 'https://twitter.com/...',
          github: 'https://github.com/...',
        },
      }}
      layout="card"
      theme={{
        primary: '#0ea5e9',
        secondary: '#a855f7',
      }}
    />
  )
}

Configuration

MBioConfig

interface MBioConfig {
  user: MBioUser                    // User data
  theme?: Partial<MBioTheme>        // Custom theme
  plugins?: MBioPlugin[]            // Plugins to load
  layout?: 'card' | 'full' | 'minimal'  // Layout type
  enablePlugins?: boolean           // Enable plugin rendering
  customCSS?: string                // Custom CSS
  colorScheme?: 'light' | 'dark' | 'auto'  // Color scheme
  liveColorFromVideo?: boolean      // Extract color from video
  videoUrl?: string                 // Video URL for color extraction
}

MBioUser

interface MBioUser {
  id: string
  name: string
  bio: string
  avatar?: string
  email?: string
  socials?: Record<string, string>
  metadata?: Record<string, any>
}

MBioTheme

interface MBioTheme {
  primary: string      // Primary color
  secondary: string    // Secondary color
  accent: string       // Accent color
  background: string   // Background color
  text: string         // Text color
  border: string       // Border color
  radius: string       // Border radius
}

Layouts

Card Layout

Compact, centered profile card. Perfect for sidebars and embeds.

<MBio user={user} layout="card" />

Full Layout

Hero section with cover image and full profile. Great for dedicated profile pages.

<MBio user={user} layout="full" />

Minimal Layout

Text-only layout. Lightweight and simple.

<MBio user={user} layout="minimal" />

Themes

Default Theme

Modern dark theme with cyan and purple accents.

<MBio user={user} />  // Uses default theme

Light Theme

Light background with professional colors.

import { lightTheme } from 'm-bio'

<MBio user={user} theme={lightTheme} />

Neon Theme

High contrast neon colors.

import { neonTheme } from 'm-bio'

<MBio user={user} theme={neonTheme} />

Custom Theme

Create your own theme.

<MBio
  user={user}
  theme={{
    primary: '#ff0000',
    secondary: '#00ff00',
    accent: '#0000ff',
    background: '#ffffff',
    text: '#000000',
    border: '#cccccc',
    radius: '8px',
  }}
/>

Plugins

Built-in Plugins

Video Player Plugin

Display a video player in the profile.

import { createVideoPlayerPlugin } from 'm-bio'

<MBio
  user={user}
  plugins={[
    createVideoPlayerPlugin('https://example.com/video.mp4')
  ]}
  enablePlugins={true}
/>

Social Links Plugin

Display social media links.

import { createSocialLinksPlugin } from 'm-bio'

<MBio
  user={user}
  plugins={[createSocialLinksPlugin()]}
  enablePlugins={true}
/>

Custom Plugins

Create a custom plugin:

import { MBioPlugin, MBioConfig, MBioUser } from 'm-bio'

export class MyCustomPlugin implements MBioPlugin {
  name = 'my-custom-plugin'
  version = '1.0.0'

  init(config: MBioConfig): void {
    // Initialize plugin
  }

  render(user: MBioUser): React.ReactNode {
    return <div>Custom content for {user.name}</div>
  }

  onLoad(): void {
    console.log('Plugin loaded')
  }

  onUnload(): void {
    console.log('Plugin unloaded')
  }
}

Use it:

import { MyCustomPlugin } from './plugins/MyCustomPlugin'

<MBio
  user={user}
  plugins={[new MyCustomPlugin()]}
  enablePlugins={true}
/>

Live Color Extraction

Extract dominant color from video and apply as background:

<MBio
  user={user}
  liveColorFromVideo={true}
  videoUrl="https://example.com/video.mp4"
/>

Plugin Manager

Manage plugins programmatically:

import { PluginManager } from 'm-bio'

const manager = new PluginManager(config)

// Register plugin
manager.register(myPlugin)

// Get plugin
const plugin = manager.getPlugin('plugin-name')

// Unregister plugin
manager.unregister('plugin-name')

// Get all plugins
const allPlugins = manager.getAllPlugins()

Examples

Simple Card Profile

import { MBio } from 'm-bio'

export default function Profile() {
  return (
    <MBio
      user={{
        id: '1',
        name: 'Alice Johnson',
        bio: 'Full-stack developer',
        avatar: 'https://...',
        socials: {
          twitter: 'https://twitter.com/alice',
          github: 'https://github.com/alice',
        },
      }}
      layout="card"
    />
  )
}

Full Profile with Plugins

import { MBio, createVideoPlayerPlugin, createSocialLinksPlugin } from 'm-bio'

export default function FullProfile() {
  return (
    <MBio
      user={{
        id: '1',
        name: 'Bob Smith',
        bio: 'Designer & creator',
        avatar: 'https://...',
        socials: {
          instagram: 'https://instagram.com/bob',
          behance: 'https://behance.net/bob',
        },
      }}
      layout="full"
      plugins={[
        createVideoPlayerPlugin('https://example.com/demo.mp4'),
        createSocialLinksPlugin(),
      ]}
      enablePlugins={true}
      theme={{
        primary: '#ff6b6b',
        secondary: '#4ecdc4',
      }}
    />
  )
}

Live Color Video Background

import { MBio } from 'm-bio'

export default function VideoProfile() {
  return (
    <MBio
      user={{
        id: '1',
        name: 'Charlie Brown',
        bio: 'Video creator',
        avatar: 'https://...',
      }}
      layout="full"
      liveColorFromVideo={true}
      videoUrl="https://example.com/background.mp4"
    />
  )
}

TypeScript Support

Full TypeScript support with exported types:

import { MBioConfig, MBioUser, MBioTheme, MBioPlugin } from 'm-bio'

const config: MBioConfig = {
  user: { id: '1', name: 'John', bio: 'Dev' },
  theme: { primary: '#0ea5e9', ... },
  plugins: [],
}

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers

License

MIT

Contributing

Contributions welcome! Please submit PRs to the main repository.

Support

For issues and questions, visit the GitHub repository.