Next-Blog-AI
Home/Documentation/Styling & SEO/Styling
Back to Documentation

Customizing Styles

Learn how to customize the appearance of your Next-Blog-AI content

Overview

Next-Blog-AI provides a comprehensive styling system that allows you to customize the appearance of your blog content and listings. The package includes sensible default styles, but you can override them with your own custom CSS to match your application's design system.

When using the json format for content, you'll need to implement your own styling since you're doing the rendering yourself. This guide focuses on styling HTML content returned by the API.

AI-Assisted Styling

The fastest way to style your Next-Blog-AI content is to use an AI coding assistant like Cursor, GitHub Copilot, or ChatGPT. Since your blog pages are standard Next.js components, AI tools can quickly generate custom styles that match your existing design system.

Example Prompt

Copy and paste this into your AI assistant of choice, adjusting the details to match your project:

Style my blog pages at app/blog/page.tsx and app/blog/[id]/page.tsx 
to match the rest of my website's design system. 

The blog content is rendered via dangerouslySetInnerHTML from the 
Next-Blog-AI API. Use Tailwind classes on the wrapper elements and 
add a global CSS block targeting .next-blog-ai-content for the 
inner HTML (headings, paragraphs, links, code blocks, images). 

Make sure it supports dark mode and looks good on mobile.

Because the blog pages generated by our CLI are plain React components, your AI assistant has full context of your project and can match colors, fonts, spacing, and layout patterns automatically. This is often faster than writing CSS by hand.

CSS Classes Structure

To effectively customize the styling, it's important to understand the CSS class structure used by Next-Blog-AI:

Blog Content Classes

  • .next-blog-ai-contentMain container for blog post content
  • .next-blog-ai-commentsContainer for comments section
  • .next-blog-ai-commentIndividual comment container
  • .next-blog-ai-comment-formComment submission form

Blog List Classes

  • .next-blog-ai-listContainer for blog list
  • .next-blog-ai-list.grid-viewApplied when using grid display format
  • .next-blog-ai-list.list-viewApplied when using list display format
  • .next-blog-ai-post-cardIndividual post card in the list
  • .next-blog-ai-paginationPagination controls container

Setting Custom Styles

There are two ways to set custom styles for your Next-Blog-AI content:

1. At Initialization

You can provide custom styles when creating the Next-Blog-AI client:

import { createNextBlogAIForNextJs } from 'next-blog-ai';

// Next.js only: use createNextBlogAIForNextJs for all integrations
// Example:
// const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
  apiKey: process.env.NEXT_BLOG_AI_API_KEY!,
  // Add your custom styles
  styles: {
    blogContent: `
      .next-blog-ai-content {
        max-width: 800px;
        margin: 0 auto;
        font-family: 'Georgia', serif;
      }
      
      .next-blog-ai-content h1 {
        color: #0070f3;
      }
    `,
    blogList: `
      .next-blog-ai-list {
        gap: 2rem;
      }
      
      .next-blog-ai-post-card {
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
    `
  }
});

2. Using the setStyles Method

You can update the styles after creating the client using the setStyles method:

// Update styles after client creation
const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogContent: `
    .next-blog-ai-content {
      /* Your custom styles */
    }
  `,
  blogList: `
    .next-blog-ai-list {
      /* Your custom styles */
    }
  `
});

Extending Default Styles

Rather than replacing the default styles completely, you can extend them by importing the default style constants and adding your customizations:

import {
  
  DEFAULT_BLOG_STYLES,
  DEFAULT_BLOG_LIST_STYLES
} from 'next-blog-ai';

// Extend the default styles
const customBlogContentStyles = `
  ${DEFAULT_BLOG_STYLES}
  
  /* Add your custom styles */
  .next-blog-ai-content h1 {
    color: #0070f3;
  }
`;

const customBlogListStyles = `
  ${DEFAULT_BLOG_LIST_STYLES}
  
  /* Add your custom styles */
  .next-blog-ai-post-card {
    border-radius: 8px;
  }
`;

