Everything Inside Akoti: Components, Icons, Documents, and AI

The full inventory.

Akoti started as design tokens for one project. It now ships 20+ production-ready components, 70+ icons, a document engine, and four AI chat layouts. Here is everything that is in the box, and how each piece came to be.

CSS-first components

I was debugging a dropdown menu — 120 lines of JavaScript — when I deleted it and replaced it with a native <details> element and 15 lines of CSS. It worked on every browser, every device, with full keyboard accessibility. That was the moment: CSS first, JavaScript only when necessary.

Accordion v2: Zero JS. Uses <details name> for exclusive sections. The browser handles mutual exclusion. CSS handles the mud-brick radius flip and pillar accent animation.

Modal v2: Zero JS. Native <dialog> with the Invoker Commands API. Entry animation via @starting-style. Backdrop blur is pure CSS.

Tabs v2: Zero JS. Radio buttons with labels. Three visual styles — underline, pills, cards — are CSS class variants.

Toast v2: 55 lines of JavaScript for the timer and dynamic creation. Animation, positioning, stacking, progress bar: all CSS. The v1 was 200+ lines.

Interactive components

For things that genuinely need JavaScript — searchable dropdowns, date pickers, command palettes — we write minimal JS with maximum CSS.

Dropdown: Single or multi-select, searchable, grouped options, tag display. Keyboard-navigable.

Date Picker: Six date formats, range mode, Yoruba language support. Fixed positioning so it escapes any overflow container.

Drilldown: Hierarchical selector for Chart of Accounts, State/LGA/Ward, or any tree structure. Lazy loading via API. Breadcrumb navigation. Search across levels.

Command Palette: Ctrl+K opens fuzzy search across commands. Keyboard navigation, recent commands in localStorage.

70+ SVG icons

Material Symbols is a 2MB font file. Our icon set — all 70+ icons, CSS, and JavaScript — weighs 30KB. That is 1.5% of Material Symbols.

Every icon: 24x24 viewBox, 2px stroke, monochrome (currentColor), stroke-only. Drop two files, call AkotiIcons.init(). A MutationObserver handles dynamically added elements — no manual re-init for HTMX or Alpine.

We built icons for what our products actually need: navigation, finance (including a naira sign), agriculture, documents, actions, status indicators. Not thousands of generic glyphs — just what matters.

The document engine

A client asked: "Can I draft a contract, send someone a link, let them edit it, see what they changed, and then we both sign it?"

We built it as four composable components:

Rich Text Editor: Four modes — Editing, Read-only, Review (track changes visible), and Contract (curated toolbar). Font and size selection, PDF export, embedded signatures.

Signature Pad: Draw with your finger or type your name. Auto-crops whitespace using pixel scanning. Exports as PNG.

Document Signing: Authentication gate, read-only viewer, signature capture, confirmation. No account creation needed.

Stealth tracking: The reviewer sees a normal editor. They edit freely — no green highlighting, no red strikethrough. But we store the original. When they submit, the Diff Engine compares both versions word by word and produces tracked-changes markup. The reviewer never felt watched. The creator sees everything.

An AI Summary button produces a natural language breakdown of all changes. If you have an AI endpoint, it sends the diff for deep analysis. If not, it generates a local summary.

AI chat — four layouts

The original chat used textContent — every AI response rendered as plain text. Asterisks, backticks, raw markdown. I rebuilt it from scratch with a proper markdown renderer, streaming support, and action buttons.

Four layouts share one rendering engine: Inline (embedded in the page), Floating (corner bubble), Side Panel (full-height slide-in), Popup (centered modal). Every AI message gets Copy, Regenerate, and Like/Dislike buttons on hover. User messages get Copy and Edit — edit a sent message, and the conversation continues from the edit.

Data components

Data Table v2: CSS variants directly on the <table> element. Search without losing cursor focus — the toolbar is built once, never destroyed.

DB Spreadsheet: Database-connected sheet for accounting. Currency formatting, required field validation, auto-balance checking (debit must equal credit). Edit/view mode toggle via CSS class — no DOM rebuild.

What is coming next

Canvas-based charts (no Chart.js dependency). Calendar and scheduler views. Kanban board for workflow tracking. Native PDF renderer with headers, footers, and watermarks. Voice transcription via Web Speech API.

And the first production deployment: Agrovisus, our 270-template agricultural ERP. Four CSS link tags in base.html. 100% class coverage verified. Instant rollback by deleting the tags.

We are building in public. Follow the lab.