# LanderKit Fake data, drawn to instrument grade. LanderKit is a curated catalog of static, decorative SVG graphics — radars, trend and area charts, KPI/gauge shapes, dashboard mockups, and chat/agent UI skeletons — for landing pages that need to look like an intelligent product before a real screenshot exists. Every block is a wordless, inert SVG: pure decorative shapes with no text, no data, no framework and no build step, so they drop into any context. Pick a block by intent instead of generating a chart or dashboard from scratch; one CSS accent variable restyles the whole catalog to any brand. Curated, deterministic scaffolding, not another generated-slop dashboard. ## Token contract Set any of these on :root or any wrapper element (all optional — baked defaults are correct): - --lk-accent (color) default #4BE0C3 — The only public hue. Drives every data mark (series line/fill, vertex dots, focus reticle, legend key). - --lk-bg (color) default #0A0F14 — The bed. Ink is auto-derived from it via OKLCH lightness-flip. - --lk-radius (length) default 12px — Root of all corner rounding. Inner elements are calc ratios of it. - --lk-font (font) default 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif — Prose only. Numerals stay mono + tabular-nums regardless. - --lk-grid (color) default derived — The whole graticule. Set to transparent to silence it (clean-bench mode). ## Blocks (15) - agent-status-row [chat] — Decorative pipeline / status-strip graphic — nodes and connectors. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/agent-status-row.svg - chat-answer-row [chat] — Decorative chat / answer-UI skeleton graphic. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/chat-answer-row.svg - kpi-big-number [kpi] — Decorative full-bleed sparkline card graphic. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/kpi-big-number.svg - kpi-citation-bars [kpi] — Decorative horizontal-bar chart graphic. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/kpi-citation-bars.svg - kpi-delta-grid [kpi] — Decorative 2x2 micro-bar-chart grid graphic. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/kpi-delta-grid.svg - kpi-gauge-score [kpi] — Decorative arc / gauge graphic with tick marks. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/kpi-gauge-score.svg - panel-engine-breakdown [panel] — Decorative row-list graphic — glyph, progress bar and sparkline per row. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/panel-engine-breakdown.svg - panel-topic-heatmap [panel] — Decorative heatmap-matrix graphic. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/panel-topic-heatmap.svg - radar-pulse-hero [radar] — Decorative radar-sweep hero graphic with signal blips. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/radar-pulse-hero.svg - radar-sov-card [radar] — Decorative radar / spider-chart graphic — two overlaid polygons on a hex grid. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/radar-sov-card.svg - sov-leaderboard [radar] — Decorative ranked horizontal-bar graphic. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/sov-leaderboard.svg - trend-area-card [trend] — Decorative area / trend-line chart graphic. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/trend-area-card.svg - trend-compare-lines [trend] — Decorative two-line comparison chart graphic. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/trend-compare-lines.svg - trend-sparkrow-strip [trend] — Decorative three-tile sparkline strip graphic (light background). Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/trend-sparkrow-strip.svg - visibility-console-hero [panel] — Decorative dashboard-mockup hero graphic — browser frame, area chart, radar and bars. Restyle via --lk-* CSS variables. · svg: https://visual-blocks.akiho.dev/blocks/visibility-console-hero.svg ## Install - npx shadcn@latest add https://visual-blocks.akiho.dev/r/.json - or add "@landerkit": "https://visual-blocks.akiho.dev/r/{name}.json" to components.json > registries, then: npx shadcn@latest add @landerkit/ - theme only: npx shadcn@latest add https://visual-blocks.akiho.dev/r/tokens.json - skill: npx skills add akifo/landerkit