---
name: "@contentbit"
slug: "contentbit"
description: "React components that render Content Blocks: plain Markdown with schema-validated directive blocks. Built for content written by humans, CMSes, and LLMs."
category: "AI/chat UI"
tags: ["ai", "blocks", "cms", "navigation"]
framework: "react"
license: "MIT"
author: "agonist"
website: "https://contentbit.dev"
github: "https://github.com/agonist/contentbit"
registry: "https://contentbit.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 11
component_count: 20
generated_at: "2026-07-28T08:00:50.948Z"
---

# @contentbit

React components that render Content Blocks: plain Markdown with schema-validated directive blocks. Built for content written by humans, CMSes, and LLMs.

## Links

- Website: https://contentbit.dev
- GitHub: https://github.com/agonist/contentbit
- Registry JSON: https://contentbit.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/contentbit
- This file: https://sh4dcn.vercel.app/md/contentbit.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://contentbit.dev/r/registry.json
pnpm dlx shadcn@latest add https://contentbit.dev/r/registry.json
bunx shadcn@latest add https://contentbit.dev/r/registry.json
# clone the source repo
git clone https://github.com/agonist/contentbit.git
# fetch the raw registry index
curl -s https://contentbit.dev/r/registry.json
```

## Components (20)

| name | type | description | install |
| --- | --- | --- | --- |
| content-renderer | registry:component | Renders a validated Content Blocks document with the styled component pack. | `npx shadcn@latest add https://contentbit.dev/r/content-renderer.json` |
| callout | registry:component | Note, tip, warning, important, and TLDR callouts. | `npx shadcn@latest add https://contentbit.dev/r/callout.json` |
| steps | registry:component | Numbered process steps. | `npx shadcn@latest add https://contentbit.dev/r/steps.json` |
| key-metrics | registry:component | Stat cards for scannable numbers. | `npx shadcn@latest add https://contentbit.dev/r/key-metrics.json` |
| quick-ref | registry:component | Compact key/value reference card. | `npx shadcn@latest add https://contentbit.dev/r/quick-ref.json` |
| comparison | registry:component | Two-option comparison table. | `npx shadcn@latest add https://contentbit.dev/r/comparison.json` |
| pros-cons | registry:component | Paired advantages and disadvantages. | `npx shadcn@latest add https://contentbit.dev/r/pros-cons.json` |
| tabs | registry:component | Tabbed switcher for alternative methods. | `npx shadcn@latest add https://contentbit.dev/r/tabs.json` |
| faq | registry:component | Accordion of question/answer pairs. | `npx shadcn@latest add https://contentbit.dev/r/faq.json` |
| generic-pack | registry:block | All Content Blocks components plus the renderer. | `npx shadcn@latest add https://contentbit.dev/r/generic-pack.json` |
| astro-content-renderer | registry:component | Renders a validated Content Blocks document with the styled component pack. | `npx shadcn@latest add https://contentbit.dev/r/astro-content-renderer.json` |
| astro-callout | registry:component | Note, tip, warning, important, and TLDR callouts. | `npx shadcn@latest add https://contentbit.dev/r/astro-callout.json` |
| astro-steps | registry:component | Numbered process steps. | `npx shadcn@latest add https://contentbit.dev/r/astro-steps.json` |
| astro-key-metrics | registry:component | Stat cards for scannable numbers. | `npx shadcn@latest add https://contentbit.dev/r/astro-key-metrics.json` |
| astro-quick-ref | registry:component | Compact key/value reference card. | `npx shadcn@latest add https://contentbit.dev/r/astro-quick-ref.json` |
| astro-comparison | registry:component | Two-option comparison table. | `npx shadcn@latest add https://contentbit.dev/r/astro-comparison.json` |
| astro-pros-cons | registry:component | Paired advantages and disadvantages. | `npx shadcn@latest add https://contentbit.dev/r/astro-pros-cons.json` |
| astro-tabs | registry:component | Tabbed switcher for alternative methods. | `npx shadcn@latest add https://contentbit.dev/r/astro-tabs.json` |
| astro-faq | registry:component | Accordion of question/answer pairs. | `npx shadcn@latest add https://contentbit.dev/r/astro-faq.json` |
| astro-pack | registry:block | The full styled Astro pack: all 8 generic blocks plus the content renderer. | `npx shadcn@latest add https://contentbit.dev/r/astro-pack.json` |

## For AI agents

```text
You are adding components from @contentbit to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/contentbit.md) for the component list.
2. Fetch the machine-readable index: https://contentbit.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: contentbit).
```