https://github.com/magicuidesign/blog-template
A minimal blog template built using Next.js.
https://github.com/magicuidesign/blog-template
fumadocs magicui nextjs react shadcn tailwindcss
Last synced: about 2 months ago
JSON representation
A minimal blog template built using Next.js.
- Host: GitHub
- URL: https://github.com/magicuidesign/blog-template
- Owner: magicuidesign
- Created: 2025-07-25T16:48:07.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-08-13T16:58:13.000Z (about 2 months ago)
- Last Synced: 2025-08-13T18:48:13.760Z (about 2 months ago)
- Topics: fumadocs, magicui, nextjs, react, shadcn, tailwindcss
- Language: TypeScript
- Homepage: https://blog-magicui.vercel.app/
- Size: 1.9 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MagicUI Blog
A modern, responsive blog built with Next.js 15, Fumadocs MDX, and Tailwind CSS. Beautiful interface for displaying articles, tutorials, and insights about React and modern web development.
## ✨ Features
- 🎨 **Modern Design** - Clean, responsive interface
- 📝 **MDX Support** - Write blog posts in MDX with full component support
- 🌙 **Dark Mode** - Built-in dark/light theme toggle
- 🏷️ **Tags & Categories** - Organize content with tags
- ⭐ **Featured Posts** - Highlight your best articles
- 📱 **Mobile Responsive** - Perfect on all devices
- 🚀 **Fast Performance** - Optimized with Next.js 15
## 🚀 Getting Started
```bash
# Clone the repository
git clone
cd blog-template
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
```
## ✍️ Adding Blog Posts
Create a new MDX file in `blog/content/` with format `your-post-title.mdx`:
````mdx
---
title: "Your Blog Post Title"
description: "A brief description of your post"
date: "2024-12-01"
tags: ["React", "Next.js", "Tutorial"]
featured: true
readTime: "10 min read"
author: "Your Name"
---
Your blog post content here...
## Markdown Support
You can use all standard Markdown features plus MDX components.
```tsx
// Code syntax highlighting works great!
export default function Component() {
return
Hello World!;
}
```
````
## 🎨 Customization
### Adding New Tags/Categories
Simply add them to your blog post frontmatter. The system automatically generates tag pages.
### Featured Posts
Set `featured: true` in your blog post frontmatter to highlight it on the homepage (you can create a dedicated feature section in the home page).
### Styling
The project uses Tailwind CSS with a custom design system. Modify styles in:
- `app/globals.css` - Global styles
- Individual component files - Component-specific styles
### For Authors
Add your author details to the `lib/authors.ts` file.
```tsx
// lib/authors.ts
export const authors: Record = {
dillion: {
name: "Dillion Verma",
position: "Software Engineer",
avatar: "/authors/dillion.png",
},
arghya: {
name: "Arghya Das",
position: "Design System Engineer",
avatar: "/authors/arghya.png",
},
// Add your author details here
yourname: {
name: "Your Full Name",
position: "Your Position/Title",
avatar: "/authors/your-avatar.png",
},
} as const;
```
Then reference your author in blog posts using the key (e.g., `author: "yourname"`).
## 📖 Technologies Used
- **Next.js 15** - React framework with App Router
- **Fumadocs MDX** - MDX processing and components
- **Tailwind CSS** - Utility-first CSS framework
- **TypeScript** - Type-safe JavaScript
- **Geist Font** - Modern typography
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 📄 License
This project is open source and available under the [MIT License](LICENSE).