@paidtier/blocks

The shared funnel block renderer for PaidTier. One source of truth for both:

• the dashboard builder's live preview (paidtier-app)
• the compiled live funnel site (paidtier-compiler on Cloudflare)

Internal structure

The public package API stays intentionally small. Rendering code is grouped by the job each block performs:

• blocks/shared.tsx: safe links, rich text, inline editing and action primitives
• blocks/hero.tsx: hero, features, stats and CTA compositions
• blocks/commerce.tsx: pricing and sticky purchase controls
• blocks/media.tsx: images, video, embeds, headings and structural blocks
• blocks/engagement.tsx: reviews, FAQ, tabs, countdown, lead forms and footer
• blocks/member.tsx: account, access, sign-in and checkout blocks
• blocks/registry.tsx: the stable block type registry and public renderers

Keep saved block contracts and data-pt-* hooks stable. Builder preview and compiled output both flow through the same registry.

Usage

import { BlockRenderer, type BlockCtx } from '@paidtier/blocks';

<BlockRenderer blocks={doc.blocks} ctx={ctx} />;

Tailwind (v4)

The blocks use plain Tailwind utility classes. Because they live in node_modules, each consumer must tell Tailwind to scan this package (Tailwind v4 skips node_modules by default). Add to your global CSS, right after @import "tailwindcss";:

@source "../node_modules/@paidtier/blocks/dist";

(Adjust the relative path to reach your project's node_modules.) The blocks rely on Tailwind's default neutral/white palette plus inline accent styles, so they render the same under any host theme.

Exports

• BlockRenderer - renders a { version, blocks } document
• accentStrong, accentTint - accent shade helpers
• Types: Block, FunnelDoc, Tier, Theme, BlockCtx