Skip to content
oks-ui

Blog

Tutorials and engineering notes from the oks-ui team.

Omkar Sahu · 8 min read

Drawing charts in React with no charting library

How a chart is drawn as plain SVG in React: scales, ticks and paths in 60 lines, and what a real chart gets wrong, reproduced on three oks-ui versions.chartsengineering
Omkar Sahu · 8 min read

A zero-dependency React rich text editor: what broke

How the oks-ui TextEditor was built with no dependencies, what broke along the way, and how each problem was measured on 1.1.2, 1.2.2 and 1.4.1.text editorengineering
Advertisement
Omkar Sahu · 9 min read

An accessibility audit of oks-ui: what is still open

What axe-core, a keyboard-only pass and seven oks-ui versions found: what 1.2 and 1.3 fixed, and the problems that are still open.accessibilitytesting
Omkar Sahu · 8 min read

React Modal guide: sizes, closing and backdrop, tested

A guide to the React Modal: sizes, confirmations, forms and closing, tested in three browsers, with two unit traps and the dismissible gotcha found.accessibilityoverlays
Omkar Sahu · 9 min read

Build a file upload field in React, tested in three browsers

A React file upload field with drag and drop, size and type limits, tested in three browsers, with the ignored limit props and the missing import found.formsvalidation
Advertisement
Omkar Sahu · 9 min read

Build a SaaS settings page in React, tested in three browsers

A SaaS settings page built with oks-ui and tested in three browsers, with four fixes: the toast, the delete dialog, the save bar and dark-mode text colour.layout
Omkar Sahu · 9 min read

oks-ui 1.2: what changed and why, measured against 1.1.2

What changed in oks-ui 1.2 and why: bundle size, WCAG contrast, focus traps and the TextEditor, with 1.1.2 and 1.2.0 measured side by side.release notestheming
Omkar Sahu · 6 min read

Per-component imports in oks-ui: what they really save, measured

We measured oks-ui two ways. JavaScript is identical whether you import from the main entry or per component; CSS is where per-component imports save.performancecss
Omkar Sahu · 8 min read

React server-side sorting table, tested in three browsers

A React table with server-side sorting and paging against a real API, tested in three browsers, with a missing loading state fixed and the API advice checked.tablesperformance
Omkar Sahu · 6 min read

oks-ui 1.2.2: what changed and why, checked against 1.2.1

What changed in oks-ui 1.2.2 and why: the Badge number type error, the missing MIT license file and the dead bug link, checked against 1.2.1.
Omkar Sahu · 9 min read

React Button guide: variants, sizes and loading, tested

A guide to the React Button's variants, sizes, loading and links, tested in three browsers: contrast measured across 210 combinations, four claims corrected.accessibility
Omkar Sahu · 8 min read

Build a multi-step form in React, tested in three browsers

A React multi-step form with per-step validation, tested in three browsers, with two wrong claims fixed and three gaps found in oks-ui's SteppedForm.formsfeedback
Omkar Sahu · 9 min read

Getting started with oks-ui in React, tested from scratch

Getting started with oks-ui, run on fresh Vite and Next.js apps in three browsers, with the broken code, the CSS import trap and dark mode fixed.getting startedinstallation
Omkar Sahu · 8 min read

Build a date range picker in React, tested in three browsers

A React date range picker with presets, limits and time, tested in three browsers and time zones, with what each preset gives and the keyboard gaps found.formsscheduling
Omkar Sahu · 9 min read

Build an admin dashboard in React, tested in three browsers

An oks-ui admin dashboard tested in three browsers, with a missing import fixed and a dark-mode bug and two contrast gaps found in the library.dashboards
Omkar Sahu · 7 min read

Accessible React Modal: Focus Trap and Escape Key

The five things an accessible React modal must do, tested in Chromium, Firefox and WebKit with oks-ui's Modal, plus a 30-second keyboard test.accessibilityoverlays
Omkar Sahu · 8 min read

Build a login form in React, tested in three browsers

A React login form with validation, autofill and a double-submit guard, tested in three browsers, with one wrong claim fixed and two library gaps found.formsvalidation
Omkar Sahu · 7 min read

Drag-and-drop in the oks-ui Board, tested in three browsers

Board's mouse, touch and keyboard drag-and-drop tested in Chromium, Firefox and WebKit, with the gaps I found and a script to check your own board.drag and dropperformance
Omkar Sahu · 6 min read

Dark mode with no flash, tested in three browsers

A synchronous script in the head stops the dark-mode flash. Tested in Chromium, Firefox and WebKit, including a bug found on this site and two corrected claims.dark modetheming
Omkar Sahu · 8 min read

Build a sortable React data table, tested in three browsers

A React data table with search, sort, selection and paging, tested in three browsers, with the sort and search bugs in the first version fixed.formstables
Omkar Sahu · 9 min read

Theme oks-ui to your brand, tested in light and dark

How to theme oks-ui to your brand, tested in light and dark, with the shades components really read and the first version's broken hover and dark mode.themingdesign tokens