Terminal Rows Features

Installation

pnpm dlx shadcn@latest add @cleverui/feature-terminal-rows

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

Usage

tsx

import { FeatureTerminalRows } from '@/components/blocks/feature-terminal-rows'

Exampletsx

import { FeatureTerminalRows } from '@/components/blocks/feature-terminal-rows'

export default function FeatureTerminalRowsDemo() {
  return (
    <FeatureTerminalRows
      eyebrow="Developer surface"
      heading="Proof lives next to the claim."
      description="Each Meridian capability ships with a command you can run. The panes below are the same CLI operators use in staging, not marketing screenshots."
      features={[
        {
          kicker: 'Replay store',
          title: 'Restore any run to the second it failed.',
          body: 'Point-in-time restore for workflow executions. Pull the full event log, re-drive side effects under a dry-run flag, and promote only when the gate clears.',
          terminal: {
            command: 'meridian replay open run_8f2c --at 14:02:11Z',
            output: [
              { text: 'snapshot  run_8f2c@14:02:11Z', state: 'muted' },
              { text: 'events    184 loaded', state: 'default' },
              { text: 'side-fx   dry-run (no writes)', state: 'success' },
              { text: 'ready     promote with --apply', state: 'success' },
            ],
          },
        },
        {
          kicker: 'Policy engine',
          title: 'Rules evaluate on every write path.',
          body: 'Declarative policies bind to resources, not dashboards. Ship a rule with the same PR as the feature it protects, the CLI shows the decision trace inline.',
          terminal: {
            command: 'meridian policy check ./rules/payments.yaml',
            output: [
              { text: 'loaded  12 rules · 3 targets', state: 'muted' },
              { text: 'trace   deny on amount > 10k without 2FA', state: 'default' },
              { text: 'result  11 pass · 0 warn · 0 fail', state: 'success' },
            ],
          },
        },
        {
          kicker: 'Agent sandbox',
          title: 'Tools run isolated, with a spend cap.',
          body: 'Every agent invocation lands in a sandboxed worker with tool allowlists and a hard budget. Exceed it and the run stops before the invoice does.',
          terminal: {
            command: 'meridian agent run draft-pr --budget 0.40',
            output: [
              { text: 'sandbox  worker-7a · tools: git,gh', state: 'muted' },
              { text: 'spent    $0.27 / $0.40', state: 'default' },
              { text: 'output   pr#1842 opened (draft)', state: 'success' },
              { text: 'status   budget remaining $0.13', state: 'success' },
            ],
          },
        },
      ]}
    />
  )
}

API reference

FeatureTerminalRows accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`*	`string`	–	–
`description`	`string`	–	–
`features`*	`FeatureTerminalRowsFeature[]`	–	–

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

Referenced types

Typestsx

export interface FeatureTerminalRowsFeature {
  title: string
  body: string
  kicker?: string
  terminal: FeatureTerminalRowsTerminal
}

export interface FeatureTerminalRowsTerminal {
  command: string
  output: FeatureTerminalRowsOutputLine[]
}

export interface FeatureTerminalRowsOutputLine {
  text: string
  state?: 'default' | 'success' | 'muted'
}

Related components

Module Tree Features

Product surface mapped as a module tree, hairline branch elbows and nested lists give React and Tailwind sites a file-tree of capabilities with real one-liners.

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 Terminal Rows 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-terminal-rows`. 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 Terminal Rows Features require?

Terminal Rows Features uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Terminal Rows 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