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

``bash
npm install m-bio

or

yarn add m-bio
`

Quick Start

`tsx
import { MBio } from 'm-bio'

export default function MyProfile() {
return (
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

$3

`typescript
interface MBioConfig {
user: MBioUser // User data
theme?: Partial // 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
}
`

$3

`typescript
interface MBioUser {
id: string
name: string
bio: string
avatar?: string
email?: string
socials?: Record
metadata?: Record
}
`

$3

`typescript
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

$3

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

`tsx

`

$3

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

`tsx

`

$3

Text-only layout. Lightweight and simple.

`tsx

`

Themes

$3

Modern dark theme with cyan and purple accents.

`tsx
// Uses default theme
`

$3

Light background with professional colors.

`tsx
import { lightTheme } from 'm-bio'


`

$3

High contrast neon colors.

`tsx
import { neonTheme } from 'm-bio'


`

$3

Create your own theme.

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

Plugins

$3

#### Video Player Plugin
Display a video player in the profile.

`tsx
import { createVideoPlayerPlugin } from 'm-bio'

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

#### Social Links Plugin
Display social media links.

`tsx
import { createSocialLinksPlugin } from 'm-bio'

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

$3

Create a custom plugin:

`typescript
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

Custom content for {user.name}

}

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

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

Use it:

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

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

Live Color Extraction

Extract dominant color from video and apply as background:

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

Plugin Manager

Manage plugins programmatically:

`typescript
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

$3

`tsx
import { MBio } from 'm-bio'

export default function Profile() {
return (
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"
/>
)
}
`

$3

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

export default function FullProfile() {
return (
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',
}}
/>
)
}
`

$3

`tsx
import { MBio } from 'm-bio'

export default function VideoProfile() {
return (
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:

`typescript
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.