Build Your Professional Site with Next.js & Blog Kit

Blog Kit is a modern, Next.js-first toolkit designed to help you build your own professional content site with markdown in minutes. Whether you're creating a personal blog, documentation site, or content platform, Blog Kit provides all the essential tools you need to build a high-performance site with minimal configuration.

Perfect for developers, writers, and content creators who want full control over their content using the power of Next.js and React server components.

Key Features

Core Package

• ✅ Parse markdown files with frontmatter (using gray-matter)
• ✅ Extract content metadata (title, description, date, category)
• ✅ Calculate reading time automatically (using reading-time)
• ✅ Sort items by date (newest first)
• ✅ TypeScript support with full type definitions
• ✅ Zero dependencies on React or UI frameworks

React Package

• ✅ Beautiful, customizable markdown rendering (using react-markdown)
• ✅ Syntax highlighting for code blocks (using rehype-prism-plus)
• ✅ GitHub Flavored Markdown (GFM) support (using remark-gfm)
• ✅ Raw HTML rendering support (using rehype-raw)
• ✅ Automatic heading IDs for anchor links (using rehype-slug-custom-id)
• ✅ Beautiful, stateless ContentList for high-performance rendering
• ✅ Customizable Filter component with built-in search, categories, and results count
• ✅ useContent hook and shared utilities for easy search/filter integration
• ✅ Loading placeholders and responsive content cards
• ✅ Customizable styling with Tailwind CSS classes
• ✅ TypeScript support with full type definitions
• ✅ Work seamlessly with Next.js App Router and Server Components

Use Cases

Blog Kit is perfect for:

• Personal Blogs - Share your thoughts, tutorials, and experiences
• Documentation Sites - Create beautiful docs with markdown
• Portfolio Projects - Showcase your writing and technical skills
• Content Platforms - Build content-driven applications
• Technical Blogs - Write about code with syntax highlighting
• Company Blogs - Professional blog systems with minimal setup

Packages

• @haroonwaves/blog-kit-core - Core utilities for parsing markdown files with frontmatter
• @haroonwaves/blog-kit-react - React components and hooks for rendering content

Live Demo

haroonwaves.com/blog - A full blog site built using Blog Kit.

Getting Started

Ready to build your site? Get started in minutes:

1. Getting Started — Install, configure, and build your first site.
2. Guides — Add search, dark mode, and customize components
3. API Reference — Complete reference for all functions and components

Or jump straight to the Getting Started Guide to see Blog Kit in action.