HomeBookmarks
ContentbitContentbit
Contentbit

Contentbit

COby contentbit
1component32.9Kviews19bookmarks

Installs all 19 components. Without our CLI, run instead.

Auto-indexed

Contentbit contents

  • Pros & Cons Block

    Pros & Cons Block

  • That's all 1 components

    About Contentbit

    Contentbit publishes a shadcn registry at contentbit.dev, with 19 components installable through the shadcn CLI.

    Components
    19
    GitHub stars
    17
    Last commit
    Sep 29, 2026
    Repository
    agonist/contentbit

    Also in the Contentbit registry

    Copy a prompt for your agent, copy the install command, or open the docs that ship it.

    • Callout Block (Astro)

      astro-callout

      Note, tip, warning, important, and TLDR callouts.

      @contentbit/core, @contentbit/blocks, @contentbit/astro1 file
    • Comparison Block (Astro)

      astro-comparison

      Two-option comparison table.

      @contentbit/core, @contentbit/blocks, @contentbit/astro1 file
    • Content Renderer (Astro)

      astro-content-renderer

      Renders a validated Content Blocks document with the styled component pack.

      @contentbit/core, @contentbit/blocks, @contentbit/astro1 file
    • FAQ Block (Astro)

      astro-faq

      Accordion of question/answer pairs.

      @contentbit/core, @contentbit/blocks, @contentbit/astro1 file
    • Key Metrics Block (Astro)

      astro-key-metrics

      Stat cards for scannable numbers.

      @contentbit/core, @contentbit/blocks, @contentbit/astro1 file
    • Astro Generic Pack

      astro-pack

      The full styled Astro pack: all 8 generic blocks plus the content renderer.

    • Quick Reference Block (Astro)

      astro-quick-ref

      Compact key/value reference card.

      @contentbit/core, @contentbit/blocks, @contentbit/astro1 file
    • Steps Block (Astro)

      astro-steps

      Numbered process steps.

      @contentbit/core, @contentbit/blocks, @contentbit/astro1 file
    • Tabs Block (Astro)

      astro-tabs

      Tabbed switcher for alternative methods.

      @contentbit/core, @contentbit/blocks, @contentbit/astro1 file
    • Callout Block

      callout

      Note, tip, warning, important, and TLDR callouts.

      @contentbit/core, @contentbit/blocks, @contentbit/react, lucide-react1 file
    • Comparison Block

      comparison

      Two-option comparison table.

      @contentbit/core, @contentbit/blocks, @contentbit/react1 file
    • Content Renderer

      content-renderer

      Renders a validated Content Blocks document with the styled component pack.

      @contentbit/core, @contentbit/blocks, @contentbit/react1 file
    • FAQ Block

      faq

      Accordion of question/answer pairs.

      @contentbit/core, @contentbit/blocks, @contentbit/react1 file
    • Generic Pack

      generic-pack

      All Content Blocks components plus the renderer.

    • Key Metrics Block

      key-metrics

      Stat cards for scannable numbers.

      @contentbit/core, @contentbit/blocks, @contentbit/react1 file
    • Quick Reference Block

      quick-ref

      Compact key/value reference card.

      @contentbit/core, @contentbit/blocks, @contentbit/react1 file
    • Steps Block

      steps

      Numbered process steps.

      @contentbit/core, @contentbit/blocks, @contentbit/react1 file

    From the Contentbit readme

    =22.18" />

    Programmatic SEO · Docs · Playground · Blocks

    contentbit

    Open-source programmatic SEO toolkit for coding agents.

    Define reusable page families, brief writers and agents before they draft, and validate content structure and internal links before publishing. Content stays portable Markdown and renders in React, Astro, or plain Markdown.

    • Model page families with required frontmatter, sections, blocks, and links.
    • Brief every page before its Markdown file exists.
    • Give agents live rules from the same contracts and block registry the CLI checks.
    • Enforce quality with ranked Doctor findings and strict CI exit codes.
    • Publish anywhere through React, Astro, or plain Markdown adapters.

    Quick Start

    npx contentbit@latest init --seo
    

    init detects your framework and package manager, installs the right packages, creates the project and SEO configs, wires starter content and a rendered /example page when possible, adds quality scripts, generates the live LLM guide, and installs agent instructions. In Astro projects the example is self-contained and leaves existing content collections untouched.

    Plan a page, give the brief to a writer or agent, and run the publishing gate:

    contentbit brief        # agent-ready writing contract
    contentbit doctor --strict-seo       # content, structure, and link gate
    pnpm run studio                      # preview briefs, pages, links, and findings
    

    Or ask the installed coding-agent integration to run the loop:

    write the planned  page from its contentbit brief
    

    Only need structured Markdown and rendering? Run contentbit init without --seo.

    For a production-shaped Astro implementation, use astro-speedrun-seo. It is the separate reference template for multilingual programmatic SEO, while the small starters in this repository remain compatibility fixtures for package CI.

    Prefer the pieces? Install the core packages and a renderer:

    pnpm add @contentbit/core @contentbit/blocks @contentbit/react
    

    Why Contentbit

    Programmatic content drifts when the plan lives in a spreadsheet, the writing rules live in a prompt, and the quality checks happen during review. Contentbit puts those rules in the codebase so humans, agents, Studio, and CI use the same contract.

    import { defineSeoConfig } from '@contentbit/core'
    
    export default defineSeoConfig({
      pageTypes: {
        alternative: {
          requiredSections: ['Overview', 'Comparison', 'FAQ'],
          requiredBlocks: ['comparison'],
          recommendedBlocks: ['faq'],
          minOutgoingLinks: 2,
        },
      },
      pages: {
        'semrush-alternatives': {
          type: 'alternative',
          slug: 'semrush-alternatives',
          intent: 'commercial comparison',
          keywords: { primary: 'semrush alternatives' },
          linksTo: ['seo-tools-comparison'],
        },
      },
    })
    

    The page can be briefed before it exists. Once written, Doctor checks the live file against the plan and reports exactly what needs repair.

    Structured Markdown underneath

    Markdown remains the authoring format. Typed directive blocks add structure where ordinary prose is not enough:

    :::comparison{left="Basic" right="Pro"}
    - Price | Free | $12/mo
    - Support | Community | Priority
    :::
    

    Every block has a schema. Invalid content fails with diagnostics a human or model can fix:

    article.md:12:1 error CB_PROPS_INVALID
    :::callout props invalid: type must be one of note|tip|warning|important|tldr.
    hint: Did you mean type="warning"?
    

    The same registry writes the authoring rules the agent sees, so custom blocks, validation, docs, and prompts stay together.

    Agent Loop

    After init --seo, your agent has a short, repeatable writing loop:

    1. Read contentbit.config.ts for the content glob, registry, links, and SEO setup.
    2. Run contentbit brief for the target page contract.
    3. Run contentbit instructions --audience llm for the live block guide.
    4. Write plain Markdown, using blocks only when the guide says they fit.
    5. Run contentbit doctor --strict-seo and repair findings until it exits 0.

    Refresh or add the integration at any time:

    contentbit agents
    

    The installed agent files hold no schemas. They read from the CLI at runtime, so custom blocks are picked up automatically. See the LLM agents guide.

    What You Get

    File or commandWhy it matters
    content/example.mdStarter content with built-in blocks and one custom block
    blocks/registry.tsShared block schemas for validation, renderers, docs, and agents
    contentbit.config.tsShared content glob, registry, links, and SEO command defaults
    contentbit.seo.config.tsPage-family contracts and plans for existing or future pages
    contentbit-guide.mdGenerated authoring rules for LLMs
    AGENTS.mdCompact instructions for Codex, Cursor, Copilot, and other agents
    .claude/skills/*Claude Code author/audit skills when .claude is present
    content:checkValidates content with the right glob and registry
    content:doctorRanks validation, link, thin-section, and image-alt issues
    contentbit briefPrints an agent-ready SEO brief for an existing or planned page
    contentbit snapshotPrints a portable, JSON-safe project read model for remote adapters
    studioRead-only browser for previews, stats, links, keywords, and health
    /exampleRendered route when the detected framework supports it

    Render Anywhere

    contentbit treats structured Markdown as the portable content format. Use your own prose pipeline for Markdown between blocks, then choose the surface:

    • @contentbit/react for React components with headless accessible defaults.
    • @contentbit/astro for .astro components with per-block overrides.
    • renderToMarkdown() for plain Markdown fallbacks.

    The styled React and Astro packs ship through a shadcn registry:

    pnpm dlx shadcn@latest add @contentbit/generic-pack
    

    Registry URL: https://contentbit.dev/r/{name}.json.

    Content Graph

    Use frontmatter to declare relationships and let contentbit keep links honest:

    ---
    slug: beginner-pizza-dough
    linksTo:
      - cold-fermentation-pizza
    aliases:
      - intro-pizza-dough
    ---
    

    contentbit links "content/**/*.md" builds .contentbit/link-index.json with resolved links and backlinks. contentbit validate runs link checks when files declare slugs, and contentbit links --fix can rewrite stale alias references. Read the internal linking guide.

    Programmatic SEO Contracts

    Create contentbit.seo.config.ts with reusable page-type contracts and planned pages, or let contentbit init --seo scaffold a starter. When that file exists, contentbit doctor folds SEO contract findings into the normal repair plan, Studio shows a read-only Brief view for each planned or existing page, and contentbit brief prints the structure, links, required blocks, and acceptance checks an agent should satisfy before publishing. See the programmatic SEO workflow.

    Without an agent, the same loop is ordinary CLI-assisted writing: print the brief, write the Markdown, run Doctor, inspect the page in Studio, and publish.

    Packages

    PackagePurpose
    @contentbit/coreParser, AST, diagnostics, registry, validation, Markdown output
    @contentbit/blocksGeneric blocks: callout, steps, comparison, tabs, faq, and more
    @contentbit/reactReact renderer
    @contentbit/astroAstro renderer
    @contentbit/studioLocal read-only content studio
    contentbitCLI: init, validate, doctor, studio, stats, links, render

    Explore

    • Docs with live-rendered examples
    • Compatibility and stability for the v1 public interfaces and upgrade policy
    • All blocks from the generic pack
    • Playground with live validation
    • Blog written as validated contentbit documents
    • Changelog for release notes
    • llms.txt and the authoring guide for LLM context

    Development

    pnpm install
    pnpm -r build
    pnpm -r test
    pnpm lint && pnpm fmt:check
    

    See CONTRIBUTING.md for the repo layout and guidelines.

    License

    MIT

    Read the rest on GitHub →

    What Contentbit builds on

    The packages and primitives its components pull in, counted across the registry.

    accordion1

    Hooks and utilities

    • tabs

    Registries like Contentbit

    UI Layouts

    UI Layouts

    by UI Layouts

    127

    components

    Chánh Đại

    Chánh Đại

    by Chánh Đại

    18

    components

    Tailark

    Tailark

    by Méschac Irung

    56

    components

    8bitcn

    8bitcn

    by OrcDev

    103

    components

    Browse every shadcn registry we track →

    Eldora UI

    Eldora UI

    by Mudunuri bhaskara karthikeya varma

    13

    components

    Launch UI

    Launch UI

    by Mikolaj Dobrucki

    6

    components

    1. Components
    2. /
    3. contentbit
    4. /
    5. Contentbit

    Related libraries

    Ruixen UI

    Ruixen UI

    by Ruixen UI

    347

    components

    HextaUI

    HextaUI

    by Preet Suthar

    119

    components

    ReUI

    ReUI

    by Sean Hello

    263

    components

    ShadcnSpace

    ShadcnSpace

    by ShadcnSpace

    189

    components

    PrebuiltUI

    PrebuiltUI

    by prebuiltui

    23

    components

    8bitcn

    8bitcn

    by OrcDev

    103

    components

    About Contentbit

    Contentbit is a component library on 21st.dev by contentbit with 1 public React component. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 1 Contentbit components

    • Pros & Cons Block

    Browse all component libraries →