Lyrics Card Maker

A React component for creating beautiful, customizable lyrics cards. Perfect for social media sharing, music blogs, or any platform where you want to showcase lyrics in a visually appealing way.

🌟 Features

• 🎨 Fully customizable design
  • Background color
  • Text color
  • Font size
  • Card layout
• 📝 Rich text formatting for lyrics
• 🖼️ Export cards as images
• 📱 Responsive design
• 🎯 Easy to integrate
• 🌈 Multiple themes support
• 🔄 Real-time preview
• ⌨️ Keyboard shortcuts support
• 📦 Zero dependencies (except peer dependencies)

📦 Installation

npm install lyrics-card-maker
# or
yarn add lyrics-card-maker
# or
pnpm add lyrics-card-maker

🚀 Quick Start

import { LyricsCardMaker } from 'lyrics-card-maker';

function App() {
  return (
    <LyricsCardMaker />
  );
}

🛠️ Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | defaultTitle | string | '' | Default song title | | defaultArtist | string | '' | Default artist name | | defaultLyrics | string | '' | Default lyrics text | | theme | 'light' | 'dark' | 'light' | Color theme | | onSave | function | undefined | Callback when card is saved | | customFonts | string[] | [] | Additional fonts to use | | maxWidth | number | 600 | Maximum width of the card | | maxHeight | number | 800 | Maximum height of the card |

🎨 Custom Styling

You can customize the appearance using CSS variables:

.lyrics-card-maker {
  --lcm-primary-color: #007bff;
  --lcm-secondary-color: #6c757d;
  --lcm-font-family: 'Arial', sans-serif;
  --lcm-border-radius: 8px;
}

🌐 Live Demo

Check out our live demo at: https://lyric-card-maker.vercel.app

📚 Examples

Basic Usage

import { LyricsCardMaker } from 'lyrics-card-maker';

function BasicExample() {
  return (
    <LyricsCardMaker
      defaultTitle="Yesterday"
      defaultArtist="The Beatles"
      theme="light"
    />
  );
}

With Custom Theme

function CustomThemeExample() {
  return (
    <LyricsCardMaker
      theme="dark"
      customFonts={['Roboto', 'Open Sans']}
      onSave={(image) => {
        console.log('Card saved!', image);
      }}
    />
  );
}

⌨️ Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Ctrl/Cmd + S | Save card | | Ctrl/Cmd + Z | Undo | | Ctrl/Cmd + Shift + Z | Redo | | Ctrl/Cmd + B | Toggle bold text | | Ctrl/Cmd + I | Toggle italic text |

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• shadcn/ui for beautiful UI components
• html2canvas for image export functionality
• All our contributors and users

🐛 Bug Reports

Please use the GitHub Issues page to report any bugs.

📫 Contact

• Twitter: @mark_homaa
• GitHub: placecardus