// Use the extended styles
// Next.js only: use createNextBlogAIForNextJs for all integrations
// Example:
// const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
  apiKey: process.env.NEXT_BLOG_AI_API_KEY!,
  styles: {
    blogContent: customBlogContentStyles,
    blogList: customBlogListStyles
  }
});

Styling Blog Content

The .next-blog-ai-content container includes the main blog post content with standard HTML elements like headings, paragraphs, lists, and images. You can style these elements using standard CSS selectors:

const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogContent: `
    /* Typography */
    .next-blog-ai-content {
      font-family: 'Inter', sans-serif;
      line-height: 1.7;
      color: #333;
    }
    
    /* Headings */
    .next-blog-ai-content h1 {
      font-size: 2.5rem;
      color: #0070f3;
      margin-bottom: 1.5rem;
    }
    
    .next-blog-ai-content h2 {
      font-size: 2rem;
      color: #0070f3;
      margin-top: 2.5rem;
      margin-bottom: 1rem;
    }
    
    /* Links */
    .next-blog-ai-content a {
      color: #0070f3;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s;
    }
    
    .next-blog-ai-content a:hover {
      border-color: #0070f3;
    }
    
    /* Images */
    .next-blog-ai-content img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 2rem 0;
    }
    
    /* Code blocks */
    .next-blog-ai-content pre {
      background-color: #f7f7f7;
      padding: 1rem;
      border-radius: 4px;
      overflow-x: auto;
    }
    
    .next-blog-ai-content code {
      font-family: 'Fira Code', monospace;
      font-size: 0.9rem;
    }
  `
});

Styling Blog Lists

The .next-blog-ai-list container includes blog post cards arranged in either a grid or list layout. You can style the container and cards using these selectors:

const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogList: `
    /* Grid layout */
    .next-blog-ai-list.grid-view {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 2rem;
    }
    
    /* List layout */
    .next-blog-ai-list.list-view {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    
    /* Post cards */
    .next-blog-ai-post-card {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .next-blog-ai-post-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }
    
    /* Post card elements */
    .next-blog-ai-post-card-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    .next-blog-ai-post-card-content {
      padding: 1.5rem;
    }
    
    .next-blog-ai-post-card-title {
      font-size: 1.5rem;
      color: #333;
      margin-bottom: 0.5rem;
    }
    
    .next-blog-ai-post-card-date {
      font-size: 0.875rem;
      color: #666;
      margin-bottom: 1rem;
    }
    
    .next-blog-ai-post-card-excerpt {
      color: #444;
      margin-bottom: 1.5rem;
    }
    
    .next-blog-ai-post-card-link {
      display: inline-block;
      color: #0070f3;
      font-weight: 500;
      text-decoration: none;
    }
    
    /* Pagination */
    .next-blog-ai-pagination {
      display: flex;
      justify-content: center;
      margin-top: 3rem;
      gap: 0.5rem;
    }
    
    .next-blog-ai-pagination-button {
      padding: 0.5rem 1rem;
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .next-blog-ai-pagination-button.active {
      background-color: #0070f3;
      color: white;
      border-color: #0070f3;
    }
  `
});

Styling for Dark Mode

You can add styles that detect and respond to dark mode using CSS media queries:

const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogContent: `
    .next-blog-ai-content {
      color: #333;
    }
    
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
      .next-blog-ai-content {
        color: #e1e1e1;
      }
      
      .next-blog-ai-content h1, 
      .next-blog-ai-content h2, 
      .next-blog-ai-content h3 {
        color: #61dafb;
      }
      
      .next-blog-ai-content a {
        color: #61dafb;
      }
      
      .next-blog-ai-content pre {
        background-color: #2d2d2d;
      }
      
      .next-blog-ai-content code {
        color: #e1e1e1;
      }
    }
  `
});

Responsive Styling

Add responsive styles to make your blog look great on all screen sizes:

const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogList: `
    /* Default (mobile) */
    .next-blog-ai-list.grid-view {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    
    /* Tablet */
    @media (min-width: 640px) {
      .next-blog-ai-list.grid-view {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    /* Desktop */
    @media (min-width: 1024px) {
      .next-blog-ai-list.grid-view {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  `
});
PreviousAPI KeysNextSEO Optimization