Installation

Prerequisites

• You must have shadcn/ui installed with CSS variables enabled.
• Configure a Sonner <Toaster /> component for toast notifications.
• Ensure you have TailwindCSS v4 set up and configured correctly.

Install the package

pnpm add better-blog
# or
npm install better-blog
# or
yarn add better-blog

Tailwind CSS content configuration

Better Blog ships utility classes. Configure Tailwind to scan the package.

• TailwindCSS v4 (in your globals.css):

/* globals.css */
@import "better-blog/css";

• For TailwindCSS V3 (Deprecated), add the following content to your Tailwind config:

// tailwind.config.ts
export default {
  content: [
    // your app paths...
    "./node_modules/better-blog/dist/**/*.{js,ts,jsx,tsx,mdx}",
  ],
};

What you can do next

• Add a route-aware blog router and default pages
• Add a server adapter for SSR/SSG
• Use strongly typed hooks built on TanStack Query
• Customize the UI via override points for UI and loading components