Orbit Map Features

Installation

pnpm dlx shadcn@latest add @cleverui/feature-orbit-map

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { FeatureOrbitMap } from '@/components/blocks/feature-orbit-map'

Exampletsx

import {
  BookOpen,
  GitBranch,
  Lock,
  Radio,
  ScrollText,
  Webhook,
} from 'lucide-react'
import { FeatureOrbitMap } from '@/components/blocks/feature-orbit-map'

export default function FeatureOrbitMapDemo() {
  return (
    <FeatureOrbitMap
      eyebrow="System map"
      heading="One core. Six surfaces that stay in sync."
      description="Fieldnote Core is the runtime. Everything around it is a first-class module with its own API surface, wired, versioned, and observable."
      center={{
        label: 'Fieldnote Core',
        sublabel: 'v4 runtime',
      }}
      satellites={[
        {
          icon: BookOpen,
          label: 'Runbooks',
          line: 'Living procedures that advance with the work',
        },
        {
          icon: Webhook,
          label: 'Webhooks',
          line: 'Signed delivery with retry budgets',
        },
        {
          icon: ScrollText,
          label: 'Audit ledger',
          line: 'Immutable event log, exportable anytime',
        },
        {
          icon: Lock,
          label: 'Policy pack',
          line: 'Declarative gates on every write path',
        },
        {
          icon: GitBranch,
          label: 'Replay',
          line: 'Re-run any workflow from a past commit',
        },
        {
          icon: Radio,
          label: 'Signals',
          line: 'Quiet alerts only when thresholds trip',
        },
      ]}
    />
  )
}

API reference

FeatureOrbitMap accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`description`	`string`	–	–
`center`*	`FeatureOrbitMapCenter`	–	product node, e.g. label 'Fieldnote Core' with mono sublabel 'v4 runtime'
`satellites`*	`FeatureOrbitMapSatellite[]`	–	4–6 feature nodes; real content, not decoration

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface FeatureOrbitMapCenter {
  label: string
  sublabel?: string
}

export interface FeatureOrbitMapSatellite {
  icon?: LucideIcon
  label: string
  line: string
}

Related components

Callout Figure Features

Annotated product figure for React marketing pages, numbered leader lines tie a token-built Tailwind mock to margin notes, so every feature claim points at the pixel it explains.

Layer Stack Features

Architecture layer stack for React product pages, skewed Tailwind planes pile the system into a flat axonometric diagram, each layer wired to a margin note.

Steps Path

A numbered process where a hairline path literally draws the route between steps as you scroll, order made visible, each milestone settling in turn.

Accordion Stage

Feature accordion synced to a stage, expanding a row swaps the token-built preview beside it, one open at a time, height animated without jank.

Before After Strip

A narrow strip pairing the old way against your product in two mirrored quiet columns, each pain struck through as its counterpart lands with a check.

Bento Feature Grid

A bento grid drawn like a drafting table, tiles share single hairline seams instead of floating as glow cards. Staggered reveal, quiet hover shift, wide and tall spans.

Frequently asked questions

How do I install the Orbit Map Features component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/feature-orbit-map`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Orbit Map Features require?

Orbit Map Features uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Orbit Map Features to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code