Marketing block

Icon Feature Grid

Uniform cells, no spans, no state — the grid for nine things that matter equally, where a bento would be a wall and tabs would be a filing cabinet.

150 lineslucide-reactAdded 24 Aug 2026

features
grid
icons
marketing
benefits

What's included

components/feature-icon-grid.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add feature-icon-grid

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Everything in the box

No tiers on the reading, no account on the copying.

Copy without an account
Every artifact is readable and copyable signed out. The wall is on commercial use, not on looking.
Your colours, applied
Set a brand palette once and the whole catalog previews in it, so what you copy already matches.
Plain TSX and utilities
No runtime package, no wrapper components, nothing to keep in step with a version of ours.
A CLI that scaffolds
Install a component, a page or a whole template into an existing project from the terminal.
Agent-installable
An MCP server your editor can call, so the component arrives without anyone opening a browser.
A public API with no key
The catalog is a plain unauthenticated REST surface. Read it, script it, mirror it.
Accessible by default
Real semantics, real focus states, and decorative motion gated behind prefers-reduced-motion.
No layout shift
Panels are drawn rather than fetched, so nothing reflows while a remote asset decides to arrive.
One ladder, four rungs
Effects build blocks, blocks build pages, pages build templates — one system rather than four products.

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/feature-icon-grid.tsx

/**
 * <FeatureIconGrid> — the plain three-across feature grid.
 *
 * Deliberately the least clever block in the marketing set, and absent from
 * the catalog until now. <BentoFeatures> composes an asymmetric picture,
 * <FeatureTabs> hides two features to give one the stage, <FeatureRows>
 * spends a full row each. All three are choices, and all three are wrong
 * when there are nine things to say and none of them outranks the others —
 * a bento of nine tiles is a wall, and nine tabs is a filing cabinet.
 *
 * So the design decision here is restraint: uniform cells, no spans, no
 * state, in source order. The grid stops being about itself and lets the
 * nine headings do the work, which is exactly what a features page under a
 * hero is for.
 *
 * Icons are decorative and marked `aria-hidden`. They give the eye a
 * fixation point per cell and carry no meaning the heading does not already
 * carry — a screen reader announcing "sparkles, no login to copy" is worse
 * off, not better.
 *
 * Icons arrive as component references rather than elements, so the caller
 * passes `Zap` and not `<Zap />` and this block keeps control of sizing.
 * The map is built at module scope, so the component identity is stable and
 * a cell does not remount on every render.
 */

import * as React from 'react'
import {
  Boxes,
  Code2,
  Gauge,
  KeyRound,
  Palette,
  Puzzle,
  ShieldCheck,
  Sparkles,
  Terminal,
} from 'lucide-react'

/** A lucide icon, or anything with the same call signature. */
type IconType = React.ComponentType<{ className?: string; 'aria-hidden'?: boolean }>

export interface IconFeature {
  icon: IconType
  title: string
  body: string
}

export interface FeatureIconGridProps {
  features?: IconFeature[]
  heading?: string
  subheading?: string
  /** Columns at `lg`. Two suits longer copy; four suits one-liners. */
  columns?: 2 | 3 | 4
  className?: string
}

const DEFAULT_FEATURES: IconFeature[] = [
  {
    icon: Sparkles,
    title: 'Copy without an account',
    body: 'Every artifact is readable and copyable signed out. The wall is on commercial use, not on looking.',
  },
  {
    icon: Palette,
    title: 'Your colours, applied',
    body: 'Set a brand palette once and the whole catalog previews in it, so what you copy already matches.',
  },
  {
    icon: Code2,
    title: 'Plain TSX and utilities',
    body: 'No runtime package, no wrapper components, nothing to keep in step with a version of ours.',
  },
  {
    icon: Terminal,
    title: 'A CLI that scaffolds',
    body: 'Install a component, a page or a whole template into an existing project from the terminal.',
  },
  {
    icon: Puzzle,
    title: 'Agent-installable',
    body: 'An MCP server your editor can call, so the component arrives without anyone opening a browser.',
  },
  {
    icon: KeyRound,
    title: 'A public API with no key',
    body: 'The catalog is a plain unauthenticated REST surface. Read it, script it, mirror it.',
  },
  {
    icon: ShieldCheck,
    title: 'Accessible by default',
    body: 'Real semantics, real focus states, and decorative motion gated behind prefers-reduced-motion.',
  },
  {
    icon: Gauge,
    title: 'No layout shift',
    body: 'Panels are drawn rather than fetched, so nothing reflows while a remote asset decides to arrive.',
  },
  {
    icon: Boxes,
    title: 'One ladder, four rungs',
    body: 'Effects build blocks, blocks build pages, pages build templates — one system rather than four products.',
  },
]

