// blocks

Composed sections, ready to drop in

Multi-file page sections built from DesignPass components. Install one block and the registry pulls its dependencies.

hero

HeroSlides, Full-bleed photo hero that pages a scene deck with thick edge chevrons and bottom dots. Each scene carries its own eyebrow, headline, and up to two JellyButtons; the backdrop wipes in quickly, and hovering a control warms the next photo before you click. Optional soft scroll parallax. Great for automotive launches, product story first viewports, and campaign landings that need more than one still.

NewFree

FeatureReveal, Feature strip with a soft magnetic lean on graphic tiles (image + title + plus). Place the plus under the title or on the image top-right. Hover inverts the plus. Click fades the tile; halfway through, a blurred full-screen scrim appears and a larger card slides up (X top-right with hover invert, JellyButton Back, whole card scrolls; click scrim to dismiss). One column on phones, two from sm, three from lg. Great under HeroSlides or as the second beat of a launch page.

NewFree

profiles

ProfileCompact, Dense list-row profile card wrapping PersonByline (avatar, copy, optional action). Filled white card or flat list row. No decorative border. Pass JellyButton or any control into `action`. Great for follower lists and invite panels.

NewFree

ProfileDetail, Expanded person panel: portrait, name, role / handle, optional quote and bio, plus slots for a close control and footer actions. No filled card chrome by default. PeopleReveal nests this inside its portal.

NewFree

ProfileTile, Portrait profile card with a flush cover photo or a circle portrait. Tune aspect (`1/1`, `4/5`, `3/4`, `3/2`, `16/9`, or any CSS ratio), show/hide role and footer, optional trailing control. Surface is white fill + shadow (no decorative border). A single-person block meant to nest inside people grids. Great alone in a gallery or as the tile unit inside PeopleReveal.

NewFree

ProfileTweet, Social post card built from PersonAvatar and PersonByline. Layout `row` keeps the classic avatar-left tweet; `stack` puts the photo on top with copy underneath. Toggle avatar, name, handle, timestamp, and body. A single-card block meant to nest inside Marquee and other rails. Great for social-proof marquees and launch-page quote strips.

Free

content

PeopleReveal, Team section that nests ProfileTile cards in a magnet grid. Click fades a tile; halfway through, a blurred scrim opens and a ProfileDetail card slides up with quote and bio. Same reveal choreography as FeatureReveal, tuned for humans. One column on phones, two from sm, three from lg. Great for about pages and speaker directories that should feel alive.

NewFree

QuoteLens, Testimonial lens section built from PersonAvatar faces and a PersonByline attribution. Hover focuses one quote into the stage while the others dim; click pins the selection. The active face gets a magnetic lean. Great for social proof under a hero without a wall of quote cards.

NewFree

FaqSpring, FAQ band with a TextType headline and SpringAccordion panels that open on a real spring. Great before the closing CTA on product and pricing pages.

NewFree

CtaStage, Closing CTA stage: SlideText headline over a pluggable atmosphere wash (SoftPatterns by default) and a JellyButton. Centered stack with room to breathe; the headline drifts up when the section scrolls in. Tunable headline, subcopy, and click handler. Great as the last beat before the footer on marketing pages.

Free

HowItWorks, Numbered three-step strip with a ClarityText headline that clarifies into place. One column on phones, three from lg. Great for install → customize → ship narratives on product and template landings.

Free

LogoCloud, Social-proof strip with a Shuffle headline and a fading Marquee of text logos. Ships without image assets so Claude can rename the marks instantly. Great under a hero when you need trust before the feature pitch.

Free

ProjectGrid, Portfolio project grid with a SwellText headline, Magnet cards, optional meta labels, and optional links. One column on phones, three from lg. Great for founder sites and case-study indexes.

Free

StatsTally, Metrics band where each figure counts in via Tally under a SpectralText headline. Great for social proof numbers, install counts, and zero-deps claims on SaaS landings.

Free

pricing

PricingCards, Three-up pricing strip with a ShinyText headline, optional SlideToggle for monthly/annual billing (annual default when shown), Magnet lean on each plan card, and JellyButton CTAs. Highlight a featured plan. Great for free/pro/team ladders on product launches.

NewFree

