oks-ui
Omkar Sahu · 2 min read
Omkar Sahu
Front-end engineer and creator of oks-ui
Omkar Sahu is a front-end engineer based in Hyderabad, India, with more than 17 years of professional experience. He spent 12 years as a senior front-end developer, designing and building websites, and has worked as a full-stack developer since 2022. He created oks-ui, a React component library with no runtime dependencies, and writes and maintains this site.
Why I built oks-ui
In my day job I built around 150 UI components from scratch, with no third-party libraries. Some time later I found that a junior developer had changed one of them to solve a problem he had that day. It worked for him, and that was the problem.
If everyone fixes things by editing the shared component, the product slowly turns into a mess where no two screens behave the same way. I started thinking about how a component library should be built so that people can adapt it without having to edit it.
That thinking became oks-ui: components you shape through props and CSS variables, not by changing their code, so one fix does not become a hundred different versions.
How the posts are written
Posts are written under this name, drafted with the help of an AI assistant, and every code sample is checked against the library. The full process, and how to report a mistake, is on How we write and test.
Elsewhere
Posts by Omkar Sahu (18)
Omkar Sahu · 2 min read
React File Upload with Size and Type Limits
Add file uploads to a React form with drag and drop, image thumbnails, a maximum size and file type, an upload progress bar and clear errors — using oks-ui's file field.formsvalidation
Omkar Sahu · 2 min read
Build a SaaS Settings Page in React
Build a complete settings screen in React — tabbed sections, profile fields, switches for notifications, a danger zone with a confirmation dialog, and a save bar that only appears when something changed.layout
Omkar Sahu · 2 min read
oks-ui 1.2 Release: New Features and Fixes
oks-ui 1.2 adds per-component imports, colour that passes WCAG AA in light and dark mode, reliable focus traps in Modal and Drawer, and a much better TextEditor. Everything new, and how to upgrade.release notestheming
Omkar Sahu · 2 min read
Reduce React Bundle Size with Per-Component Imports
Why importing from a component library's main entry can ship far more code than you use, and how oks-ui's per-component entry points cut JavaScript and CSS — with a migration checklist and the Next.js details.performance
Omkar Sahu · 2 min read
React Table with Server-Side Sorting and Paging
When data lives on the server, let the server sort and page it. Wire oks-ui's React Table to an API with controlled sorting, pagination, a result count and loading states.tablesperformance
Omkar Sahu · 2 min read
oks-ui 1.2.2 Release: Badge Numbers and a License File
oks-ui 1.2.2 fixes a TypeScript error when you pass a number to Badge, ships the MIT license file inside the package, and points the bug-report link on npm at a page that exists.
Omkar Sahu · 2 min read
React Button Component: Variants, Sizes, Loading
A practical guide to oks-ui's React Button — five variants, seven colours, six sizes, loading and disabled states, icons, icon-only buttons, links that look like buttons, and button groups.accessibility
Omkar Sahu · 2 min read
React Multi-Step Form with Progress Steps
Build a React multi-step form wizard with per-step validation, a progress header, back and next buttons, and an async check before moving on — using oks-ui's SteppedForm.formsfeedback
Omkar Sahu · 2 min read
Getting Started with oks-ui in React
Install oks-ui, load the design tokens, render your first components, switch on dark mode and theme it to your brand — a five-minute introduction to the oks-ui React component library.getting startedinstallation
Omkar Sahu · 2 min read
React Date Range Picker with Presets
Add a date range picker to a React app with quick presets like "Last month", two side-by-side months, limits on which dates can be picked, and an optional time — using oks-ui's datepicker field.formsscheduling
Omkar Sahu · 2 min read
Build an Admin Dashboard in React
Build a responsive React admin dashboard step by step — KPI cards with trends, a revenue chart, and a recent orders table — using oks-ui's Stat, Chart, Card and Table components.dashboards
Omkar Sahu · 2 min read
Accessible React Modal: Focus Trap and Escape Key
The five things an accessible React modal must do — role, focus in, focus trap, Escape and focus restore, scroll lock — with working code using oks-ui's Modal, and a 30-second keyboard test.accessibilityoverlays
Omkar Sahu · 2 min read
Build a Login Form in React with Validation
A complete React login form with email and password validation, clear error messages, password managers that still work, and a loading button — built with oks-ui's Form and FormFieldSet.formsvalidation
Omkar Sahu · 3 min read
Dependency-free drag-and-drop: inside the oks-ui Board
How Board does pointer, touch and full keyboard drag-and-drop — lift, move, drop, cancel, all announced live — with zero added dependencies.drag and dropperformance
Omkar Sahu · 2 min read
Dark mode with no flash: the data-theme init pattern
Why the classic dark-mode flash happens, the synchronous pre-hydration script that fixes it, and the three details most rewrites get wrong.dark modetheming
Omkar Sahu · 1 min read
Build a sortable, selectable data table
Search, sort, select, paginate — the admin-screen table every team hand-rolls, built from Table, Pagination and FormFieldSet with plain React state.formstables
Omkar Sahu · 2 min read