WebberUI

Developer Tool Landing Page

Landing page for a developer tool or API: code snippets, feature highlights, pricing.

ProMarketingdev8 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/dev-tool-landing.json?t=<install token>"

The whole page lands in app/templates/dev-tool-landing/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Nav Bar and Hero

    A branded nav bar, an aurora gradient headline, the CLI install command and a self-typing terminal demo, over a customer logo wall.

    hero
  2. 2

    Developer Experience Code Demo

    Edge auth, caching and geo-routing explained on the left; a tabbed, syntax-highlighted code window on the right.

    content
  3. 3

    Platform Capability Grid

    Six cards covering 0 ms cold starts, global points of presence, edge auth, Git deploys, observability and edge KV.

    features
  4. 4

    Integration Ecosystem

    Twelve official integration tiles — GitHub, PostgreSQL, Stripe and more — showing how it slots into an existing toolchain.

    gallery
  5. 5

    Performance Figures

    Four animated counter cards beside a bar chart of falling latency, showing performance in real production traffic.

    stats
  6. 6

    Pricing Plans

    Hobby, Pro and Enterprise side by side, with Pro marked out as the popular choice by a gradient glow.

    pricing
  7. 7

    Get Started CTA

    The brand mark centred on a parallax glow backdrop, with two action buttons and a one-click-copy CLI install command.

    cta
  8. 8

    Footer

    Brand blurb and four columns of links, over a copyright notice and a system-status indicator light.

    footer

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →