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

3 / 30

1
Bulk Approval QueueHuman in the Loop
Move Bulk Approval Queue down Duplicate Bulk Approval Queue Remove Bulk Approval Queue
2
Map and Results SplitProduct Listings
Move Map and Results Split up Move Map and Results Split down Duplicate Map and Results Split Remove Map and Results Split
3
Alternating Feature RowsFeature Sections
Move Alternating Feature Rows up Duplicate Alternating Feature Rows Remove Alternating Feature Rows

Start overDrag a row, or use the arrows

Canvas

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

Bulk Approval Queue

Waiting for you

6 actions the agent will not take on its own · 2 must be opened individually

Actions awaiting approval. High-impact actions have no bulk checkbox and must be opened individually.
Select the 4 actions that can be approved in bulk	Action	Amount	Deadline
Refund order 41822	Refund order 41822 Damaged on arrival · photo attached · customer since 2023	£38.00	Auto-approves in 3h
Refund order 41830	Refund order 41830 Never delivered · carrier confirmed loss	£12.50	Auto-approves in 3h
Refund order 41833	Refund order 41833 Duplicate charge · matched to payment intent pi_3Qk	£64.00	Auto-approves in 6h
	Close account for Meridian Foods Requested by an admin · 41 users · 3 years of data Deletes data — opens individually	—	Open Close account for Meridian Foods
Refund order 41840	Refund order 41840 Late delivery · goodwill, within policy	£9.99	Auto-approves in 12h
	Issue account credit to Halden Group Outage compensation · agent proposed 3 months Above the bulk limit — opens individually	£4,200.00	Open Issue account credit to Halden Group

Map and Results Split

Homes for sale in Bristol

142 properties · sorted by newest listed

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

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 approval-queue listing-map-split feature-rows

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 3 Hoverlab blocks.
 *
 * Install the sections this file imports:
 *   npx hoverlab add approval-queue listing-map-split feature-rows
 *
 * Packages the sections need: lucide-react
 *
 * Rebuild or edit this layout: https://hoverlab5.netlify.app/builder?b=approval-queue,listing-map-split,feature-rows
 */

import * as React from 'react'
import { ApprovalQueue } from '@/components/approval-queue'
import { ListingMapSplit } from '@/components/listing-map-split'
import { FeatureRows } from '@/components/feature-rows'

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