Module Tree Features

Installation

pnpm dlx shadcn@latest add @cleverui/feature-module-tree

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

Usage

tsx

import { FeatureModuleTree } from '@/components/blocks/feature-module-tree'

Exampletsx

import { FeatureModuleTree } from '@/components/blocks/feature-module-tree'

export default function FeatureModuleTreeDemo() {
  return (
    <FeatureModuleTree
      eyebrow="Module map"
      heading="The surface area, nested as shipped."
      description="Every leaf is a public capability with a typed export. Branches group ownership, not marketing buckets, so the tree matches how teams actually navigate the monorepo."
      root={{
        label: 'fieldnote/',
        sublabel: 'core platform',
      }}
      branches={[
        {
          icon: 'Workflow',
          label: 'runtime/',
          leaves: [
            {
              label: 'scheduler',
              line: 'Cron and event-driven jobs with backlog caps',
              state: 'stable',
            },
            {
              label: 'worker-pool',
              line: 'Autoscaled process pools with per-tenant isolation',
              state: 'stable',
              featured: true,
            },
            {
              label: 'replay',
              line: 'Re-run any workflow from a committed snapshot',
              state: 'stable',
            },
          ],
        },
        {
          icon: 'Shield',
          label: 'policy/',
          leaves: [
            {
              label: 'packs',
              line: 'Versioned rule sets published like packages',
              state: 'stable',
            },
            {
              label: 'eval',
              line: 'Synchronous gates on every mutation path',
              state: 'stable',
            },
            {
              label: 'audit-hooks',
              line: 'Immutable decision log with export pipelines',
              state: 'beta',
            },
          ],
        },
        {
          icon: 'Boxes',
          label: 'sdk/',
          leaves: [
            {
              label: 'typescript',
              line: 'Generated clients from the schema registry',
              state: 'stable',
            },
            {
              label: 'python',
              line: 'Async client with streaming tool results',
              state: 'stable',
            },
            {
              label: 'webhooks',
              line: 'Signed outbound delivery with retry budgets',
              state: 'stable',
            },
            {
              label: 'cli',
              line: 'Local run and secret injection for agents',
              state: 'beta',
            },
          ],
        },
        {
          icon: 'Radio',
          label: 'observability/',
          leaves: [
            {
              label: 'traces',
              line: 'OpenTelemetry spans across tool boundaries',
              state: 'stable',
            },
            {
              label: 'signals',
              line: 'Threshold alerts that stay quiet until they matter',
              state: 'beta',
            },
          ],
        },
      ]}
      footnote="Every module ships typed, nothing bolted on"
    />
  )
}

API reference

FeatureModuleTree accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`description`	`string`	–	–
`root`*	`FeatureModuleTreeRoot`	–	trunk node, e.g. mono label 'fieldnote/'
`branches`*	`FeatureModuleTreeBranch[]`	–	3–4 branches of 2–5 leaves each
`footnote`	`string`	–	mono closing line

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

Referenced types

Typestsx

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

export interface FeatureModuleTreeBranch {
  /** lucide-react icon name, e.g. 'GitBranch' */
  icon?: string
  label: string
  leaves: FeatureModuleTreeLeaf[]
}

export interface FeatureModuleTreeLeaf {
  label: string
  line: string
  state?: 'stable' | 'beta'
  /** at most one featured leaf across the whole tree */
  featured?: boolean
}

Related components

Terminal Rows Features

Alternating feature rows for developer tools built with React and Tailwind, each capability argued in copy and proven beside a token-built terminal pane with typed command and output.

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.

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.

Inventory Wall Features

The everything-included wall for React landing pages, dozens of small capability chips grouped under mono Tailwind labels with counts, breadth made visible in one ruled sweep.

Frequently asked questions

How do I install the Module Tree 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-module-tree`. 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 Module Tree Features require?

Module Tree 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 Module Tree 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