Manicat UI

Hero section

Three full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph that routes sample events node by node, and editorial type over a mesh gradient.

Preview
Hero section preview

See every dollar of revenue move

Lumen connects Stripe, HubSpot and your warehouse, then explains each change in MRR the moment it happens. No SQL, no stale spreadsheets.

Free for 14 days. Connects in about four minutes.

Revenue overview

Synced with Stripe 2 minutes ago

MRR$482.9K+8.2%
Net retention118%+3 pts
New customers214+12%
Churned MRR$6.1K−14%

MRR grew $36.4K this month. 62% came from 14 expansions on the Scale plan, led by Linear.

Net new MRR, Aug 26 to Sep 24. This period, latest $2,109. Last period, latest $1,336.

Net new MRR
DateThis periodLast period
Aug 26$562$454
Aug 27$718$631
Aug 28$789$710
Aug 29$891$690
Aug 30$1,001$762
Aug 31$1,073$789
Sep 1$1,041$820
Sep 2$1,058$878
Sep 3$1,077$883
Sep 4$1,202$796
Sep 5$1,094$779
Sep 6$1,142$744
Sep 7$1,112$717
Sep 8$1,030$672
Sep 9$1,021$713
Sep 10$1,075$662
Sep 11$984$658
Sep 12$996$619
Sep 13$1,043$611
Sep 14$1,094$738
Sep 15$1,162$662
Sep 16$1,209$816
Sep 17$1,412$765
Sep 18$1,520$954
Sep 19$1,595$973
Sep 20$1,722$1,021
Sep 21$1,796$1,155
Sep 22$2,023$1,275
Sep 23$2,026$1,233
Sep 24$2,109$1,336

Biggest moversMRR change
  • LinearMoved to Enterprise+$4,200
  • RaycastAdded 120 seats+$2,850
  • VercelAnnual prepay+$1,900
  • LoomRemoved 40 seats−$1,240
  • SupabaseAdded forecasting+$980
  • FramerUpgraded to Scale+$760

When to use

  • The first section of a SaaS landing page, when the product screen is the pitch (Screenshot).
  • Developer tools, automation, and infrastructure products, where showing the product working is the pitch (Workflow).
  • A launch or download page that wants one confident line and a sense of atmosphere (Mesh).

When not to use

  • Use page-header for titles inside app screens.
  • Use hero-signup when the goal is collecting an email in the first section.

shadcn CLI

Also installs (7)

  • manicat-foundation
  • avatar
  • button
  • copy-button
  • line-chart
  • segmented-control
  • sparkline
