vBlocks

Composed section blocks: hero, CTA, FAQ, footer, gallery, portfolio, post, team, testimonial, blog, business, features. Schema-validated content, vUi primitives, DSL-styled. Drop into a page — no manual wiring.

Install

npm install @booga/vblocks

Usage

import { HeroSplit, HeroSplitDefaultContent } from "@booga/vblocks/hero";

<HeroSplit content={HeroSplitDefaultContent} />

Or with typed content:

import { HeroSplit, type HeroSplitContent } from "@booga/vblocks/hero";

const content: HeroSplitContent = {
  heading: "Ship faster.",
  description: "Composable blocks with schema-validated content.",
  primaryCta: { label: "Get started", href: "/start" },
  image: { src: "/hero.png", alt: "Product screenshot" },
};

<HeroSplit content={content} />

Blocks

| Category | Variants | |---|---| | hero | HeroSplit, HeroCentered | | cta | CtaSplit, CtaCentered | | faq | FaqSplit, FaqGrid | | footer | FooterSplit, FooterGrid | | gallery | GallerySplit, GalleryGrid | | portfolio | PortfolioSplit, PortfolioGrid | | post | PostSplit, PostCentered | | team | TeamSplit, TeamGrid | | testimonial | TestimonialSplit, TestimonialGrid | | blog | BlogSplit, BlogGrid | | business | BusinessSplit, BusinessGrid | | features | FeaturesSplit, FeaturesGrid |

Each block exports:

• <Variant> — component
• <Variant>ContentSchema — Zod schema
• <Variant>Content — TypeScript type
• <Variant>DefaultContent — sample content for previews

Theme overrides

Pass a ThemeOverride to remap CSS custom properties per block:

<HeroSplit content={content} theme={{ "color-accent": "#6366f1" }} />

Keys are mapped to --v-<key> on the block's root element.

Registry

A flat registry for vRegistry consumption:

import { registry } from "@booga/vblocks";
// registry["hero/split"] → { schema, default, component }

Code of conduct

Contributor Covenant 2.1

License

MIT © 2026 bvasilenko