PricingCompare, Plan cards plus a full feature comparison matrix underneath. Cards convert; the table closes power-user and procurement objections. Annual default and Most popular highlight on the target tier. Great on dedicated pricing pages.

NewFree

PricingDuo, Two-plan pricing (Starter vs Pro) that cuts choice paralysis. Best value badge on the target tier, annual default with savings, JellyButton CTAs. Great early-stage or SMB funnels where three columns dilute clicks.

NewFree

PricingEnterprise, Three self-serve tiers plus an Enterprise column with a visible price floor and Talk to sales CTA. Avoids the Contact-sales black hole while keeping Most popular and annual defaults on self-serve. Great for B2B ladders that end in procurement.

Free

PricingPopular, Highest-leverage SaaS pricing layout from conversion research: three tiers, Most popular badge and contrast on the middle plan, annual billing defaulted with a concrete savings callout, per-month figures even on annual, and proof under the featured CTA. Great when you want plan mix steered to the revenue tier.

Free

PricingRows, Horizontal plan rows instead of a card grid: name, price, features, and CTA on one rail. Keeps Most popular contrast and annual default. Great for denser desktop pricing that still scans on phones.

Free

PricingSeats, Seat configurator with a SpringSlider for headcount, live monthly total, annual default, and included-feature list. Expansion revenue pattern for per-seat SaaS. Great when price scales with roster size.

Free

PricingTable, Dense grouped feature matrix as the primary pricing UI, with sticky plan headers, Recommended column emphasis, and CTAs in the header. Great when buyers need to justify a tier internally before checkout.

Free

nav

NavBrand, Founder and personal-brand header: wordmark emphasis, text links, no filled CTA. Sticky by default. Quieter than a SaaS marketing bar. Great for portfolio and indie founder sites.

NewFree

NavCompact, Waitlist and launch header: logo and one JellyButton CTA only. Sticky by default. No link clutter in the first viewport. Great above a single-job capture hero.

NewFree

NavFloating, Floating pill nav centered over the hero. Sticky by default via `fixed` so the pill stays while scrolling; set `sticky={false}` for absolute overlay that scrolls away. Mobile menu and JellyButton CTA. Pad the hero under it. Great for motion showcase landings.

NewFree

NavInstall, Docs and install header: logo, SpringSelect version picker, sparse Docs/API/Changelog links, and an install JellyButton CTA. Sticky by default. Great above open-source and commercial developer tool landings.

Free

NavMarketing, Stripe-style marketing header: logo, centered links, text secondary action, and one filled JellyButton CTA. Sticky by default for long SaaS landings. Great above ProductLaunch-style pages.

Free

NavMinimal, Linear and Vercel-inspired sparse header: logo, a short link row, and one JellyButton CTA. Sticky by default (`sticky` prop). Mobile collapses links behind a menu while keeping the CTA reachable. Great for focused product and docs-adjacent pages.

Free

footer

FooterGiant, Footer with a giant brand word cut off above a center-bright glare line, soft radial wash, postal address, SocialIcons, LiveCopyright under the icons, and five link columns. Colors follow --tpl-chrome*. Great for dark SaaS landings that want a cinematic close without a status chip.

NewFree

FooterBrand, Anthropic-inspired brand footer with a large statement, sparse links, and a quiet LiveCopyright line that tracks the calendar year. More presence than a link dump, less density than a sitemap. Great for mission-led and research-led product pages.

NewFree

FooterCompact, Single-bar footer for short pages: brand, a few links, and a LiveCopyright line that tracks the calendar year on one responsive row. Great under waitlist and launch templates that should not grow a full sitemap.

NewFree

FooterDev, Vercel-style developer footer that leads with Docs, API, Changelog, Templates, and Status, then company links, a SocialIcons row, and a LiveCopyright line that tracks the calendar year. Great for tools built for Claude and Kickbacks users.

Free

FooterSocial, Centered founder footer: brand, tagline, social icon row, and a LiveCopyright line that tracks the calendar year. Great for portfolio and personal brand templates where social is the next action.

Free

FooterSplit, Two-pane footer with brand story on the left, two to four link columns on the right, optional email subscribe (`subscribe`), legal links, and LiveCopyright under the brand. Great when you want narrative plus navigation in one footer.

Free

34 blocks available · License terms