Install

#

One package, three ways to consume it.

bash

npm install github:arpitbbhayani/aui

aui/styles.css aui/react aui/astro/* aui/tokens aui/tailwind

Theming

#

Attribute- or class-driven.

html

All colors resolve through --aui-* custom properties, so any component re-themes instantly.

Blog article

#

Long-form reading: 17px prose, 70ch measure, restrained links, code, and table of contents.

Why every database writes before it writes

AB

Arpit Bhayani ·Oct 4, 2026·9 min read Databases Internals

A write-ahead log is the simplest idea in storage engineering and the one most systems get subtly wrong. Before a change touches a data page, the intent is appended to a sequential file, so a crash can be replayed instead of repaired by hand.

The contract

The rule has two halves: a page may only be flushed once its log record is durable, and a commit is only acknowledged after the log is synced. Everything else, including fsync batching and group commit, is an optimisation of those two sentences.

Durability is not a property of the disk. It is a property of the order in which you wait.

wal.append(record)      // sequential, cheap
wal.sync()              // the only expensive call
page.apply(record)      // safe to do lazily

What to measure

Sync latency at p50, p99 and p99.9, not just the mean.
Bytes written per transaction, to spot log amplification.
Recovery time after an unclean shutdown.

<div class="aui-layout-sidebar"><article class="aui-prose">…</article><TableOfContents /></div>

SaaS dashboard

#

Dense, scannable product UI: toolbar, key metrics, status table, inline alert.

99.98%

Uptime

rolling 30 days

42 ms

p99 latency

eu-west-1

1.2M

Requests / min

peak today

3

Open incidents

1 critical

Replica lag above threshold

ledger-db in us-east-1 is 240 ms behind the primary. Writes are unaffected.

Service	Region	p99	Status
api-gateway	eu-west-1	42 ms	Healthy
ledger-db	us-east-1	118 ms	Degraded
search-index	ap-south-1	67 ms	Healthy
payments-queue	eu-west-1	-	Down

<StatCard /> <table class="aui-table"> <Alert />

Colors

#

Semantic tokens. Toggle the theme to watch them swap.

primary

--aui-primary

primary-soft

--aui-primary-soft

bg-primary

--aui-bg-primary

bg-secondary

--aui-bg-secondary

bg-tertiary

--aui-bg-tertiary

text-secondary

--aui-text-secondary

text-primary

--aui-text-primary

text-muted

--aui-text-muted

border-color

--aui-border-color

border-strong

--aui-border-strong

success

--aui-success

info

--aui-info

warning

--aui-warning

danger

--aui-danger

Typography

#

Space Grotesk headings, Assistant body, system mono for data.

Heading 1 · 30

Heading 2 · 22

Heading 3 · 16

Body · 15 - The quick brown fox jumps over the lazy dog.

Small · 13 - secondary and helper text

Mono · 13.5 - SELECT * FROM users;

Lora italic - kept for pull quotes

Radius & elevation

#

Small radii, 1px borders, restrained shadows.

Radius

sm · 4

md · 8

lg · 12

Shadow

xs

md

lg

Ping status

#

Live heartbeat indicator with smooth CSS pulse.

Operational

Degraded lag

Cluster outage

Deploying

Sizes:

sm · 8px

md · 10px

lg · 12px

<PingStatus variant="success" label="Operational" />

Property grid

#

Dense inspector for infrastructure entities with click-to-copy.

Cluster ID

cls_01HX98Z

Region

eu-west-1 (Ireland)

Kubernetes

v1.31.2-eks

VPC CIDR

10.140.0.0/16

TLS Version

TLS 1.3 (X25519)

<PropertyGrid items={[…]} />

Diff block

#

Unified git patch block with syntax additions and deletions.

migrations/0042_cluster_status.sql

+2-1

... ...@@@ -12,7 +12,8 @@

1 1 id: uuid PRIMARY KEY,

2 2 created_at: timestamp NOT NULL DEFAULT now(),

3 -status: varchar(32) DEFAULT 'pending',

3+status: cluster_status NOT NULL DEFAULT 'provisioning',

4+replicas: integer NOT NULL DEFAULT 3,

4 5 region: text NOT NULL

<DiffBlock file="migrations/0042.sql" diff={…} />

File tree

#

Interactive, collapsible directory and file hierarchy.

src

components

Button.tsxReact

DiffBlock.tsxReact

PingStatus.astroAstro

styles

tokens.css

components.css

index.ts

package.json0.1.0

tsconfig.json

README.md

<FileTree data={[…]} />

Package manager

#

Multi-manager installer switcher with click-to-copy.

pnpm add github:arpitbbhayani/aui

<PackageManager pkg="github:arpitbbhayani/aui" />

Button

#

High-precision tactile variants, sizes and states.

Variants

Sizes

Colors (Solid)

Colors (Soft Tint)

<Button variant="primary" size="md">Deploy</Button>

Segmented control

#

Mutually exclusive view switcher.

view = table

<SegmentedControl options={[…]} onChange={setView} />

Kbd

#

Keyboard shortcuts.

Open command menu ⌘K

Save CtrlS · Close Esc

Navigate ↑↓ then Enter

<Kbd keys={["⌘", "K"]} />

Tooltip

#

CSS-only, shows on hover and focus.

<Tooltip content="Copy to clipboard">…</Tooltip>

Theme toggle

#

Persists to localStorage.

Click to switch light / dark

<ThemeToggle />

Input

#

Label, shortcut hint, helper and error text.

Search

⌘K

Fuzzy matches components and tokens

API key

Key must be 32 characters

<Input label="Search" shortcut="⌘K" />

Select & textarea

#

Region

Notes

<Select label="Region" options={[…]} />

Search box

#

Debounced search input with shortcut hint and live results dropdown.

<SearchBox placeholder="Search writings and topics…" shortcut="⌘K" />

Switch & checkbox

#

<Switch label="Auto-deploy" defaultChecked />

Alert

#

Inline, status-tinted.

Heads up

Schema migration scheduled for 02:00 UTC.

Deployed

build #4821 is live in all regions.

Degraded

Replica lag above 200 ms in eu-west-1.

Failed

Health check timed out after 30 s.

<Alert variant="warning" title="…">…</Alert>

Toast

#

Transient, stackable messages.

Deployed to production

build #4821 · 38s

Build failed

exit code 137 (OOM)

<Toast variant="success" title="Saved" onClose={…} />

Progress

#

Uploading assets 72%

Tests passed 100%

Migration 38%

Disk usage 86%

<Progress value={72} label="Upload" showValue />

Spinner & skeleton

#

Loading states.

Fetching metrics…

<Spinner size="lg" />   <Skeleton height={12} />

Modal

#

Esc and backdrop close. Locks scroll.

<Modal isOpen={open} onClose={…} title="…" footer={…} />

Empty state

#

No deployments yet

Connect a repository to ship your first build.

<EmptyState title="No deployments" description="…" />

Badge

#

Tags, statuses and counts.

Default Primary Dark Light Link →

red blue violet green amber pink cyan

<Badge variant="green">Healthy</Badge>

Avatar

#

AB

JS

AB

CD

EF

+4

<Avatar src="…" size="md" />   <AvatarGroup>…</AvatarGroup>

Stat card

#

99.98%

Uptime

rolling 30 days

42 ms

p99 latency

eu-west-1

1.2M

Requests / min

peak today

0

Open incidents

all clear

<StatCard value="99.98%" label="Uptime" />

Table

#

Typed columns, sortable headers, dense toggle, custom renderers.

Service	Region	p99	Status
`api-gateway`	eu-west-1	42 ms	Healthy
`ledger-db`	us-east-1	118 ms	Degraded
`search-index`	ap-south-1	67 ms	Healthy
`payments-queue`	eu-west-1	-	Down

<Table columns={[{ header: "Service", accessor: "service", sortable: true }, …]} dense data={rows} />

Timeline

#

2024 - now

Principal Engineer II

Agent Studio, data & applied AI.

2021 - 2024

Staff Engineer, Google

GCP Memorystore and Dataproc.

2018 - 2021

Director of Eng, Unacademy

Search, SRE and data teams 0→1.

<Timeline events={[{ date, title, body }]} />

Code block

#

Language label, line numbers, line highlighting, and one-click copy.

lock.ts

1async function acquire(key: string, ttl: number) {
2  const ok = await redis.set(key, "1", "PX", ttl, "NX");
3  return ok === "OK";
4}

<CodeBlock language="ts" filename="lock.ts" showLineNumbers highlightLines={[2]} code={…} />

Terminal

#

Commands, output, status lines.

~/ledger

go test ./... -raceok ledger/store 0.412sok ledger/replica 1.087sFAIL ledger/queue panic: send on closed channelexit status 1

<Terminal title="bash" lines={[…]} />

Breadcrumbs

#

<Breadcrumbs items={[{ label, href }]} />

Pagination

#

<Pagination currentPage={3} totalPages={7} … />

Tabs

#

Underline tabs, keyboard accessible.

Import from aui/react.

Import from aui/astro/*.astro.

Use .aui-* classes directly.

<Tabs tabs={[{ id, label, content }]} />

Accordion

#

Does it need JavaScript?

Astro components and plain CSS ship zero JS. React islands hydrate only where used.

Can I theme it?

Override any --aui-* custom property, globally or per subtree.

<Accordion items={[{ id, title, content }]} />

Sidebar & navbar

#

The sidebar on the left and the navbar above are live examples.

aui-nav-* aui-sidebar-* Sticky, scroll-spy aware, collapses on narrow screens.

<Sidebar groups={[{ title, links }]} />

Hero

#

Hey, I am Arpit

engineering, databases, and systems.

Principal engineer writing about the internals of systems that scale.

<Hero title subtitle avatarUrl>…</Hero>

Callouts

#

Maxim and takeaways.

Simplicity is a prerequisite for reliability. - Arpit Bhayani , Asli Engineering

Key takeaways

Zero-dependency core: pure CSS tokens, React, or native Astro.
Theme-first: light and dark with anti-FOUC script.
Dense by default: 15px base, compact controls, tight rhythm.

<Maxim author="…">…</Maxim>   <TakeawaysBox items={[…]} />

Notice box

#

Slides and notes live in this Drive folder ↗

HTML files: View via npx deckrun <path>
Markdown files: View presentation decks using npx deckrun <path.md>
Google Slides: Open directly in Google Slides
GoodNotes files: Load directly into the GoodNotes app
PDF files: Open in any standard PDF reader

<NoticeBox title driveUrl>…</NoticeBox>

Newsletter

#

Lead-capture callout with email input, CTA, and external platform links.

<Newsletter title="Stay in the loop" linkedinUrl="…" substackUrl="…" />

Card

#

Base surface; hover lifts border and shadow.

Hoverable

Border and shadow respond.

Static

No hover effect.

<Card hoverable>…</Card>

Social pill

#

<SocialPill platform="github" href count="7k" />

Divider

#

or continue with

<Divider label="or" />

Course card

#

System Design Masterclass

Live Cohort

Consensus, storage engines, sharding, caching and the trade-offs behind large-scale systems.

Distributed Architecture

Explore →

DiceDB

Open Source

Open-source, in-memory, real-time database with query subscriptions, built in Go.

Database Golang

View on GitHub →

<CourseCard title description badge tags … />

Cover card (og:image)

#

Precision OpenGraph cover photo for social cards and blog hero banners. Designed with standard 1200x630 aspect ratio, CAD corner crosshairs, and developer typography.

Array UI SYSTEM DESIGN

posts/distributed-kv.md DEEP DIVE

Designing a Distributed Key-Value Store

Exploring replication logs, Paxos vs Raft consensus, compaction routines, and crash recovery in production storage systems.

<CoverCard title="Designing a Distributed Key-Value Store" description="Consensus, partition tolerance, and storage layout." category="SYSTEM DESIGN" path="posts/distributed-kv.md" badge="DEEP DIVE" author={{ name: "Arpit Bhayani", handle: "@arpit · Principal Engineer" }} tags={["raft", "consensus", "go"]} readingTime="12 min read" date="Oct 2026" theme="dark" pattern="dots" />

Next.js / React

#

App Router and Pages Router.

app/layout.tsx

import "aui/styles.css";
import { ThemeProvider, ThemeScript } from "aui/react";
 
export default function Root({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head><ThemeScript /></head>
      <body className="aui-body">
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Astro

#

Zero client JS for native components.

Layout.astro

---
import "aui/styles.css";
import ThemeScript from "aui/astro/ThemeScript.astro";
import Navbar from "aui/astro/Navbar.astro";
---
<html lang="en">
  <head><ThemeScript /></head>
  <body class="aui-body">
    <Navbar brandName="my app" />
    <slot />
  </body>
</html>

Plain CSS

#

Any framework, or none.

html

<link rel="stylesheet" href="node_modules/aui/dist/styles.css" />
<body class="aui-body">
  <button class="aui-btn aui-btn-primary aui-btn-md">Deploy</button>
  <span class="aui-badge">beta</span>
</body>

Don’t use this design system.

[00] Getting started

[01] Patterns

Why every database writes before it writes

The contract

What to measure

Services

[02] Foundations

[03] Developer Primitives

[04] Actions

[05] Forms

[06] Feedback

No deployments yet

[07] Data display

Principal Engineer II

Staff Engineer, Google

Director of Eng, Unacademy

[08] Navigation

[09] Content

Hey, I am Arpit

engineering, databases, and systems.

Stay in the loop

System Design Masterclass

DiceDB

Designing a Distributed Key-Value Store

[10] Usage & Frameworks