Manual install(+)
registry.jsonjson
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-section",
  "type": "registry:block",
  "title": "Hero section",
  "description": "Three full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph that routes sample events node by node, and editorial type over a mesh gradient.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json",
    "https://manicat.viraza.net/r/avatar.json",
    "https://manicat.viraza.net/r/button.json",
    "https://manicat.viraza.net/r/copy-button.json",
    "https://manicat.viraza.net/r/line-chart.json",
    "https://manicat.viraza.net/r/segmented-control.json",
    "https://manicat.viraza.net/r/sparkline.json"
  ],
  "files": [
    {
      "path": "registry/blocks/hero-section/hero-section.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-section.tsx"
    },
    {
      "path": "registry/blocks/hero-section/hero-section.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-section.module.css"
    },
    {
      "path": "registry/blocks/hero-section/hero-content.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-content.tsx"
    },
    {
      "path": "registry/blocks/hero-section/hero-content.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-content.module.css"
    },
    {
      "path": "registry/blocks/hero-section/hero-motion.ts",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-motion.ts"
    },
    {
      "path": "registry/components/copy-button/copy-button.tsx",
      "type": "registry:component",
      "target": "@components/manicat/copy-button/copy-button.tsx"
    },
    {
      "path": "registry/components/copy-button/copy-button.module.css",
      "type": "registry:component",
      "target": "@components/manicat/copy-button/copy-button.module.css"
    },
    {
      "path": "lib/use-copy-feedback.ts",
      "type": "registry:lib",
      "target": "@components/manicat/lib/use-copy-feedback.ts"
    },
    {
      "path": "registry/components/button/button.tsx",
      "type": "registry:component",
      "target": "@components/manicat/button/button.tsx"
    },
    {
      "path": "registry/components/button/button.module.css",
      "type": "registry:component",
      "target": "@components/manicat/button/button.module.css"
    },
    {
      "path": "registry/blocks/hero-section/hero-mesh.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-mesh.tsx"
    },
    {
      "path": "registry/blocks/hero-section/hero-mesh.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-mesh.module.css"
    },
    {
      "path": "registry/blocks/hero-section/hero-cadence.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-cadence.tsx"
    },
    {
      "path": "registry/blocks/hero-section/hero-cadence.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-cadence.module.css"
    },
    {
      "path": "registry/blocks/hero-section/hero-relay.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-relay.tsx"
    },
    {
      "path": "registry/blocks/hero-section/hero-relay.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-relay.module.css"
    },
    {
      "path": "registry/blocks/hero-section/hero-lumen.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-lumen.tsx"
    },
    {
      "path": "registry/blocks/hero-section/hero-lumen.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-lumen.module.css"
    },
    {
      "path": "registry/blocks/hero-section/hero-lumen-data.ts",
      "type": "registry:component",
      "target": "@components/manicat/blocks/hero-section/hero-lumen-data.ts"
    },
    {
      "path": "registry/components/line-chart/line-chart.tsx",
      "type": "registry:component",
      "target": "@components/manicat/line-chart/line-chart.tsx"
    },
    {
      "path": "registry/components/line-chart/line-chart.module.css",
      "type": "registry:component",
      "target": "@components/manicat/line-chart/line-chart.module.css"
    },
    {
      "path": "lib/media.ts",
      "type": "registry:lib",
      "target": "@components/manicat/lib/media.ts"
    },
    {
      "path": "registry/components/avatar/avatar.tsx",
      "type": "registry:component",
      "target": "@components/manicat/avatar/avatar.tsx"
    },
    {
      "path": "registry/components/avatar/avatar.module.css",
      "type": "registry:component",
      "target": "@components/manicat/avatar/avatar.module.css"
    },
    {
      "path": "registry/components/segmented-control/segmented-control.tsx",
      "type": "registry:component",
      "target": "@components/manicat/segmented-control/segmented-control.tsx"
    },
    {
      "path": "registry/components/segmented-control/segmented-control.module.css",
      "type": "registry:component",
      "target": "@components/manicat/segmented-control/segmented-control.module.css"
    },
    {
      "path": "registry/components/sparkline/sparkline.tsx",
      "type": "registry:component",
      "target": "@components/manicat/sparkline/sparkline.tsx"
    },
    {
      "path": "registry/components/sparkline/sparkline.module.css",
      "type": "registry:component",
      "target": "@components/manicat/sparkline/sparkline.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/hero-section",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/hero-section",
    "markdown": "https://uiarc.dev/components/blocks/hero-section/markdown"
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx
"use client";

import { HeroSection } from "manicat/registry/blocks/hero-section/hero-section";

export function HeroSectionExample() {
  return <HeroSection />;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Landing hero A hero with an announcement pill, install command and two actions.

Landing hero A hero with an announcement pill, install command and two actions. preview

Interfaces that feel finished

Copy a component, own the code, and ship.

Get startedBrowse components
pnpm dlx shadcn@latest add @manicat/button

Accessibility

  • Each design has one h1, and the calls to action are real links or buttons with visible text.
  • The dashboard is a labelled group of sample data; its range control is a segmented control and the chart keeps its screen reader table.
  • The workflow graph is a labelled group; each step's state has a text label (waiting, running, done, skipped) and its result is written out, never shown by color alone.
  • The mesh and glow are decorative and hidden from assistive technology. Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring.

Motion

  • Screenshot: the copy rises in reading order, then the window rises in behind it and settles flat from a tilt.
  • Workflow: each step turns to the accent while it runs, the data draws along the edge to the next one, and the result and time swap in with a small spring. The run pauses while the hero is off screen or the tab is hidden.
  • Mesh: the gradient drifts on the Gradient mesh editor's seamless 20 second loop.
  • Reduced motion removes every transform: no rise or tilt, the mesh draws one still frame, content fades in briefly, and the workflow shows each event as its finished run without playing; Send test event moves to the next one at once.

Responsive behavior

  • Every design is one full screen (100svh, full width) on desktop and phones. Container queries: the split layout stacks below 900px; below 560px padding tightens and actions fill the width.
  • The dashboard and the workflow graph are drawn at a fixed design size and scaled like a screenshot. The dashboard switches to a compact layout without the sidebar under 720px and runs off the bottom edge into a fade; the graph switches to compact action nodes on phones.
  • On phones the logo row of the Mesh design becomes a grid.

Performance

  • One WebGL canvas at most per hero, drawn at one pixel per CSS pixel and thirty frames a second, only while on screen and the tab is visible. A static CSS render of the same mesh shows first.
  • The workflow advances one React state step every few hundred milliseconds only while the hero is on screen and the tab is visible; nothing else loops at rest.

Notes for AI

  • The three designs carry sample products (Lumen, Relay, Cadence). Replace the copy in hero-lumen.tsx, hero-relay.tsx, and hero-cadence.tsx, the dashboard data in hero-lumen-data.ts, and the sample events at the top of hero-relay.tsx, or pass title and friends for a plain content hero.
  • Mesh colors live in CSS per theme (hero-lumen.module.css and hero-cadence.module.css), in the variables --mesh-base and --mesh-1 onward.
  • Brand marks are sample customers from public/block-logos, not endorsements.
  • Composes Arc Button, LineChart, Sparkline, SegmentedControl, and Avatar.