Components / Website

Statement

An oversized editorial statement: the closing-manifesto pattern. A bold display headline making a single claim, with an optional cycle-loop diagram and dual CTAs.

With cycle diagram

The platform

The cycle of ad hoc analysis to self-serve reporting and back again? It all happens in Instant Strata.

Try for free Request demo

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/statement/registry.json

Usage

tsx

import { Statement, StatementAction } from "@/components/ui/statement"

<Statement
  eyebrow="The platform"
  cycle={{ from: "Ad hoc analysis", to: "Self-serve reporting" }}
  actions={
    <>
      <StatementAction href="/signup">Try for free</StatementAction>
      <StatementAction href="/demo" variant="outline">Request demo</StatementAction>
    </>
  }
>
  The cycle of ad hoc analysis to self-serve reporting and back again?
  It all happens in <em>Instant Strata</em>.
</Statement>

Accent a word with <em>:

tsx

{/* Wrap a word in <em> to accent it (not italicised) */}
<Statement>
  It all happens in <em>Instant Strata</em>.
</Statement>

Background types

Reporting that writes itself, so your team can get back to the analysis.

Why Instant Strata

Every building, every levy, every owner, in one workspace.

Statement Props

Prop	Type	Default	Description
children	ReactNode	-	The statement headline. Wrap words in <em> to render them in the accent colour (not italicised).
eyebrow	string	-	Small all-caps label above the headline.
body	string	-	Supporting paragraph beneath the headline (and cycle, if present).
cycle	{ from: string; to: string }	-	Renders a cycle diagram: two labelled nodes joined by looping arrows that return to the start.
actions	ReactNode	-	Call-to-action buttons. Use StatementAction for brand-styled primary/outline links.
type	"primary" \| "alternative" \| "default"	"primary"	Background scheme: primary (forest + white), alternative (lime-soft + forest), default (white + forest).