Kit

What’s in the ZIP

Buyers get the same blocks/ source mirrored on the live hub. Use this manifest for procurement or engineering review; filenames match each preview toolbar path.

Open blocks hub Get the kit

Inside the ZIP

Manifest matches the repo source of truth

Buyers receive the same React files under blocks/ (plus README, HANDOFF, LICENSE). This table is documentation only—it is not duplicated as extra files inside the archive.

After npm run kit:zip, blocks are copied into kit/blocks/ inside dist/hexagon-ui-kit.zip.

Need isolated screenshots for a deck? Use the blocks hub — each preview toolbar lists the matching shipped filename.

File in ZIP

Export

Role

blocks/nav-marketing.tsxClassic split bar with hover dropdowns and a primary CTA.
NavMarketing
Classic split bar with hover dropdowns and a primary CTA.
blocks/nav-centered.tsxCentered wordmark flanked by split nav rails — editorial / brand-led.
NavCentered
Centered wordmark flanked by split nav rails — editorial / brand-led.
blocks/nav-pill.tsxTrue floating capsule with hero backdrop — overlays product art.
NavPill
True floating capsule with hero backdrop — overlays product art.
blocks/nav-search.tsxDocs-style bar with a prominent ⌘K search input and dense actions.
NavSearch
Docs-style bar with a prominent ⌘K search input and dense actions.
blocks/nav-mega.tsxContent-rich header — mega panels with icons, featured rail, dual CTAs.
NavMega
Content-rich header — mega panels with icons, featured rail, dual CTAs.
blocks/announcement-bar.tsxOptional promo / launch strip above the hero.
AnnouncementBar
Optional promo / launch strip above the hero.
blocks/hero-marketing.tsxClient component — headline, copy, dual CTAs, entrance motion.
HeroMarketing
Client component — headline, copy, dual CTAs, entrance motion.
blocks/hero-split.tsxSplit hero — copy lane + visual placeholder for screenshots or video.
HeroSplit
Split hero — copy lane + visual placeholder for screenshots or video.
blocks/hero-compact.tsxMinimal centered hero for tight launches above dense grids.
HeroCompact
Minimal centered hero for tight launches above dense grids.
blocks/trust-strip.tsxIcon row with short credibility labels.
TrustStrip
Icon row with short credibility labels.
blocks/logo-cloud.tsxPartner row — swap text placeholders for SVG marks.
LogoCloud
Partner row — swap text placeholders for SVG marks.
blocks/logo-marquee.tsxInfinite marquee row — CSS animation with reduced-motion fallback.
LogoMarquee
Infinite marquee row — CSS animation with reduced-motion fallback.
blocks/stats-strip.tsxKPI row — client; stagger on scroll, respects reduced motion.
StatsStrip
KPI row — client; stagger on scroll, respects reduced motion.
blocks/metrics-highlight-row.tsxThree-up metric cards with hints — procurement-friendly.
MetricsHighlightRow
Three-up metric cards with hints — procurement-friendly.
blocks/stats-inline-row.tsxDense horizontal stats strip — fits between heroes and features.
StatsInlineRow
Dense horizontal stats strip — fits between heroes and features.
blocks/stats-big.tsxSingle oversized stat + supporting methodology line.
StatsBig
Single oversized stat + supporting methodology line.
blocks/press-strip.tsx“As featured in” outlet row — swap text for publication SVGs.
PressStrip
“As featured in” outlet row — swap text for publication SVGs.
blocks/partner-logo-grid.tsxSix-cell grid for partner or certification marks.
PartnerLogoGrid
Six-cell grid for partner or certification marks.
blocks/security-row.tsxCompliance narrative trio — icons + factual clauses.
SecurityRow
Compliance narrative trio — icons + factual clauses.
blocks/feature-grid.tsx2×2 cards with Lucide icons and hover/tap motion.
FeatureGrid
2×2 cards with Lucide icons and hover/tap motion.
blocks/feature-alternating.tsxEditorial alternating rows — screenshot lane + copy.
FeatureAlternating
Editorial alternating rows — screenshot lane + copy.
blocks/icon-list-features.tsxVertical icon list — mobile-first dense storytelling.
IconListFeatures
Vertical icon list — mobile-first dense storytelling.
blocks/feature-pills-row.tsxPill cluster for tags, guarantees, or tech assertions.
FeaturePillsRow
Pill cluster for tags, guarantees, or tech assertions.
blocks/bento-showcase.tsxAsymmetric bento grid for dense product storytelling.
BentoShowcase
Asymmetric bento grid for dense product storytelling.
blocks/integrations-row.tsxTabbed integration groups with spring pill — Developer / Data / GTM lanes.
IntegrationsRow
Tabbed integration groups with spring pill — Developer / Data / GTM lanes.
blocks/integration-grid.tsxFour-up vendor grid — swap Lucide icons for real marks.
IntegrationGrid
Four-up vendor grid — swap Lucide icons for real marks.
blocks/steps-timeline.tsxNumbered rollout or how-it-works steps.
StepsTimeline
Numbered rollout or how-it-works steps.
blocks/timeline-vertical.tsxBorder-left timeline — onboarding or launch phases.
TimelineVertical
Border-left timeline — onboarding or launch phases.
blocks/video-section.tsx16:9 media shell with ratio + caption spacing locked.
VideoSection
16:9 media shell with ratio + caption spacing locked.
blocks/social-proof-quote.tsxQuote card with avatar pile and trust line.
SocialProofQuote
Quote card with avatar pile and trust line.
blocks/quote-split.tsxQuote + attributed KPI mini-grid — board-deck friendly.
QuoteSplit
Quote + attributed KPI mini-grid — board-deck friendly.
blocks/testimonial-grid.tsxThree-up cards — client motion on scroll.
TestimonialGrid
Three-up cards — client motion on scroll.
blocks/testimonial-spotlight.tsxSingle large quote — flagship social proof.
TestimonialSpotlight
Single large quote — flagship social proof.
blocks/team-grid.tsxPortrait grid — initials placeholders → photos.
TeamGrid
Portrait grid — initials placeholders → photos.
blocks/contact-section.tsxSales / Support / Partners tabs with lane-specific copy and form shell.
ContactSection
Sales / Support / Partners tabs with lane-specific copy and form shell.
blocks/auth-login-marketing.tsxCentered login card — connect to your auth SDK.
AuthLoginMarketing
Centered login card — connect to your auth SDK.
blocks/signup-strip.tsxInline email + submit — wire action to your ESP or API.
SignupStrip
Inline email + submit — wire action to your ESP or API.
blocks/pricing-single.tsxOne tier + checklist — wire checkoutHref (e.g. Gumroad).
PricingSingle
One tier + checklist — wire checkoutHref (e.g. Gumroad).
blocks/pricing-dual.tsxTwo-column SaaS-style comparison — emphasize featured tier.
PricingDual
Two-column SaaS-style comparison — emphasize featured tier.
blocks/pricing-three-tier.tsxThree columns — default copy is fictional example pricing.
PricingThreeTier
Three columns — default copy is fictional example pricing.
blocks/pricing-addon-row.tsxOptional upsell ribbon — workshops, audits, priority support.
PricingAddonRow
Optional upsell ribbon — workshops, audits, priority support.
blocks/feature-comparison.tsxBoolean plan matrix — Hobby / Pro / Enterprise placeholders.
FeatureComparison
Boolean plan matrix — Hobby / Pro / Enterprise placeholders.
blocks/comparison-mini.tsxCompact two-plan check matrix — mid-page nudge.
ComparisonMini
Compact two-plan check matrix — mid-page nudge.
blocks/cta-band.tsxGradient panel with primary + secondary actions.
CtaBand
Gradient panel with primary + secondary actions.
blocks/cta-split-panel.tsxSplit CTA + stakeholder checklist lane.
CtaSplitPanel
Split CTA + stakeholder checklist lane.
blocks/cta-minimal-bar.tsxThin conversion strip — headline + pill button.
CtaMinimalBar
Thin conversion strip — headline + pill button.
blocks/tabs-marketing.tsxSegmented tabs + spring pill + cross-fading panels — reuse via marketing-tab-controls.
TabsMarketing
Segmented tabs + spring pill + cross-fading panels — reuse via marketing-tab-controls.
blocks/newsletter-inline.tsxInline form — set formAction to your API.
NewsletterInline
Inline form — set formAction to your API.
blocks/blog-teaser-row.tsxThree-up cards for blog or changelog entries.
BlogTeaserRow
Three-up cards for blog or changelog entries.
blocks/changelog-section.tsxVertical timeline of releases.
ChangelogSection
Vertical timeline of releases.
blocks/roadmap-inline.tsxThree-phase horizontal roadmap strip.
RoadmapInline
Three-phase horizontal roadmap strip.
blocks/faq-accordion.tsxCategory tabs + spring-height accordions — flat list mode via items prop.
FaqAccordion
Category tabs + spring-height accordions — flat list mode via items prop.
blocks/faq-rating.tsxHelp-center FAQ with helpful %, response counts, thumb feedback — inspired by modern block labs.
FaqRating
Help-center FAQ with helpful %, response counts, thumb feedback — inspired by modern block labs.
blocks/footer-simple.tsxCopyright + link row — same pattern as this marketing site.
FooterSimple
Copyright + link row — same pattern as this marketing site.
blocks/footer-columns.tsxFour-column marketing footer + brand lane and legal strip.
FooterColumns
Four-column marketing footer + brand lane and legal strip.
blocks/footer-sitemap.tsxDense five-column sitemap — enterprise-scale link budgets.
FooterSitemap
Dense five-column sitemap — enterprise-scale link budgets.
blocks/section-intro.tsxEyebrow + title + paragraph spine between heavy blocks.
SectionIntro
Eyebrow + title + paragraph spine between heavy blocks.
blocks/card-stack-mini.tsxThree-card rollout pattern — milestones or phases.
CardStackMini
Three-card rollout pattern — milestones or phases.
blocks/tokens/hexagon-ui-variables.cssLight/dark CSS variables to merge into globals
—
Light/dark CSS variables to merge into globals
blocks/index.tsBarrel re-exports for tidy imports
—
Barrel re-exports for tidy imports

Review without buying

From the repo root run npm run kit:zip.
Unzip dist/hexagon-ui-kit.zip on your Mac (double-click) or extract into any folder.
Open blocks/ — filenames match the table.

Terminal inventory

unzip -l dist/hexagon-ui-kit.zip

Lists every path inside the archive—quick sanity check before uploading to Gumroad.

Prefer browsing in Cursor? Run npm run kit:syncthen open the generated kit/blocks/ folder (gitignored locally—it mirrors what buyers unzip).