const COLUMN_CLASS: Record<2 | 3 | 4, string> = {
  2: 'sm:grid-cols-2',
  3: 'sm:grid-cols-2 lg:grid-cols-3',
  4: 'sm:grid-cols-2 lg:grid-cols-4',
}

export function FeatureIconGrid({
  features = DEFAULT_FEATURES,
  heading = 'Everything in the box',
  subheading = 'No tiers on the reading, no account on the copying.',
  columns = 3,
  className = '',
}: FeatureIconGridProps) {
  return (
    <section
      className={`mx-auto w-full max-w-6xl px-4 py-16 sm:px-6 sm:py-24 ${className}`}
    >
      {heading ? (
        <div className="mx-auto mb-14 max-w-2xl text-center">
          <h2 className="text-balance text-3xl font-bold tracking-tight sm:text-4xl">
            {heading}
          </h2>
          {subheading ? (
            <p className="mt-3 text-muted-foreground">{subheading}</p>
          ) : null}
        </div>
      ) : null}

      <ul className={`grid grid-cols-1 gap-x-8 gap-y-10 ${COLUMN_CLASS[columns]}`}>
        {features.map(({ icon: Icon, title, body }) => (
          <li key={title}>
            <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-card/60">
              <Icon aria-hidden className="h-5 w-5 text-primary" />
            </div>
            {title ? <h3 data-stress-ignore className="mt-4 font-semibold leading-snug">{title}</h3> : null}
            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
              {body}
            </p>
          </li>
        ))}
      </ul>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/feature-icon-grid.tsx and import it where you need the section:

import { FeatureIconGrid } from '@/components/feature-icon-grid'

Customize

2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`features`	`IconFeature[]`	`DEFAULT_FEATURES`
`heading`	`string`	`'Everything in the box'`
`subheading`	`string`	`'No tiers on the reading, no account on the c…`
`columns`Columns at `lg`. Two suits longer copy; four suits one-liners.	`2 \| 3 \| 4`	`3`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

feature-icon-grid.html

<!--
  Icon Feature Grid — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="mx-auto w-full max-w-6xl px-4 py-16 sm:px-6 sm:py-24 ">
  <div class="mx-auto mb-14 max-w-2xl text-center">
    <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">Everything in the box</h2>
    <p class="mt-3 text-muted-foreground">No tiers on the reading, no account on the copying.</p>
  </div>
  <ul class="grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
    <li>
      <div class="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-card/60">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-5 w-5 text-primary" aria-hidden="true">
          <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
          <path d="M20 3v4"></path>
          <path d="M22 5h-4"></path>
          <path d="M4 17v2"></path>
          <path d="M5 18H3"></path>
        </svg>
      </div>
      <h3 data-stress-ignore="true" class="mt-4 font-semibold leading-snug">Copy without an account</h3>
      <p class="mt-2 text-sm leading-relaxed text-muted-foreground">Every artifact is readable and copyable signed out. The wall is on commercial use, not on looking.</p>
    </li>
    <li>
      <div class="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-card/60">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette h-5 w-5 text-primary" aria-hidden="true">
          <path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path>
          <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
          <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
          <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle>
          <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
        </svg>
      </div>
      <h3 data-stress-ignore="true" class="mt-4 font-semibold leading-snug">Your colours, applied</h3>
      <p class="mt-2 text-sm leading-relaxed text-muted-foreground">Set a brand palette once and the whole catalog previews in it, so what you copy already matches.</p>
    </li>
    <li>
      <div class="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-card/60">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml h-5 w-5 text-primary" aria-hidden="true">
          <path d="m18 16 4-4-4-4"></path>
          <path d="m6 8-4 4 4 4"></path>
          <path d="m14.5 4-5 16"></path>
        </svg>
      </div>
      <h3 data-stress-ignore="true" class="mt-4 font-semibold leading-snug">Plain TSX and utilities</h3>
      <p class="mt-2 text-sm leading-relaxed text-muted-foreground">No runtime package, no wrapper components, nothing to keep in step with a version of ours.</p>
    </li>
    <li>
      <div class="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-card/60">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-terminal h-5 w-5 text-primary" aria-hidden="true">
          <path d="M12 19h8"></path>
          <path d="m4 17 6-6-6-6"></path>
        </svg>
      </div>
      <h3 data-stress-ignore="true" class="mt-4 font-semibold leading-snug">A CLI that scaffolds</h3>
      <p class="mt-2 text-sm leading-relaxed text-muted-foreground">Install a component, a page or a whole template into an existing project from the terminal.</p>
    </li>
    <li>
      <div class="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-card/60">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle h-5 w-5 text-primary" aria-hidden="true">
          <path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"></path>
        </svg>
      </div>
      <h3 data-stress-ignore="true" class="mt-4 font-semibold leading-snug">Agent-installable</h3>
      <p class="mt-2 text-sm leading-relaxed text-muted-foreground">An MCP server your editor can call, so the component arrives without anyone opening a browser.</p>
    </li>
    <li>
      <div class="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-card/60">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round h-5 w-5 text-primary" aria-hidden="true">
          <path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path>
          <circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle>
        </svg>
      </div>
      <h3 data-stress-ignore="true" class="mt-4 font-semibold leading-snug">A public API with no key</h3>
      <p class="mt-2 text-sm leading-relaxed text-muted-foreground">The catalog is a plain unauthenticated REST surface. Read it, script it, mirror it.</p>
    </li>
    <li>
      <div class="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-card/60">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check h-5 w-5 text-primary" aria-hidden="true">
          <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
          <path d="m9 12 2 2 4-4"></path>
        </svg>
      </div>
      <h3 data-stress-ignore="true" class="mt-4 font-semibold leading-snug">Accessible by default</h3>
      <p class="mt-2 text-sm leading-relaxed text-muted-foreground">Real semantics, real focus states, and decorative motion gated behind prefers-reduced-motion.</p>
    </li>
    <li>
      <div class="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-card/60">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gauge h-5 w-5 text-primary" aria-hidden="true">
          <path d="m12 14 4-4"></path>
          <path d="M3.34 19a10 10 0 1 1 17.32 0"></path>
        </svg>
      </div>
      <h3 data-stress-ignore="true" class="mt-4 font-semibold leading-snug">No layout shift</h3>
      <p class="mt-2 text-sm leading-relaxed text-muted-foreground">Panels are drawn rather than fetched, so nothing reflows while a remote asset decides to arrive.</p>
    </li>
    <li>
      <div class="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-card/60">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-boxes h-5 w-5 text-primary" aria-hidden="true">
          <path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"></path>
          <path d="m7 16.5-4.74-2.85"></path>
          <path d="m7 16.5 5-3"></path>
          <path d="M7 16.5v5.17"></path>
          <path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"></path>
          <path d="m17 16.5-5-3"></path>
          <path d="m17 16.5 4.74-2.85"></path>
          <path d="M17 16.5v5.17"></path>
          <path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"></path>
          <path d="M12 8 7.26 5.15"></path>
          <path d="m12 8 4.74-2.85"></path>
          <path d="M12 13.5V8"></path>
        </svg>
      </div>
      <h3 data-stress-ignore="true" class="mt-4 font-semibold leading-snug">One ladder, four rungs</h3>
      <p class="mt-2 text-sm leading-relaxed text-muted-foreground">Effects build blocks, blocks build pages, pages build templates — one system rather than four products.</p>
    </li>
  </ul>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

7 more blocks in Feature Sections

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Feature Sections

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Feature Sections blocks

View category

Everything, in one place

The parts you would otherwise rebuild on every project.

Fast by default

No runtime, no hydration cost, no waterfall. What you paste is what the browser paints.

Yours to keep

Copied code lives in your repo. Nothing phones home and nothing breaks when we ship.

Zero dependencies

Nothing to audit.

Composable

Every piece works alone or nested inside the next one up.

Accessible

Keyboard paths, focus rings and reduced-motion fallbacks included.

"It replaced our design system backlog."

Priya R., Staff Engineer

Bento Feature Grid

Six tiles on an asymmetric 4x3 grid with per-tile spans, a hover glow and a mobile collapse that follows source order.

Feature Sections114 lines1 dep

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

Alternating Feature Rows

A full row per feature with the media side flipping each time, so the eye re-enters the page instead of skimming a stack of identical blocks.

Feature Sections161 lines1 dep

Works with what you already use

What each one actually does, rather than a wall of logos.

Figma
Design
Available
Match a frame against the catalog and get back the components that already look like it.
VS Code
Editor
Available
Install a component from the editor over MCP, without opening a browser.
Next.js
Framework
Available
App Router by default — every block is a server component unless it needs not to be.
Tailwind CSS
Styling
Available
Utility classes and CSS variables, so a copied block inherits your theme rather than fighting it.
shadcn/ui
Registry
Available
A registry the CLI can install from, including a base preset carrying tokens and fonts.
Storybook
Tooling
Beta
Generated stories per artifact, so a copied block lands with its states already documented.
Vue
Framework
Planned
The effects already work anywhere. Blocks and pages as single-file components are in progress.
Sanity
CMS
Planned
Content-driven pages with the copy lifted out into a schema you can edit.

Integration Directory Grid

What each integration actually does, not a wall of logos — with availability as a text pill rather than a tinted border, and the name as the link so the card is not one enormous one.

Feature Sections208 linesNo deps

Built for everyone who ships UI

Whichever seat you are in, the work starts further along.

Frontend developers

Ship polish without the busywork

Stop rewriting the same hover and focus states
Drop a whole section in instead of assembling one
No runtime means no bundle-size regression

Designers

Close the gap between the mock and the build

Show stakeholders something live, not a screenshot
Tune spacing, colour and motion against real markup
Hand over a link instead of a spec document

Founders

Make an MVP feel like a funded product

A credible landing page in an afternoon
No design hire required to launch
Commercial use covered — ship it and charge for it

Learners

Read patterns that are actually in production

Every source is commented and idiomatic
Learn layout and motion by working example
Fork a piece and break it — nothing to set up

Audience Persona Cards

A "who this is for" grid: four cards naming an audience, the outcome they want and the bullets that get them there.

Feature Sections145 lines1 dep10 Sept

Paste it. Ship it.

No install step, no configuration file, no build plugin.

Copy the section straight into your project
Restyle it with your own tokens, not our overrides
Delete what you do not need — it is your code now

1import { PricingTiers } from '@/components/pricing-tiers'2import { FaqAccordion } from '@/components/faq-accordion'3 4export default function Page() {5  return (6    <main>7      <PricingTiers />8      <FaqAccordion />9    </main>10  )11}

Editor Window Showcase

A feature section paired with a tabbed fake editor — real selectable code, generated line numbers and a copy button.

Feature Sections164 lines1 dep2 Sept

Tabbed Feature Showcase

Features as a real tablist — arrow keys, roving focus and a drawn product panel per tab — for the section where four features would otherwise fight for one scroll.

Feature Sections217 lines1 dep2 Sept

Integrations

Not all of these mean the same thing

A grid of thirty logos implies thirty equivalent integrations. Usually four are deep, six are one-way, and the rest are a Zapier entry. Saying which is which costs one sentence each.

Two-way syncChanges flow both directions and conflicts are resolved, not last-write-wins.
One-way importWe read from them on a schedule. Nothing is written back, which is often what you want.
Notifications onlyWe post events into the channel. Honest, useful, and not a sync — so it is not listed as one.
Via the APIEverything else. Documented, versioned, and the same API the first row is built on.

Integration Depth Split

An integrations section that says how deep each one goes, instead of a wall of logos that all imply the same thing.

Feature Sections157 linesNo deps13 Sept