Blogkit is a comprehensive component library built with TypeScript and SCSS modules, providing everything you need to create beautiful, interactive blog posts with code highlighting, diagrams, callouts, and more.
In fact, this documentation page itself was built using Blogkit! You're currently viewing a live example of what Blogkit can do.
Explore these production-ready examples to see Blogkit in action and learn from real-world implementations:
See how Blogkit handles complex technical content with rich features:
Tip: Browse the source code of these examples to learn best practices for component usage, styling customization, and application structure. Each example demonstrates different use cases and complexity levels.
Browser Support: Blogkit supports all modern browsers including Chrome 90+, Firefox 88+, Safari 14+, and Edge 90+.
Install Blogkit using npm or yarn:
npm install @san-siva/blogkitNote: npm 7+ will automatically prompt you to install peer dependencies if they're missing.
Important: You must import the Blogkit styles in your root layout or app entry point.
Why is this required?
Blogkit pre-compiles its SCSS modules into CSS at build time. This means you don't need Sass as a dependency, and your builds are faster. The styles.css import provides all component styles, responsive design rules, theme variables, and critical layout styles. Without it, components will render unstyled.
// app/layout.tsx or _app.tsx
// REQUIRED: Import Blogkit styles once in your root layout
// This provides all compiled SCSS module styles for components
import '@san-siva/blogkit/styles.css';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}Once you've imported the styles, you can start using Blogkit components:
import { Blog, BlogHeader, BlogSection } from '@san-siva/blogkit';
// Note: Ensure you've imported '@san-siva/blogkit/styles.css' in your root layout
export default function MyBlog() {
return (
<Blog>
<BlogHeader
title={['My Blog Post']}
desc={['A description of my blog post']}
/>
<BlogSection title="Introduction">
<p>Your content here...</p>
</BlogSection>
</Blog>
);
}The main container component that wraps all your blog content.
<Blog>
{/* Your blog content */}
</Blog>JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight way to embed machine-readable metadata directly inside your HTML. Search engines like Google read this metadata to understand the content of a page beyond what they can infer from the visible text alone — enabling rich results such as article cards, author attribution, publish dates, and breadcrumbs in search listings.
Unlike <meta> tags, which only describe the page in general terms, JSON-LD lets you express precise, typed facts about your content using the shared vocabulary defined by Schema.org. For example, a BlogPosting type can carry the headline, author, publication date, and canonical URL all in one structured block — the same information that social platforms and search engines surface when previewing your link.
Pass a jsonLd prop to the Blog component to inject this metadata as a <script type="application/ld+json"> tag in the page head. Blogkit uses the schema-dts package to give you full TypeScript types for every Schema.org type, so mistakes are caught at compile time.
Tip: Use a specific Schema.org type like BlogPosting, Article, or TechArticle instead of the base Thing type for richer structured data.
import { Blog } from '@san-siva/blogkit';
import type { WithContext, BlogPosting } from 'schema-dts';
const jsonLd: WithContext<BlogPosting> = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Blog Post Title',
description: 'A short description of the post',
author: {
'@type': 'Person',
name: 'Author Name',
},
datePublished: '2025-01-01',
url: 'https://blogkit.santhoshsiva.dev/',
};
export default function MyBlogPost() {
return (
<Blog jsonLd={jsonLd}>
{/* Your blog content */}
</Blog>
);
}Display a title and description at the top of your blog post.
<BlogHeader
title={['My Blog Title']}
desc={['Posted on January 1, 2025']}
/>Create sections within your blog post with optional titles.
<BlogSection title="Section Title" hasMarginBottom>
<p>Your section content...</p>
</BlogSection>Display syntax-highlighted code blocks with support for multiple programming languages.
<CodeBlock
language="typescript"
code={`const greeting = "Hello, World!";`}
hasMarginDown={true}
/>Highlight important information with styled callout boxes.
Information: This is an informative message, often used to provide
context or additional details to users.
Warning: This is a warning message, typically used to alert users of
potential risks or issues.
Error: This is an error message, used to notify users of critical
problems or failures.
Success: This is a success message, indicating that an action or
operation was completed successfully.
<Callout type="info">
<p>
<b>Information:</b>
This is an informative message, often used to provide
<br />
context or <b>additional details</b> to users.
</p>
</Callout>"info",
"warning",
"error",
"success"
Render diagrams and visualizations using Mermaid syntax. Supports flowcharts, sequence diagrams, timelines, and more.
Diagram Loading...
<Mermaid
id="my-diagram"
code={`flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Process]
B -->|No| D[End]
C --> D`}
hasMarginDown={true}
/>Create animated links to blog posts with title, description, and hover effects.
Learn how to use Blogkit components in your Next.js application
Read More
<BlogLink
title="My Blog Post"
desc="A short description of the blog post content"
href="/blog/my-blog-post"
/>Display tabular data with headers and rows. Columns automatically size to fit their content for optimal space usage.
<Table
headers={['Column 1', 'Column 2', 'Column 3']}
rows={[
['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
]}
hasMarginDown={true}
fontSize="14px"
/>Blogkit is powered by StyleKit, a modular SCSS design system that provides the foundation for all styling in Blogkit. StyleKit is a comprehensive design system that includes colors, typography, spacing utilities, animations, and responsive breakpoints.
StyleKit provides Blogkit with a consistent design language through:
By leveraging StyleKit, Blogkit ensures visual consistency across all components while giving you full control over customization through SCSS variables and CSS custom properties.
You can customize Blogkit's appearance in two ways:
Visit the StyleKit documentation to explore all available design tokens and customization options.
Blogkit supports all modern browsers with the following minimum versions:
Contributions are welcome! Please fork the repository and submit pull requests. For bugs or feature requests, open an issue on the repository.
View source code, report issues, and contributeThis project is licensed under the MIT License.
Author: Santhosh Siva
GitHub: https://github.com/san-siva
Blogkit is a comprehensive component library built with TypeScript and SCSS modules, providing everything you need to create beautiful, interactive blog posts with code highlighting, diagrams, callouts, and more.
In fact, this documentation page itself was built using Blogkit! You're currently viewing a live example of what Blogkit can do.
Explore these production-ready examples to see Blogkit in action and learn from real-world implementations:
See how Blogkit handles complex technical content with rich features:
Tip: Browse the source code of these examples to learn best practices for component usage, styling customization, and application structure. Each example demonstrates different use cases and complexity levels.
Browser Support: Blogkit supports all modern browsers including Chrome 90+, Firefox 88+, Safari 14+, and Edge 90+.
Install Blogkit using npm or yarn:
npm install @san-siva/blogkitNote: npm 7+ will automatically prompt you to install peer dependencies if they're missing.
Important: You must import the Blogkit styles in your root layout or app entry point.
Why is this required?
Blogkit pre-compiles its SCSS modules into CSS at build time. This means you don't need Sass as a dependency, and your builds are faster. The styles.css import provides all component styles, responsive design rules, theme variables, and critical layout styles. Without it, components will render unstyled.
// app/layout.tsx or _app.tsx
// REQUIRED: Import Blogkit styles once in your root layout
// This provides all compiled SCSS module styles for components
import '@san-siva/blogkit/styles.css';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}Once you've imported the styles, you can start using Blogkit components:
import { Blog, BlogHeader, BlogSection } from '@san-siva/blogkit';
// Note: Ensure you've imported '@san-siva/blogkit/styles.css' in your root layout
export default function MyBlog() {
return (
<Blog>
<BlogHeader
title={['My Blog Post']}
desc={['A description of my blog post']}
/>
<BlogSection title="Introduction">
<p>Your content here...</p>
</BlogSection>
</Blog>
);
}The main container component that wraps all your blog content.
<Blog>
{/* Your blog content */}
</Blog>JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight way to embed machine-readable metadata directly inside your HTML. Search engines like Google read this metadata to understand the content of a page beyond what they can infer from the visible text alone — enabling rich results such as article cards, author attribution, publish dates, and breadcrumbs in search listings.
Unlike <meta> tags, which only describe the page in general terms, JSON-LD lets you express precise, typed facts about your content using the shared vocabulary defined by Schema.org. For example, a BlogPosting type can carry the headline, author, publication date, and canonical URL all in one structured block — the same information that social platforms and search engines surface when previewing your link.
Pass a jsonLd prop to the Blog component to inject this metadata as a <script type="application/ld+json"> tag in the page head. Blogkit uses the schema-dts package to give you full TypeScript types for every Schema.org type, so mistakes are caught at compile time.
Tip: Use a specific Schema.org type like BlogPosting, Article, or TechArticle instead of the base Thing type for richer structured data.
import { Blog } from '@san-siva/blogkit';
import type { WithContext, BlogPosting } from 'schema-dts';
const jsonLd: WithContext<BlogPosting> = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Blog Post Title',
description: 'A short description of the post',
author: {
'@type': 'Person',
name: 'Author Name',
},
datePublished: '2025-01-01',
url: 'https://blogkit.santhoshsiva.dev/',
};
export default function MyBlogPost() {
return (
<Blog jsonLd={jsonLd}>
{/* Your blog content */}
</Blog>
);
}Display a title and description at the top of your blog post.
<BlogHeader
title={['My Blog Title']}
desc={['Posted on January 1, 2025']}
/>Create sections within your blog post with optional titles.
<BlogSection title="Section Title" hasMarginBottom>
<p>Your section content...</p>
</BlogSection>Display syntax-highlighted code blocks with support for multiple programming languages.
<CodeBlock
language="typescript"
code={`const greeting = "Hello, World!";`}
hasMarginDown={true}
/>Highlight important information with styled callout boxes.
Information: This is an informative message, often used to provide
context or additional details to users.
Warning: This is a warning message, typically used to alert users of
potential risks or issues.
Error: This is an error message, used to notify users of critical
problems or failures.
Success: This is a success message, indicating that an action or
operation was completed successfully.
<Callout type="info">
<p>
<b>Information:</b>
This is an informative message, often used to provide
<br />
context or <b>additional details</b> to users.
</p>
</Callout>"info",
"warning",
"error",
"success"
Render diagrams and visualizations using Mermaid syntax. Supports flowcharts, sequence diagrams, timelines, and more.
Diagram Loading...
<Mermaid
id="my-diagram"
code={`flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Process]
B -->|No| D[End]
C --> D`}
hasMarginDown={true}
/>Create animated links to blog posts with title, description, and hover effects.
Learn how to use Blogkit components in your Next.js application
Read More
<BlogLink
title="My Blog Post"
desc="A short description of the blog post content"
href="/blog/my-blog-post"
/>Display tabular data with headers and rows. Columns automatically size to fit their content for optimal space usage.
<Table
headers={['Column 1', 'Column 2', 'Column 3']}
rows={[
['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
]}
hasMarginDown={true}
fontSize="14px"
/>Blogkit is powered by StyleKit, a modular SCSS design system that provides the foundation for all styling in Blogkit. StyleKit is a comprehensive design system that includes colors, typography, spacing utilities, animations, and responsive breakpoints.
StyleKit provides Blogkit with a consistent design language through:
By leveraging StyleKit, Blogkit ensures visual consistency across all components while giving you full control over customization through SCSS variables and CSS custom properties.
You can customize Blogkit's appearance in two ways:
Visit the StyleKit documentation to explore all available design tokens and customization options.
Blogkit supports all modern browsers with the following minimum versions:
Contributions are welcome! Please fork the repository and submit pull requests. For bugs or feature requests, open an issue on the repository.
View source code, report issues, and contributeThis project is licensed under the MIT License.
Author: Santhosh Siva
GitHub: https://github.com/san-siva
Blogkit is a comprehensive component library built with TypeScript and SCSS modules, providing everything you need to create beautiful, interactive blog posts with code highlighting, diagrams, callouts, and more.
In fact, this documentation page itself was built using Blogkit! You're currently viewing a live example of what Blogkit can do.
Explore these production-ready examples to see Blogkit in action and learn from real-world implementations:
See how Blogkit handles complex technical content with rich features:
Tip: Browse the source code of these examples to learn best practices for component usage, styling customization, and application structure. Each example demonstrates different use cases and complexity levels.
See how Blogkit handles complex technical content with rich features:
Browser Support: Blogkit supports all modern browsers including Chrome 90+, Firefox 88+, Safari 14+, and Edge 90+.
Install Blogkit using npm or yarn:
1npm install @san-siva/blogkitNote: npm 7+ will automatically prompt you to install peer dependencies if they're missing.
1npm install @san-siva/blogkitImportant: You must import the Blogkit styles in your root layout or app entry point.
Why is this required?
Blogkit pre-compiles its SCSS modules into CSS at build time. This means you don't need Sass as a dependency, and your builds are faster. The styles.css import provides all component styles, responsive design rules, theme variables, and critical layout styles. Without it, components will render unstyled.
1// app/layout.tsx or _app.tsx
2// REQUIRED: Import Blogkit styles once in your root layout
3// This provides all compiled SCSS module styles for components
4import '@san-siva/blogkit/styles.css';
5
6export default function RootLayout({ children }) {
7 return (
8 <html lang="en">
9 <body>{children}</body>
10 </html>
11 );
12}1// app/layout.tsx or _app.tsx
2// REQUIRED: Import Blogkit styles once in your root layout
3// This provides all compiled SCSS module styles for components
4import '@san-siva/blogkit/styles.css';
5
6export default function RootLayout({ children }) {
7 return (
8 <html lang="en">
9 <body>{children}</body>
10 </html>
11 );
12}Once you've imported the styles, you can start using Blogkit components:
1import { Blog, BlogHeader, BlogSection } from '@san-siva/blogkit';
2
3// Note: Ensure you've imported '@san-siva/blogkit/styles.css' in your root layout
4
5export default function MyBlog() {
6 return (
7 <Blog>
8 <BlogHeader
9 title={['My Blog Post']}
10 desc={['A description of my blog post']}
11 />
12 <BlogSection title="Introduction">
13 <p>Your content here...</p>
14 </BlogSection>
15 </Blog>
16 );
17}1import { Blog, BlogHeader, BlogSection } from '@san-siva/blogkit';
2
3// Note: Ensure you've imported '@san-siva/blogkit/styles.css' in your root layout
4
5export default function MyBlog() {
6 return (
7 <Blog>
8 <BlogHeader
9 title={['My Blog Post']}
10 desc={['A description of my blog post']}
11 />
12 <BlogSection title="Introduction">
13 <p>Your content here...</p>
14 </BlogSection>
15 </Blog>
16 );
17}The main container component that wraps all your blog content.
<Blog>
{/* Your blog content */}
</Blog>JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight way to embed machine-readable metadata directly inside your HTML. Search engines like Google read this metadata to understand the content of a page beyond what they can infer from the visible text alone — enabling rich results such as article cards, author attribution, publish dates, and breadcrumbs in search listings.
Unlike <meta> tags, which only describe the page in general terms, JSON-LD lets you express precise, typed facts about your content using the shared vocabulary defined by Schema.org. For example, a BlogPosting type can carry the headline, author, publication date, and canonical URL all in one structured block — the same information that social platforms and search engines surface when previewing your link.
Pass a jsonLd prop to the Blog component to inject this metadata as a <script type="application/ld+json"> tag in the page head. Blogkit uses the schema-dts package to give you full TypeScript types for every Schema.org type, so mistakes are caught at compile time.
Tip: Use a specific Schema.org type like BlogPosting, Article, or TechArticle instead of the base Thing type for richer structured data.
import { Blog } from '@san-siva/blogkit';
import type { WithContext, BlogPosting } from 'schema-dts';
const jsonLd: WithContext<BlogPosting> = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Blog Post Title',
description: 'A short description of the post',
author: {
'@type': 'Person',
name: 'Author Name',
},
datePublished: '2025-01-01',
url: 'https://blogkit.santhoshsiva.dev/',
};
export default function MyBlogPost() {
return (
<Blog jsonLd={jsonLd}>
{/* Your blog content */}
</Blog>
);
}Display a title and description at the top of your blog post.
<BlogHeader
title={['My Blog Title']}
desc={['Posted on January 1, 2025']}
/>Create sections within your blog post with optional titles.
<BlogSection title="Section Title" hasMarginBottom>
<p>Your section content...</p>
</BlogSection>Display syntax-highlighted code blocks with support for multiple programming languages.
<CodeBlock
language="typescript"
code={`const greeting = "Hello, World!";`}
hasMarginDown={true}
/>Highlight important information with styled callout boxes.
Information: This is an informative message, often used to provide
context or additional details to users.
Warning: This is a warning message, typically used to alert users of
potential risks or issues.
Error: This is an error message, used to notify users of critical
problems or failures.
Success: This is a success message, indicating that an action or
operation was completed successfully.
<Callout type="info">
<p>
<b>Information:</b>
This is an informative message, often used to provide
<br />
context or <b>additional details</b> to users.
</p>
</Callout>"info",
"warning",
"error",
"success"
Render diagrams and visualizations using Mermaid syntax. Supports flowcharts, sequence diagrams, timelines, and more.
Diagram Loading...
<Mermaid
id="my-diagram"
code={`flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Process]
B -->|No| D[End]
C --> D`}
hasMarginDown={true}
/>Create animated links to blog posts with title, description, and hover effects.
Learn how to use Blogkit components in your Next.js application
Read More
<BlogLink
title="My Blog Post"
desc="A short description of the blog post content"
href="/blog/my-blog-post"
/>Display tabular data with headers and rows. Columns automatically size to fit their content for optimal space usage.
<Table
headers={['Column 1', 'Column 2', 'Column 3']}
rows={[
['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
]}
hasMarginDown={true}
fontSize="14px"
/>The main container component that wraps all your blog content.
1<Blog>
2 {/* Your blog content */}
3</Blog>JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight way to embed machine-readable metadata directly inside your HTML. Search engines like Google read this metadata to understand the content of a page beyond what they can infer from the visible text alone — enabling rich results such as article cards, author attribution, publish dates, and breadcrumbs in search listings.
Unlike <meta> tags, which only describe the page in general terms, JSON-LD lets you express precise, typed facts about your content using the shared vocabulary defined by Schema.org. For example, a BlogPosting type can carry the headline, author, publication date, and canonical URL all in one structured block — the same information that social platforms and search engines surface when previewing your link.
Pass a jsonLd prop to the Blog component to inject this metadata as a <script type="application/ld+json"> tag in the page head. Blogkit uses the schema-dts package to give you full TypeScript types for every Schema.org type, so mistakes are caught at compile time.
Tip: Use a specific Schema.org type like BlogPosting, Article, or TechArticle instead of the base Thing type for richer structured data.
import { Blog } from '@san-siva/blogkit';
import type { WithContext, BlogPosting } from 'schema-dts';
const jsonLd: WithContext<BlogPosting> = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Blog Post Title',
description: 'A short description of the post',
author: {
'@type': 'Person',
name: 'Author Name',
},
datePublished: '2025-01-01',
url: 'https://blogkit.santhoshsiva.dev/',
};
export default function MyBlogPost() {
return (
<Blog jsonLd={jsonLd}>
{/* Your blog content */}
</Blog>
);
}1<Blog>
2 {/* Your blog content */}
3</Blog>JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight way to embed machine-readable metadata directly inside your HTML. Search engines like Google read this metadata to understand the content of a page beyond what they can infer from the visible text alone — enabling rich results such as article cards, author attribution, publish dates, and breadcrumbs in search listings.
Unlike <meta> tags, which only describe the page in general terms, JSON-LD lets you express precise, typed facts about your content using the shared vocabulary defined by Schema.org. For example, a BlogPosting type can carry the headline, author, publication date, and canonical URL all in one structured block — the same information that social platforms and search engines surface when previewing your link.
Pass a jsonLd prop to the Blog component to inject this metadata as a <script type="application/ld+json"> tag in the page head. Blogkit uses the schema-dts package to give you full TypeScript types for every Schema.org type, so mistakes are caught at compile time.
Tip: Use a specific Schema.org type like BlogPosting, Article, or TechArticle instead of the base Thing type for richer structured data.
import { Blog } from '@san-siva/blogkit';
import type { WithContext, BlogPosting } from 'schema-dts';
const jsonLd: WithContext<BlogPosting> = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Blog Post Title',
description: 'A short description of the post',
author: {
'@type': 'Person',
name: 'Author Name',
},
datePublished: '2025-01-01',
url: 'https://blogkit.santhoshsiva.dev/',
};
export default function MyBlogPost() {
return (
<Blog jsonLd={jsonLd}>
{/* Your blog content */}
</Blog>
);
}1import { Blog } from '@san-siva/blogkit';
2import type { WithContext, BlogPosting } from 'schema-dts';
3
4const jsonLd: WithContext<BlogPosting> = {
5 '@context': 'https://schema.org',
6 '@type': 'BlogPosting',
7 headline: 'My Blog Post Title',
8 description: 'A short description of the post',
9 author: {
10 '@type': 'Person',
11 name: 'Author Name',
12 },
13 datePublished: '2025-01-01',
14 url: 'https://blogkit.santhoshsiva.dev/',
15};
16
17export default function MyBlogPost() {
18 return (
19 <Blog jsonLd={jsonLd}>
20 {/* Your blog content */}
21 </Blog>
22 );
23}Display a title and description at the top of your blog post.
1<BlogHeader
2 title={['My Blog Title']}
3 desc={['Posted on January 1, 2025']}
4/>1<BlogHeader
2 title={['My Blog Title']}
3 desc={['Posted on January 1, 2025']}
4/>Create sections within your blog post with optional titles.
1<BlogSection title="Section Title" hasMarginBottom>
2 <p>Your section content...</p>
3</BlogSection>1<BlogSection title="Section Title" hasMarginBottom>
2 <p>Your section content...</p>
3</BlogSection>Display syntax-highlighted code blocks with support for multiple programming languages.
1<CodeBlock
2 language="typescript"
3 code={`const greeting = "Hello, World!";`}
4 hasMarginDown={true}
5/>1<CodeBlock
2 language="typescript"
3 code={`const greeting = "Hello, World!";`}
4 hasMarginDown={true}
5/>Highlight important information with styled callout boxes.
Information: This is an informative message, often used to provide
context or additional details to users.
Warning: This is a warning message, typically used to alert users of
potential risks or issues.
Error: This is an error message, used to notify users of critical
problems or failures.
Success: This is a success message, indicating that an action or
operation was completed successfully.
1<Callout type="info">
2 <p>
3 <b>Information:</b>
4 This is an informative message, often used to provide
5 <br />
6 context or <b>additional details</b> to users.
7 </p>
8</Callout>"info",
"warning",
"error",
"success"
1<Callout type="info">
2 <p>
3 <b>Information:</b>
4 This is an informative message, often used to provide
5 <br />
6 context or <b>additional details</b> to users.
7 </p>
8</Callout>Render diagrams and visualizations using Mermaid syntax. Supports flowcharts, sequence diagrams, timelines, and more.
Diagram Loading...
1<Mermaid
2 id="my-diagram"
3 code={`flowchart LR
4 A[Start] --> B{Decision}
5 B -->|Yes| C[Process]
6 B -->|No| D[End]
7 C --> D`}
8 hasMarginDown={true}
9/>1<Mermaid
2 id="my-diagram"
3 code={`flowchart LR
4 A[Start] --> B{Decision}
5 B -->|Yes| C[Process]
6 B -->|No| D[End]
7 C --> D`}
8 hasMarginDown={true}
9/>Create animated links to blog posts with title, description, and hover effects.
Learn how to use Blogkit components in your Next.js application
Read More
1<BlogLink
2 title="My Blog Post"
3 desc="A short description of the blog post content"
4 href="/blog/my-blog-post"
5/>Learn how to use Blogkit components in your Next.js application
Read More
1<BlogLink
2 title="My Blog Post"
3 desc="A short description of the blog post content"
4 href="/blog/my-blog-post"
5/>Display tabular data with headers and rows. Columns automatically size to fit their content for optimal space usage.
1<Table
2 headers={['Column 1', 'Column 2', 'Column 3']}
3 rows={[
4 ['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
5 ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
6 ]}
7 hasMarginDown={true}
8 fontSize="14px"
9/>1<Table
2 headers={['Column 1', 'Column 2', 'Column 3']}
3 rows={[
4 ['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
5 ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
6 ]}
7 hasMarginDown={true}
8 fontSize="14px"
9/>Blogkit is powered by StyleKit, a modular SCSS design system that provides the foundation for all styling in Blogkit. StyleKit is a comprehensive design system that includes colors, typography, spacing utilities, animations, and responsive breakpoints.
StyleKit provides Blogkit with a consistent design language through:
By leveraging StyleKit, Blogkit ensures visual consistency across all components while giving you full control over customization through SCSS variables and CSS custom properties.
You can customize Blogkit's appearance in two ways:
Visit the StyleKit documentation to explore all available design tokens and customization options.
StyleKit provides Blogkit with a consistent design language through:
By leveraging StyleKit, Blogkit ensures visual consistency across all components while giving you full control over customization through SCSS variables and CSS custom properties.
You can customize Blogkit's appearance in two ways:
Visit the StyleKit documentation to explore all available design tokens and customization options.
Blogkit supports all modern browsers with the following minimum versions:
Contributions are welcome! Please fork the repository and submit pull requests. For bugs or feature requests, open an issue on the repository.
View source code, report issues, and contributeAuthor: Santhosh Siva
GitHub: https://github.com/san-siva
Blogkit is a comprehensive component library built with TypeScript and SCSS modules, providing everything you need to create beautiful, interactive blog posts with code highlighting, diagrams, callouts, and more.
In fact, this documentation page itself was built using Blogkit! You're currently viewing a live example of what Blogkit can do.
Explore these production-ready examples to see Blogkit in action and learn from real-world implementations:
See how Blogkit handles complex technical content with rich features:
Tip: Browse the source code of these examples to learn best practices for component usage, styling customization, and application structure. Each example demonstrates different use cases and complexity levels.
See how Blogkit handles complex technical content with rich features:
Browser Support: Blogkit supports all modern browsers including Chrome 90+, Firefox 88+, Safari 14+, and Edge 90+.
Install Blogkit using npm or yarn:
1npm install @san-siva/blogkitNote: npm 7+ will automatically prompt you to install peer dependencies if they're missing.
1npm install @san-siva/blogkitImportant: You must import the Blogkit styles in your root layout or app entry point.
Why is this required?
Blogkit pre-compiles its SCSS modules into CSS at build time. This means you don't need Sass as a dependency, and your builds are faster. The styles.css import provides all component styles, responsive design rules, theme variables, and critical layout styles. Without it, components will render unstyled.
1// app/layout.tsx or _app.tsx
2// REQUIRED: Import Blogkit styles once in your root layout
3// This provides all compiled SCSS module styles for components
4import '@san-siva/blogkit/styles.css';
5
6export default function RootLayout({ children }) {
7 return (
8 <html lang="en">
9 <body>{children}</body>
10 </html>
11 );
12}1// app/layout.tsx or _app.tsx
2// REQUIRED: Import Blogkit styles once in your root layout
3// This provides all compiled SCSS module styles for components
4import '@san-siva/blogkit/styles.css';
5
6export default function RootLayout({ children }) {
7 return (
8 <html lang="en">
9 <body>{children}</body>
10 </html>
11 );
12}Once you've imported the styles, you can start using Blogkit components:
1import { Blog, BlogHeader, BlogSection } from '@san-siva/blogkit';
2
3// Note: Ensure you've imported '@san-siva/blogkit/styles.css' in your root layout
4
5export default function MyBlog() {
6 return (
7 <Blog>
8 <BlogHeader
9 title={['My Blog Post']}
10 desc={['A description of my blog post']}
11 />
12 <BlogSection title="Introduction">
13 <p>Your content here...</p>
14 </BlogSection>
15 </Blog>
16 );
17}1import { Blog, BlogHeader, BlogSection } from '@san-siva/blogkit';
2
3// Note: Ensure you've imported '@san-siva/blogkit/styles.css' in your root layout
4
5export default function MyBlog() {
6 return (
7 <Blog>
8 <BlogHeader
9 title={['My Blog Post']}
10 desc={['A description of my blog post']}
11 />
12 <BlogSection title="Introduction">
13 <p>Your content here...</p>
14 </BlogSection>
15 </Blog>
16 );
17}The main container component that wraps all your blog content.
<Blog>
{/* Your blog content */}
</Blog>JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight way to embed machine-readable metadata directly inside your HTML. Search engines like Google read this metadata to understand the content of a page beyond what they can infer from the visible text alone — enabling rich results such as article cards, author attribution, publish dates, and breadcrumbs in search listings.
Unlike <meta> tags, which only describe the page in general terms, JSON-LD lets you express precise, typed facts about your content using the shared vocabulary defined by Schema.org. For example, a BlogPosting type can carry the headline, author, publication date, and canonical URL all in one structured block — the same information that social platforms and search engines surface when previewing your link.
Pass a jsonLd prop to the Blog component to inject this metadata as a <script type="application/ld+json"> tag in the page head. Blogkit uses the schema-dts package to give you full TypeScript types for every Schema.org type, so mistakes are caught at compile time.
Tip: Use a specific Schema.org type like BlogPosting, Article, or TechArticle instead of the base Thing type for richer structured data.
import { Blog } from '@san-siva/blogkit';
import type { WithContext, BlogPosting } from 'schema-dts';
const jsonLd: WithContext<BlogPosting> = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Blog Post Title',
description: 'A short description of the post',
author: {
'@type': 'Person',
name: 'Author Name',
},
datePublished: '2025-01-01',
url: 'https://blogkit.santhoshsiva.dev/',
};
export default function MyBlogPost() {
return (
<Blog jsonLd={jsonLd}>
{/* Your blog content */}
</Blog>
);
}Display a title and description at the top of your blog post.
<BlogHeader
title={['My Blog Title']}
desc={['Posted on January 1, 2025']}
/>Create sections within your blog post with optional titles.
<BlogSection title="Section Title" hasMarginBottom>
<p>Your section content...</p>
</BlogSection>Display syntax-highlighted code blocks with support for multiple programming languages.
<CodeBlock
language="typescript"
code={`const greeting = "Hello, World!";`}
hasMarginDown={true}
/>Highlight important information with styled callout boxes.
Information: This is an informative message, often used to provide
context or additional details to users.
Warning: This is a warning message, typically used to alert users of
potential risks or issues.
Error: This is an error message, used to notify users of critical
problems or failures.
Success: This is a success message, indicating that an action or
operation was completed successfully.
<Callout type="info">
<p>
<b>Information:</b>
This is an informative message, often used to provide
<br />
context or <b>additional details</b> to users.
</p>
</Callout>"info",
"warning",
"error",
"success"
Render diagrams and visualizations using Mermaid syntax. Supports flowcharts, sequence diagrams, timelines, and more.
Diagram Loading...
<Mermaid
id="my-diagram"
code={`flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Process]
B -->|No| D[End]
C --> D`}
hasMarginDown={true}
/>Create animated links to blog posts with title, description, and hover effects.
Learn how to use Blogkit components in your Next.js application
Read More
<BlogLink
title="My Blog Post"
desc="A short description of the blog post content"
href="/blog/my-blog-post"
/>Display tabular data with headers and rows. Columns automatically size to fit their content for optimal space usage.
<Table
headers={['Column 1', 'Column 2', 'Column 3']}
rows={[
['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
]}
hasMarginDown={true}
fontSize="14px"
/>The main container component that wraps all your blog content.
1<Blog>
2 {/* Your blog content */}
3</Blog>JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight way to embed machine-readable metadata directly inside your HTML. Search engines like Google read this metadata to understand the content of a page beyond what they can infer from the visible text alone — enabling rich results such as article cards, author attribution, publish dates, and breadcrumbs in search listings.
Unlike <meta> tags, which only describe the page in general terms, JSON-LD lets you express precise, typed facts about your content using the shared vocabulary defined by Schema.org. For example, a BlogPosting type can carry the headline, author, publication date, and canonical URL all in one structured block — the same information that social platforms and search engines surface when previewing your link.
Pass a jsonLd prop to the Blog component to inject this metadata as a <script type="application/ld+json"> tag in the page head. Blogkit uses the schema-dts package to give you full TypeScript types for every Schema.org type, so mistakes are caught at compile time.
Tip: Use a specific Schema.org type like BlogPosting, Article, or TechArticle instead of the base Thing type for richer structured data.
import { Blog } from '@san-siva/blogkit';
import type { WithContext, BlogPosting } from 'schema-dts';
const jsonLd: WithContext<BlogPosting> = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Blog Post Title',
description: 'A short description of the post',
author: {
'@type': 'Person',
name: 'Author Name',
},
datePublished: '2025-01-01',
url: 'https://blogkit.santhoshsiva.dev/',
};
export default function MyBlogPost() {
return (
<Blog jsonLd={jsonLd}>
{/* Your blog content */}
</Blog>
);
}1<Blog>
2 {/* Your blog content */}
3</Blog>JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight way to embed machine-readable metadata directly inside your HTML. Search engines like Google read this metadata to understand the content of a page beyond what they can infer from the visible text alone — enabling rich results such as article cards, author attribution, publish dates, and breadcrumbs in search listings.
Unlike <meta> tags, which only describe the page in general terms, JSON-LD lets you express precise, typed facts about your content using the shared vocabulary defined by Schema.org. For example, a BlogPosting type can carry the headline, author, publication date, and canonical URL all in one structured block — the same information that social platforms and search engines surface when previewing your link.
Pass a jsonLd prop to the Blog component to inject this metadata as a <script type="application/ld+json"> tag in the page head. Blogkit uses the schema-dts package to give you full TypeScript types for every Schema.org type, so mistakes are caught at compile time.
Tip: Use a specific Schema.org type like BlogPosting, Article, or TechArticle instead of the base Thing type for richer structured data.
import { Blog } from '@san-siva/blogkit';
import type { WithContext, BlogPosting } from 'schema-dts';
const jsonLd: WithContext<BlogPosting> = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Blog Post Title',
description: 'A short description of the post',
author: {
'@type': 'Person',
name: 'Author Name',
},
datePublished: '2025-01-01',
url: 'https://blogkit.santhoshsiva.dev/',
};
export default function MyBlogPost() {
return (
<Blog jsonLd={jsonLd}>
{/* Your blog content */}
</Blog>
);
}1import { Blog } from '@san-siva/blogkit';
2import type { WithContext, BlogPosting } from 'schema-dts';
3
4const jsonLd: WithContext<BlogPosting> = {
5 '@context': 'https://schema.org',
6 '@type': 'BlogPosting',
7 headline: 'My Blog Post Title',
8 description: 'A short description of the post',
9 author: {
10 '@type': 'Person',
11 name: 'Author Name',
12 },
13 datePublished: '2025-01-01',
14 url: 'https://blogkit.santhoshsiva.dev/',
15};
16
17export default function MyBlogPost() {
18 return (
19 <Blog jsonLd={jsonLd}>
20 {/* Your blog content */}
21 </Blog>
22 );
23}Display a title and description at the top of your blog post.
1<BlogHeader
2 title={['My Blog Title']}
3 desc={['Posted on January 1, 2025']}
4/>1<BlogHeader
2 title={['My Blog Title']}
3 desc={['Posted on January 1, 2025']}
4/>Create sections within your blog post with optional titles.
1<BlogSection title="Section Title" hasMarginBottom>
2 <p>Your section content...</p>
3</BlogSection>1<BlogSection title="Section Title" hasMarginBottom>
2 <p>Your section content...</p>
3</BlogSection>Display syntax-highlighted code blocks with support for multiple programming languages.
1<CodeBlock
2 language="typescript"
3 code={`const greeting = "Hello, World!";`}
4 hasMarginDown={true}
5/>1<CodeBlock
2 language="typescript"
3 code={`const greeting = "Hello, World!";`}
4 hasMarginDown={true}
5/>Highlight important information with styled callout boxes.
Information: This is an informative message, often used to provide
context or additional details to users.
Warning: This is a warning message, typically used to alert users of
potential risks or issues.
Error: This is an error message, used to notify users of critical
problems or failures.
Success: This is a success message, indicating that an action or
operation was completed successfully.
1<Callout type="info">
2 <p>
3 <b>Information:</b>
4 This is an informative message, often used to provide
5 <br />
6 context or <b>additional details</b> to users.
7 </p>
8</Callout>"info",
"warning",
"error",
"success"
1<Callout type="info">
2 <p>
3 <b>Information:</b>
4 This is an informative message, often used to provide
5 <br />
6 context or <b>additional details</b> to users.
7 </p>
8</Callout>Render diagrams and visualizations using Mermaid syntax. Supports flowcharts, sequence diagrams, timelines, and more.
Diagram Loading...
1<Mermaid
2 id="my-diagram"
3 code={`flowchart LR
4 A[Start] --> B{Decision}
5 B -->|Yes| C[Process]
6 B -->|No| D[End]
7 C --> D`}
8 hasMarginDown={true}
9/>1<Mermaid
2 id="my-diagram"
3 code={`flowchart LR
4 A[Start] --> B{Decision}
5 B -->|Yes| C[Process]
6 B -->|No| D[End]
7 C --> D`}
8 hasMarginDown={true}
9/>Create animated links to blog posts with title, description, and hover effects.
Learn how to use Blogkit components in your Next.js application
Read More
1<BlogLink
2 title="My Blog Post"
3 desc="A short description of the blog post content"
4 href="/blog/my-blog-post"
5/>Learn how to use Blogkit components in your Next.js application
Read More
1<BlogLink
2 title="My Blog Post"
3 desc="A short description of the blog post content"
4 href="/blog/my-blog-post"
5/>Display tabular data with headers and rows. Columns automatically size to fit their content for optimal space usage.
1<Table
2 headers={['Column 1', 'Column 2', 'Column 3']}
3 rows={[
4 ['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
5 ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
6 ]}
7 hasMarginDown={true}
8 fontSize="14px"
9/>1<Table
2 headers={['Column 1', 'Column 2', 'Column 3']}
3 rows={[
4 ['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
5 ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
6 ]}
7 hasMarginDown={true}
8 fontSize="14px"
9/>Blogkit is powered by StyleKit, a modular SCSS design system that provides the foundation for all styling in Blogkit. StyleKit is a comprehensive design system that includes colors, typography, spacing utilities, animations, and responsive breakpoints.
StyleKit provides Blogkit with a consistent design language through:
By leveraging StyleKit, Blogkit ensures visual consistency across all components while giving you full control over customization through SCSS variables and CSS custom properties.
You can customize Blogkit's appearance in two ways:
Visit the StyleKit documentation to explore all available design tokens and customization options.
StyleKit provides Blogkit with a consistent design language through:
By leveraging StyleKit, Blogkit ensures visual consistency across all components while giving you full control over customization through SCSS variables and CSS custom properties.
You can customize Blogkit's appearance in two ways:
Visit the StyleKit documentation to explore all available design tokens and customization options.
Blogkit supports all modern browsers with the following minimum versions:
Contributions are welcome! Please fork the repository and submit pull requests. For bugs or feature requests, open an issue on the repository.
View source code, report issues, and contributeAuthor: Santhosh Siva
GitHub: https://github.com/san-siva
The main container component that wraps all your blog content.
1<Blog>
2 {/* Your blog content */}
3</Blog>JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight way to embed machine-readable metadata directly inside your HTML. Search engines like Google read this metadata to understand the content of a page beyond what they can infer from the visible text alone — enabling rich results such as article cards, author attribution, publish dates, and breadcrumbs in search listings.
Unlike <meta> tags, which only describe the page in general terms, JSON-LD lets you express precise, typed facts about your content using the shared vocabulary defined by Schema.org. For example, a BlogPosting type can carry the headline, author, publication date, and canonical URL all in one structured block — the same information that social platforms and search engines surface when previewing your link.
Pass a jsonLd prop to the Blog component to inject this metadata as a <script type="application/ld+json"> tag in the page head. Blogkit uses the schema-dts package to give you full TypeScript types for every Schema.org type, so mistakes are caught at compile time.
Tip: Use a specific Schema.org type like BlogPosting, Article, or TechArticle instead of the base Thing type for richer structured data.
import { Blog } from '@san-siva/blogkit';
import type { WithContext, BlogPosting } from 'schema-dts';
const jsonLd: WithContext<BlogPosting> = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Blog Post Title',
description: 'A short description of the post',
author: {
'@type': 'Person',
name: 'Author Name',
},
datePublished: '2025-01-01',
url: 'https://blogkit.santhoshsiva.dev/',
};
export default function MyBlogPost() {
return (
<Blog jsonLd={jsonLd}>
{/* Your blog content */}
</Blog>
);
}1<Blog>
2 {/* Your blog content */}
3</Blog>JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight way to embed machine-readable metadata directly inside your HTML. Search engines like Google read this metadata to understand the content of a page beyond what they can infer from the visible text alone — enabling rich results such as article cards, author attribution, publish dates, and breadcrumbs in search listings.
Unlike <meta> tags, which only describe the page in general terms, JSON-LD lets you express precise, typed facts about your content using the shared vocabulary defined by Schema.org. For example, a BlogPosting type can carry the headline, author, publication date, and canonical URL all in one structured block — the same information that social platforms and search engines surface when previewing your link.
Pass a jsonLd prop to the Blog component to inject this metadata as a <script type="application/ld+json"> tag in the page head. Blogkit uses the schema-dts package to give you full TypeScript types for every Schema.org type, so mistakes are caught at compile time.
Tip: Use a specific Schema.org type like BlogPosting, Article, or TechArticle instead of the base Thing type for richer structured data.
import { Blog } from '@san-siva/blogkit';
import type { WithContext, BlogPosting } from 'schema-dts';
const jsonLd: WithContext<BlogPosting> = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Blog Post Title',
description: 'A short description of the post',
author: {
'@type': 'Person',
name: 'Author Name',
},
datePublished: '2025-01-01',
url: 'https://blogkit.santhoshsiva.dev/',
};
export default function MyBlogPost() {
return (
<Blog jsonLd={jsonLd}>
{/* Your blog content */}
</Blog>
);
}1import { Blog } from '@san-siva/blogkit';
2import type { WithContext, BlogPosting } from 'schema-dts';
3
4const jsonLd: WithContext<BlogPosting> = {
5 '@context': 'https://schema.org',
6 '@type': 'BlogPosting',
7 headline: 'My Blog Post Title',
8 description: 'A short description of the post',
9 author: {
10 '@type': 'Person',
11 name: 'Author Name',
12 },
13 datePublished: '2025-01-01',
14 url: 'https://blogkit.santhoshsiva.dev/',
15};
16
17export default function MyBlogPost() {
18 return (
19 <Blog jsonLd={jsonLd}>
20 {/* Your blog content */}
21 </Blog>
22 );
23}Display a title and description at the top of your blog post.
1<BlogHeader
2 title={['My Blog Title']}
3 desc={['Posted on January 1, 2025']}
4/>1<BlogHeader
2 title={['My Blog Title']}
3 desc={['Posted on January 1, 2025']}
4/>Create sections within your blog post with optional titles.
1<BlogSection title="Section Title" hasMarginBottom>
2 <p>Your section content...</p>
3</BlogSection>1<BlogSection title="Section Title" hasMarginBottom>
2 <p>Your section content...</p>
3</BlogSection>Display syntax-highlighted code blocks with support for multiple programming languages.
1<CodeBlock
2 language="typescript"
3 code={`const greeting = "Hello, World!";`}
4 hasMarginDown={true}
5/>1<CodeBlock
2 language="typescript"
3 code={`const greeting = "Hello, World!";`}
4 hasMarginDown={true}
5/>Highlight important information with styled callout boxes.
Information: This is an informative message, often used to provide
context or additional details to users.
Warning: This is a warning message, typically used to alert users of
potential risks or issues.
Error: This is an error message, used to notify users of critical
problems or failures.
Success: This is a success message, indicating that an action or
operation was completed successfully.
1<Callout type="info">
2 <p>
3 <b>Information:</b>
4 This is an informative message, often used to provide
5 <br />
6 context or <b>additional details</b> to users.
7 </p>
8</Callout>"info",
"warning",
"error",
"success"
1<Callout type="info">
2 <p>
3 <b>Information:</b>
4 This is an informative message, often used to provide
5 <br />
6 context or <b>additional details</b> to users.
7 </p>
8</Callout>Render diagrams and visualizations using Mermaid syntax. Supports flowcharts, sequence diagrams, timelines, and more.
Diagram Loading...
1<Mermaid
2 id="my-diagram"
3 code={`flowchart LR
4 A[Start] --> B{Decision}
5 B -->|Yes| C[Process]
6 B -->|No| D[End]
7 C --> D`}
8 hasMarginDown={true}
9/>1<Mermaid
2 id="my-diagram"
3 code={`flowchart LR
4 A[Start] --> B{Decision}
5 B -->|Yes| C[Process]
6 B -->|No| D[End]
7 C --> D`}
8 hasMarginDown={true}
9/>Create animated links to blog posts with title, description, and hover effects.
Learn how to use Blogkit components in your Next.js application
Read More
1<BlogLink
2 title="My Blog Post"
3 desc="A short description of the blog post content"
4 href="/blog/my-blog-post"
5/>Learn how to use Blogkit components in your Next.js application
Read More
1<BlogLink
2 title="My Blog Post"
3 desc="A short description of the blog post content"
4 href="/blog/my-blog-post"
5/>Display tabular data with headers and rows. Columns automatically size to fit their content for optimal space usage.
1<Table
2 headers={['Column 1', 'Column 2', 'Column 3']}
3 rows={[
4 ['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
5 ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
6 ]}
7 hasMarginDown={true}
8 fontSize="14px"
9/>1<Table
2 headers={['Column 1', 'Column 2', 'Column 3']}
3 rows={[
4 ['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
5 ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
6 ]}
7 hasMarginDown={true}
8 fontSize="14px"
9/>1import { Blog } from '@san-siva/blogkit';
2import type { WithContext, BlogPosting } from 'schema-dts';
3
4const jsonLd: WithContext<BlogPosting> = {
5 '@context': 'https://schema.org',
6 '@type': 'BlogPosting',
7 headline: 'My Blog Post Title',
8 description: 'A short description of the post',
9 author: {
10 '@type': 'Person',
11 name: 'Author Name',
12 },
13 datePublished: '2025-01-01',
14 url: 'https://blogkit.santhoshsiva.dev/',
15};
16
17export default function MyBlogPost() {
18 return (
19 <Blog jsonLd={jsonLd}>
20 {/* Your blog content */}
21 </Blog>
22 );
23}1import { Blog } from '@san-siva/blogkit';
2import type { WithContext, BlogPosting } from 'schema-dts';
3
4const jsonLd: WithContext<BlogPosting> = {
5 '@context': 'https://schema.org',
6 '@type': 'BlogPosting',
7 headline: 'My Blog Post Title',
8 description: 'A short description of the post',
9 author: {
10 '@type': 'Person',
11 name: 'Author Name',
12 },
13 datePublished: '2025-01-01',
14 url: 'https://blogkit.santhoshsiva.dev/',
15};
16
17export default function MyBlogPost() {
18 return (
19 <Blog jsonLd={jsonLd}>
20 {/* Your blog content */}
21 </Blog>
22 );
23}The main container component that wraps all your blog content.
1<Blog>
2 {/* Your blog content */}
3</Blog>JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight way to embed machine-readable metadata directly inside your HTML. Search engines like Google read this metadata to understand the content of a page beyond what they can infer from the visible text alone — enabling rich results such as article cards, author attribution, publish dates, and breadcrumbs in search listings.
Unlike <meta> tags, which only describe the page in general terms, JSON-LD lets you express precise, typed facts about your content using the shared vocabulary defined by Schema.org. For example, a BlogPosting type can carry the headline, author, publication date, and canonical URL all in one structured block — the same information that social platforms and search engines surface when previewing your link.
Pass a jsonLd prop to the Blog component to inject this metadata as a <script type="application/ld+json"> tag in the page head. Blogkit uses the schema-dts package to give you full TypeScript types for every Schema.org type, so mistakes are caught at compile time.
Tip: Use a specific Schema.org type like BlogPosting, Article, or TechArticle instead of the base Thing type for richer structured data.
import { Blog } from '@san-siva/blogkit';
import type { WithContext, BlogPosting } from 'schema-dts';
const jsonLd: WithContext<BlogPosting> = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Blog Post Title',
description: 'A short description of the post',
author: {
'@type': 'Person',
name: 'Author Name',
},
datePublished: '2025-01-01',
url: 'https://blogkit.santhoshsiva.dev/',
};
export default function MyBlogPost() {
return (
<Blog jsonLd={jsonLd}>
{/* Your blog content */}
</Blog>
);
}1<Blog>
2 {/* Your blog content */}
3</Blog>JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight way to embed machine-readable metadata directly inside your HTML. Search engines like Google read this metadata to understand the content of a page beyond what they can infer from the visible text alone — enabling rich results such as article cards, author attribution, publish dates, and breadcrumbs in search listings.
Unlike <meta> tags, which only describe the page in general terms, JSON-LD lets you express precise, typed facts about your content using the shared vocabulary defined by Schema.org. For example, a BlogPosting type can carry the headline, author, publication date, and canonical URL all in one structured block — the same information that social platforms and search engines surface when previewing your link.
Pass a jsonLd prop to the Blog component to inject this metadata as a <script type="application/ld+json"> tag in the page head. Blogkit uses the schema-dts package to give you full TypeScript types for every Schema.org type, so mistakes are caught at compile time.
Tip: Use a specific Schema.org type like BlogPosting, Article, or TechArticle instead of the base Thing type for richer structured data.
import { Blog } from '@san-siva/blogkit';
import type { WithContext, BlogPosting } from 'schema-dts';
const jsonLd: WithContext<BlogPosting> = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Blog Post Title',
description: 'A short description of the post',
author: {
'@type': 'Person',
name: 'Author Name',
},
datePublished: '2025-01-01',
url: 'https://blogkit.santhoshsiva.dev/',
};
export default function MyBlogPost() {
return (
<Blog jsonLd={jsonLd}>
{/* Your blog content */}
</Blog>
);
}1import { Blog } from '@san-siva/blogkit';
2import type { WithContext, BlogPosting } from 'schema-dts';
3
4const jsonLd: WithContext<BlogPosting> = {
5 '@context': 'https://schema.org',
6 '@type': 'BlogPosting',
7 headline: 'My Blog Post Title',
8 description: 'A short description of the post',
9 author: {
10 '@type': 'Person',
11 name: 'Author Name',
12 },
13 datePublished: '2025-01-01',
14 url: 'https://blogkit.santhoshsiva.dev/',
15};
16
17export default function MyBlogPost() {
18 return (
19 <Blog jsonLd={jsonLd}>
20 {/* Your blog content */}
21 </Blog>
22 );
23}Display a title and description at the top of your blog post.
1<BlogHeader
2 title={['My Blog Title']}
3 desc={['Posted on January 1, 2025']}
4/>1<BlogHeader
2 title={['My Blog Title']}
3 desc={['Posted on January 1, 2025']}
4/>Create sections within your blog post with optional titles.
1<BlogSection title="Section Title" hasMarginBottom>
2 <p>Your section content...</p>
3</BlogSection>1<BlogSection title="Section Title" hasMarginBottom>
2 <p>Your section content...</p>
3</BlogSection>Display syntax-highlighted code blocks with support for multiple programming languages.
1<CodeBlock
2 language="typescript"
3 code={`const greeting = "Hello, World!";`}
4 hasMarginDown={true}
5/>1<CodeBlock
2 language="typescript"
3 code={`const greeting = "Hello, World!";`}
4 hasMarginDown={true}
5/>Highlight important information with styled callout boxes.
Information: This is an informative message, often used to provide
context or additional details to users.
Warning: This is a warning message, typically used to alert users of
potential risks or issues.
Error: This is an error message, used to notify users of critical
problems or failures.
Success: This is a success message, indicating that an action or
operation was completed successfully.
1<Callout type="info">
2 <p>
3 <b>Information:</b>
4 This is an informative message, often used to provide
5 <br />
6 context or <b>additional details</b> to users.
7 </p>
8</Callout>"info",
"warning",
"error",
"success"
1<Callout type="info">
2 <p>
3 <b>Information:</b>
4 This is an informative message, often used to provide
5 <br />
6 context or <b>additional details</b> to users.
7 </p>
8</Callout>Render diagrams and visualizations using Mermaid syntax. Supports flowcharts, sequence diagrams, timelines, and more.
Diagram Loading...
1<Mermaid
2 id="my-diagram"
3 code={`flowchart LR
4 A[Start] --> B{Decision}
5 B -->|Yes| C[Process]
6 B -->|No| D[End]
7 C --> D`}
8 hasMarginDown={true}
9/>1<Mermaid
2 id="my-diagram"
3 code={`flowchart LR
4 A[Start] --> B{Decision}
5 B -->|Yes| C[Process]
6 B -->|No| D[End]
7 C --> D`}
8 hasMarginDown={true}
9/>Create animated links to blog posts with title, description, and hover effects.
Learn how to use Blogkit components in your Next.js application
Read More
1<BlogLink
2 title="My Blog Post"
3 desc="A short description of the blog post content"
4 href="/blog/my-blog-post"
5/>Learn how to use Blogkit components in your Next.js application
Read More
1<BlogLink
2 title="My Blog Post"
3 desc="A short description of the blog post content"
4 href="/blog/my-blog-post"
5/>Display tabular data with headers and rows. Columns automatically size to fit their content for optimal space usage.
1<Table
2 headers={['Column 1', 'Column 2', 'Column 3']}
3 rows={[
4 ['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
5 ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
6 ]}
7 hasMarginDown={true}
8 fontSize="14px"
9/>1<Table
2 headers={['Column 1', 'Column 2', 'Column 3']}
3 rows={[
4 ['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
5 ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
6 ]}
7 hasMarginDown={true}
8 fontSize="14px"
9/>1import { Blog } from '@san-siva/blogkit';
2import type { WithContext, BlogPosting } from 'schema-dts';
3
4const jsonLd: WithContext<BlogPosting> = {
5 '@context': 'https://schema.org',
6 '@type': 'BlogPosting',
7 headline: 'My Blog Post Title',
8 description: 'A short description of the post',
9 author: {
10 '@type': 'Person',
11 name: 'Author Name',
12 },
13 datePublished: '2025-01-01',
14 url: 'https://blogkit.santhoshsiva.dev/',
15};
16
17export default function MyBlogPost() {
18 return (
19 <Blog jsonLd={jsonLd}>
20 {/* Your blog content */}
21 </Blog>
22 );
23}1import { Blog } from '@san-siva/blogkit';
2import type { WithContext, BlogPosting } from 'schema-dts';
3
4const jsonLd: WithContext<BlogPosting> = {
5 '@context': 'https://schema.org',
6 '@type': 'BlogPosting',
7 headline: 'My Blog Post Title',
8 description: 'A short description of the post',
9 author: {
10 '@type': 'Person',
11 name: 'Author Name',
12 },
13 datePublished: '2025-01-01',
14 url: 'https://blogkit.santhoshsiva.dev/',
15};
16
17export default function MyBlogPost() {
18 return (
19 <Blog jsonLd={jsonLd}>
20 {/* Your blog content */}
21 </Blog>
22 );
23}1import { Blog } from '@san-siva/blogkit';
2import type { WithContext, BlogPosting } from 'schema-dts';
3
4const jsonLd: WithContext<BlogPosting> = {
5 '@context': 'https://schema.org',
6 '@type': 'BlogPosting',
7 headline: 'My Blog Post Title',
8 description: 'A short description of the post',
9 author: {
10 '@type': 'Person',
11 name: 'Author Name',
12 },
13 datePublished: '2025-01-01',
14 url: 'https://blogkit.santhoshsiva.dev/',
15};
16
17export default function MyBlogPost() {
18 return (
19 <Blog jsonLd={jsonLd}>
20 {/* Your blog content */}
21 </Blog>
22 );
23}1import { Blog } from '@san-siva/blogkit';
2import type { WithContext, BlogPosting } from 'schema-dts';
3
4const jsonLd: WithContext<BlogPosting> = {
5 '@context': 'https://schema.org',
6 '@type': 'BlogPosting',
7 headline: 'My Blog Post Title',
8 description: 'A short description of the post',
9 author: {
10 '@type': 'Person',
11 name: 'Author Name',
12 },
13 datePublished: '2025-01-01',
14 url: 'https://blogkit.santhoshsiva.dev/',
15};
16
17export default function MyBlogPost() {
18 return (
19 <Blog jsonLd={jsonLd}>
20 {/* Your blog content */}
21 </Blog>
22 );
23}1import { Blog } from '@san-siva/blogkit';
2import type { WithContext, BlogPosting } from 'schema-dts';
3
4const jsonLd: WithContext<BlogPosting> = {
5 '@context': 'https://schema.org',
6 '@type': 'BlogPosting',
7 headline: 'My Blog Post Title',
8 description: 'A short description of the post',
9 author: {
10 '@type': 'Person',
11 name: 'Author Name',
12 },
13 datePublished: '2025-01-01',
14 url: 'https://blogkit.santhoshsiva.dev/',
15};
16
17export default function MyBlogPost() {
18 return (
19 <Blog jsonLd={jsonLd}>
20 {/* Your blog content */}
21 </Blog>
22 );
23}1import { Blog } from '@san-siva/blogkit';
2import type { WithContext, BlogPosting } from 'schema-dts';
3
4const jsonLd: WithContext<BlogPosting> = {
5 '@context': 'https://schema.org',
6 '@type': 'BlogPosting',
7 headline: 'My Blog Post Title',
8 description: 'A short description of the post',
9 author: {
10 '@type': 'Person',
11 name: 'Author Name',
12 },
13 datePublished: '2025-01-01',
14 url: 'https://blogkit.santhoshsiva.dev/',
15};
16
17export default function MyBlogPost() {
18 return (
19 <Blog jsonLd={jsonLd}>
20 {/* Your blog content */}
21 </Blog>
22 );
23}