BlockUI

An open-source React component library. Production-ready, accessible, and themeable components installable from npm in seconds.

BlockUI

Button

Input

Modal

Card

Badge

Alert

Tooltip

Select

Button

Every frontend project starts the same way: build a button. Build an input. Build a modal, a card, a badge, a dropdown. These are solved problems, but every team solves them again in slightly different ways, producing inconsistent UIs and wasted hours.

Existing open-source libraries like shadcn/ui and MUI are excellent but opinionated. They either require specific styling systems, impose their own design language, or make it hard to extract just the components you need without pulling in the entire library.

BlockUI was built to offer something simpler: a small, well-tested set of components that you install once, use everywhere, and style to match your own design system without fighting the library.

Terminal

$ npm install @saheedibikunle/blockui

Usage

import { Button, Input, Modal } from '@saheedibikunle/blockui';

export default function App() {
  return (
    <Button variant="primary" size="md">
      Get Started
    </Button>
  );
}

BlockUI started as an internal toolkit I built at Lumina Learning. The frontend team kept duplicating component work across projects, and each version was slightly inconsistent. I extracted the common patterns into a shared library and over time it became a proper open-source package.

Building it taught me a lot about the non-obvious challenges of library authorship: how to write components that are flexible enough to be useful in any context without becoming a framework themselves, how to bundle for both CommonJS and ESM without breaking anything, and how to write documentation that makes adoption obvious rather than frustrating.

The experience also gave me genuine appreciation for the work behind libraries like Radix UI and Headless UI. Good component libraries are hard to do well. The API design matters as much as the implementation.