A modern, customizable digital business card generator built with Next.js, React, TypeScript, and Tailwind CSS. Instantly create, preview, and export beautiful business cards with multiple themes and advanced UI components.
- Live Editing: Instantly update your business card information (name, title, email, website) with a real-time preview.
- Theme Support: Choose from multiple developer-inspired themes (VSCode, Monokai, Dracula, GitHub, Nord).
- Export Options: Download your card as a PNG image or JSON file.
- Clipboard Support: Copy card data to clipboard with a single click.
- Responsive Design: Fully responsive and mobile-friendly.
- Modern UI: Built with shadcn/ui, Radix UI, and Tailwind CSS for a sleek interface.
- Node.js (v18 or higher recommended)
- pnpm (or npm/yarn)
pnpm install
# or
npm installpnpm dev
# or
npm run devVisit http://localhost:3000 to view the app.
pnpm build
pnpm start├── app/ # Application entry, layout, and main page
│ ├── globals.css # Global styles (Tailwind CSS)
│ ├── layout.tsx # Root layout and metadata
│ └── page.tsx # Main business card editor UI
├── components/ # Reusable UI and card components
│ ├── card/ # Card-specific components (header, form, export, etc.)
│ └── ui/ # shadcn/ui and custom UI primitives
├── data/
│ └── themes.ts # Theme definitions
├── hooks/
│ └── use-mobile.ts # Responsive/mobile detection hook
├── lib/
│ └── utils.ts # Utility functions (e.g., class merging)
├── public/ # Static assets (SVGs, icons)
├── package.json # Project metadata and dependencies
├── next.config.ts # Next.js configuration
├── tsconfig.json # TypeScript configuration
└── README.md # Project documentation
Pull requests and issues are welcome! For major changes, please open an issue first to discuss what you would like to change.