Components / Website

Infographic

Flat UI mock elements for Instant Strata marketing sections. Twenty-three themed illustrations across feed, metric, kanban, calendar, timeline, and stepper layouts. Compose with InfographicRow, InfographicStack, or InfographicGrid.

Installation

bash

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

Usage

tsx

import {
  InfographicScheme,
  InfographicMaintenance,
  InfographicRow,
  InfographicStack,
  InfographicGrid,
} from "@/components/ui/infographic"

// Single element: drop into a bento cell or feature section
<InfographicMaintenance />

// Side-by-side pair
<InfographicRow pill="Export">
  <InfographicCashflow />
  <InfographicBudget />
</InfographicRow>

// Vertical stack: hero sidebar or narrow column
<InfographicStack>
  <InfographicNotifications />
  <InfographicSearch />
</InfographicStack>

// Showcase grid: feature section or landing page
<InfographicGrid cols={3}>
  <InfographicBuilding />
  <InfographicCompliance />
  <InfographicOnboarding />
</InfographicGrid>

Core

Original eight illustrations: schemes, portfolio, owners, reports, finance, AI, and workflow.

Scheme

Scheme Health

Building health bar chart.

Portfolio

SP-1042

SP-0871

SP-1205

Multi-scheme occupancy bars.

Owners

Owner Portal

Lot 12

Paid

Lot 14

Due

Lot 18

Paid

Lot 22

Overdue

Owner directory with levy status.

Reports

AGM Pack

Levy Notice

Audit Summary

Report queue with trend strip.

Finance

Levy Breakdown

Q1Q2Q3Q4

Quarterly levy breakdown.

Levy Calculator

Levy input workflow.

AI Assist

Draft AGM minutes from last meeting notes…

Send noticeSchedule AGM

AI prompt with suggested actions.

Workflow

Automation

✓

Levy issued

✓

Reminder sent

Payment received

Automation pipeline steps.

Feed & inbox layout

Vertical lists with badges, avatars, and status pills: maintenance queues, communications, and notifications.

Maintenance

WO-2841

Lift inspection

High

WO-2839

Pool pump repair

Med

WO-2835

Fire door check

Low

Work order feed with priority badges.

Communications

Manager2h

AGM notice sent

System1d

Levy reminder batch

Manager3d

Lift outage update

Notice thread with sender avatars.

Notifications

Inbox

Levy payments3

Maintenance7

Owner messages2

Compliance-

Inbox categories with unread counts.

Metric & chart layout

Stat grids, sparklines, profile cards, and stacked bars: budget, cashflow, building profiles, and arrears.

Budget

Revenue

$842k

Expenses

$691k

Reserve

$151k

Variance

+4.2%

2×2 revenue, expense and variance grid.

Cashflow

$124,580+12.4%

JanFebMarAprMayJun

Balance headline with sparkline trend.

Building

Harbour View

SP-1042 · Sydney

Units

Lots

Floors

Scheme profile card with unit stats.

Arrears

0–30d

31–60d

61–90d

90d+

Aging buckets as stacked horizontal bar.

Operations layout

Kanban boards, checklists, steppers, and timelines: contractors, compliance, onboarding, and insurance.

Contractor

Contractors

Quoted

Active

Done

Mini kanban: quoted, active, done.

Compliance

Scheme compliance67%

✓

Fire safety cert

✓

Insurance renewal

Financial audit

Checklist with progress bar.

Onboarding

New Scheme

✓

DetailsLotsLeviesGo live

Horizontal scheme setup stepper.

Insurance

Building

Apr 12

Due soon

Public liability

Jun 30

Workers comp

Sep 15

Policy renewal timeline.

Governance layout

Calendars, tables, folder trees, and search: AGMs, committee votes, documents, and global search.

AGM

AGM Schedule

March 2026

AGM · 18 Mar · 6:00 pm

Calendar grid with meeting date highlighted.

Committee

MotionVote

Approve budget5–1

Lift upgrade4–2

Pool hours6–0

Motion voting table.

Documents

▼

AGM & Meetings24

▶

Financials18

▶

By-laws6

Minutes Mar 2026

Notice of AGM

Folder tree with file counts.

levy notice lot 14…

Lot 14 · Levy history

SP-1042 · Owner records

AGM 2025 · Minutes

Global search with result snippets.

Layout composition

Three wrappers for arranging infographics on landing pages and feature sections.

InfographicStack

Inbox

Levy payments3

Maintenance7

Owner messages2

Compliance-

levy notice lot 14…

Lot 14 · Levy history

SP-1042 · Owner records

AGM 2025 · Minutes

InfographicGrid · cols={3}

Harbour View

SP-1042 · Sydney

Units

Lots

Floors

Compliance

Scheme compliance67%

✓

Fire safety cert

✓

Insurance renewal

Financial audit

New Scheme

✓

DetailsLotsLeviesGo live

InfographicRow

Live

Cashflow

$124,580+12.4%

JanFebMarAprMayJun

Arrears

0–30d

31–60d

61–90d

90d+

Pairs

Pre-composed side-by-side layouts for FeatureSplit visual slots.

Scheme Pair

Export

Scheme Health

Levies

Maintenance

Compliance

Scheme health chart + metric sidebar.

Levy Pair

Levy Calculator

Q1▼

Oct–Dec

Jul–Sep

Apr–Jun

Jan–Mar

Levy calculator + quarter selector.

Chart Pair

Faceted Combo

Rows

Columns

Layers

Faceted combo chart + config sidebar.

Editor Pair

SQL Editor

12345

SQL▼

Python 3.7

Python 2.7

SQL

SQL editor + language picker.

Custom shell

Infographic shell

Custom View

With FeatureSplit

tsx

import { FeatureSplit, FEATURE_SPLIT_STRATA } from "@/components/ui/feature-split"
import { InfographicReports, InfographicAi } from "@/components/ui/infographic"

<FeatureSplit
  {...FEATURE_SPLIT_STRATA}
  topVisual={<InfographicReports />}
  bottomVisual={<InfographicAi />}
/>

Infographic Props

Prop	Type	Default	Description
title	string	-	Window title shown in the title bar.
hideTitle	boolean	false	Hide the title bar entirely.
className	string	-	Additional classes on the shell.

Layout Props

Prop	Type	Default	Description
pill	string	-	Optional floating pill on InfographicRow (Share, Export, etc.).
cols	2 \| 3	2	Column count for InfographicGrid.