Blogkit

A comprehensive, production-ready blog component library for React and Next.js applications. Built with TypeScript and SCSS modules, Blogkit provides a complete suite of components for creating professional, interactive blog posts with advanced features including syntax highlighting, diagram rendering, callouts, and more.

View Full Documentation | Live Demo

Overview

Blogkit is designed to streamline the development of content-rich blog applications by providing a modular, customizable component library. It supports modern React patterns, offers full TypeScript support, and includes responsive design out of the box.

Features

• Blog Layout System: Pre-built layout components with table of contents navigation
• Syntax Highlighting: Code block components with multi-language support via Prism.js
• Diagram Rendering: Integrated Mermaid.js support for flowcharts, sequence diagrams, and more
• Content Components: Callouts, data tables, and specialized blog link components
• TypeScript Support: Fully typed API for enhanced developer experience
• Responsive Design: Mobile-first design with SCSS modules
• React 19 Compatible: Built to work seamlessly with the latest React version
• Next.js Optimized: Designed for optimal performance in Next.js applications

Installation

npm install @san-siva/blogkit
# or
yarn add @san-siva/blogkit
# or
pnpm add @san-siva/blogkit

Note: The required @san-siva/stylekit package is automatically installed as a dependency.

Peer Dependencies

npm 7+ will automatically prompt you to install peer dependencies. If you need to install them manually:

npm install @react-spring/web mermaid prismjs react-syntax-highlighter

Note: Blogkit also requires react@^19.0.0, react-dom@^19.0.0, and next@^16.0.10, which are typically already installed in Next.js projects.

Quick Start

1. Import Styles

First, import the required stylesheets in your root layout or app entry point:

// app/layout.tsx or _app.tsx
import '@san-siva/blogkit/styles.css';

Why is this required?

Blogkit pre-compiles its SCSS modules into CSS at build time. This approach provides several benefits:

• No Sass dependency - You don't need to install Sass in your project
• Faster builds - CSS is already compiled, no SCSS processing needed
• Better compatibility - Avoids conflicts with different Sass versions

The styles.css import provides:

• All component styles (Blog, CodeBlock, Mermaid, Table, Callout, etc.)
• Responsive design rules
• Theme variables and custom properties
• Critical layout styles

Without this import, components will render unstyled.

2. Use Components

import { Blog, BlogHeader, BlogSection, CodeBlock, Callout } from '@san-siva/blogkit';

export default function MyBlogPost() {
	return (
		<Blog>
			<BlogHeader
				title={['My First Blog Post']}
				desc={['Published on December 15, 2025']}
			/>

			<BlogSection title="Introduction">
				<p>Welcome to my blog built with Blogkit!</p>

				<Callout type="info" hasMarginDown>
					<p>This is an informational callout.</p>
				</Callout>

				<CodeBlock
					language="typescript"
					code={`const greeting = "Hello, Blogkit!";`}
					hasMarginDown
				/>
			</BlogSection>
		</Blog>
	);
}

Documentation

Comprehensive documentation is available at https://blogkit-c367c.web.app/

The documentation includes:

• Complete component API reference
• Interactive live examples
• Implementation guides and best practices
• Code snippets for all components
• Customization and theming guide
• TypeScript usage examples and type definitions

Examples

See Blogkit in action in these blogs and documentation sites:

• Gitsy - A blog built with Blogkit showcasing various components
• Optimizing Background Tasks with requestIdleCallback - Advanced scheduling in the JavaScript event loop
• Linting at Scale - Strategies for updating ESLint configs in large applications

System Requirements

Development Environment

• Node.js: 18.0.0 or higher (20.x LTS recommended)
• Package Manager: npm 7+, yarn 1.22+, or pnpm 8+
• TypeScript: 5.0.0 or higher (optional, but recommended for type safety)

Runtime Dependencies

• React: ^19.0.0 or higher
• React DOM: ^19.0.0 or higher
• Next.js: ^16.0.10 or higher

Operating System

Blogkit is cross-platform and supports:

• macOS: 10.15 (Catalina) or later
• Windows: 10 or later
• Linux: Most modern distributions (Ubuntu 20.04+, Debian 10+, etc.)

Browser Support

Blogkit supports all modern browsers:

• Chrome: Latest version
• Firefox: Latest version
• Safari: Latest version (macOS and iOS)
• Edge: Latest version

Minimum browser versions:

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Contributing

Contributions are welcome and appreciated. To contribute:

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

Please ensure your code follows the existing style conventions and includes appropriate tests.

For bug reports and feature requests, please open an issue on GitHub.

License

MIT © Santhosh Siva

Author

Santhosh Siva

• Website: https://santhoshsiva.dev
• GitHub: @san-siva