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

Start overDrag a row, or use the arrows

Canvas

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

Expandable Detail Rows

Customer	Plan	Status
Northwind Ltdops@northwind.com	Team	Active
Contosobilling@contoso.io	Pro	Active
Initechadmin@initech.dev	Pro	Trialing

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

Data Migration Split

Switching

We move it, and we say what we cannot

Every migration page promises everything comes across. Something never does, and finding out which thing after the cutover is how a switch becomes a rollback.

Records, history and attachmentsEverything with a stable id, including the timestamps, so reports still line up.
Users and their permissionsRoles are mapped, and the mapping is shown for approval before anything is written.
What does not come acrossCustom automations. The triggers have no equivalent here and a silent half-migration is worse.
Run it twiceA trial into a sandbox first, then the real one. The trial is free and does not count against anything.

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 data-table-expandable feature-rows data-migration-split

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 data-table-expandable feature-rows data-migration-split
 *
 * Packages the sections need: lucide-react
 *
 * Rebuild or edit this layout: https://hoverlab5.netlify.app/builder?b=data-table-expandable,feature-rows,data-migration-split
 */

import * as React from 'react'
import { DataTableExpandable } from '@/components/data-table-expandable'
import { FeatureRows } from '@/components/feature-rows'
import { DataMigrationSplit } from '@/components/data-migration-split'

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