Builder

Compose a page out of real sections.

Pick sections from 307 blocks, drag them into order, and theme the lot in one go. What renders below is the actual component, not a picture of it — the same one the 126 pages in the catalog are built from. When it looks right, run it or take the source.

The layout and the theme both live in the address bar, so this page is shareable as a link and needs no account. Every edit is a normal navigation, which makes the back button an undo.

The catalog default. Every section reads its colours from tokens.

Outline

2 / 30

1
Alternating Feature RowsFeature Sections
Move Alternating Feature Rows down Duplicate Alternating Feature Rows Remove Alternating Feature Rows
2
Live Agent Task ListAgent Reasoning
Move Live Agent Task List up Duplicate Live Agent Task List Remove Live Agent Task List

Start overDrag a row, or use the arrows

Canvas

Hover a section to move, duplicate or remove it. Drag it to reorder.

Alternating Feature Rows

How it works

Three steps, none of which involve an account.

Browse

Find it without an account

Every component is readable, customisable and copyable before you sign in for anything. Nothing sits behind an email gate, because a gate at the browse step costs more visitors than it captures.

No login to copy
Public REST API, no key
Live preview on every page

Customise

Tune it in the browser, not after pasting

Colour, timing and sizing are editable where you found the component, and what you copy is what you configured — not a default you then have to hunt through and change.

Brand colours applied across the catalog
Copy reflects your edits

Ship

The code lands in your repo and stops being ours

No runtime dependency, no package that phones home, no version to keep in step. You own the file the moment it is pasted, and updates reach you only when you go and get them.

Plain TSX and utility classes
No attribution required

Live Agent Task List

Quarterly churn review

2 of 5 complete · 1 failed

Complete: Pull cancellations for Q3
2,481 rows from warehouse.subscriptions
2.7s
Complete: Join to account seat counts
Matched 2,463 of 2,481 — 18 accounts deleted
1.4s
Failed: Fetch exit-survey responses
CRM returned 429 — rate limited after 40 of 300
Running: Score accounts by churn risk
Running the model over the joined cohort
62%
Queued: Draft the summary

Add a section

Every block in the catalog, filtered by what it is. Click to append to the end of the page, or drag one into the outline to place it.

307 sections

Take it with you

1. Install the sections

Writes each block to components/, which is where the page below imports them from.

npx hoverlab add feature-rows agent-task-list

These sections import lucide-react — everything else they use is React and Tailwind.

2. Name the page

Sets the component name and the filename. Optional.

Saves as app/composed-page.tsx

3. Take the source

/**
 * ComposedPage — composed from 2 Hoverlab blocks.
 *
 * Install the sections this file imports:
 *   npx hoverlab add feature-rows agent-task-list
 *
 * Packages the sections need: lucide-react
 *
 * Rebuild or edit this layout: https://hoverlab5.netlify.app/builder?b=feature-rows,agent-task-list
 */

import * as React from 'react'
import { FeatureRows } from '@/components/feature-rows'
import { AgentTaskList } from '@/components/agent-task-list'

export default function ComposedPage() {
  return (
    <main className="min-h-screen bg-background text-foreground">
      <FeatureRows />
      <AgentTaskList />
    </main>
  )
}