I got tired of bloated React libraries, so I built two tiny ones

#react #typescript #webdev #ux

I've been building React apps for years, and two things kept frustrating me:

Every animation library I tried was either too heavy, caused unnecessary re-renders, or was painful to sequence. And every date picker pulled in date-fns or moment.js just to format a date.
So I stopped looking and started building. The result is ReactZero — a family of zero-dependency React primitives that are tiny, accessible, and easy to drop in.

Here's what I've shipped so far:

@reactzero/flow — animation orchestration for React

Most animation libraries in React drive animations through state, which means every frame triggers a re-render. @reactzero/flow skips all of that by running animations directly on the browser's compositor thread via the Web Animations API.

The API is built around composable primitives:

import { useSequence, animate } from "@reactzero/flow";

function Card() {
  const box = useRef(null);

  const { play } = useSequence([
    () => animate(box.current, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 }),
    () => animate(box.current, [{ transform: "translateY(8px)" }, { transform: "translateY(0)" }], { duration: 200 }),
  ]);

  return <div ref={box} onClick={play}>Click me</div>;
}

A few things I haven't seen done well elsewhere:

Adaptive degradation: automatically slows or skips animations based on device capability and frame rate
True cancellation: finished always resolves, never rejects. No try/catch needed
Scroll-driven animations: uses native ScrollTimeline when available, with a clean fallback
Reduced motion: provider-level policy system (skip, reduce, crossfade, respect)

npm install @reactzero/flow

🔗 GitHub · Docs

@reactzero/datepicker — accessible date picker, no date library required

12KB gzipped. Zero dependencies. WCAG 2.1 AA.
I tried every popular React date picker and they all shared the same problems: heavy dependencies, hard to customize, and accessibility treated as an afterthought.

@reactzero/datepicker uses only native Intl and Date APIs — no date-fns, no moment, nothing extra.

import { DatePicker } from '@reactzero/datepicker';
import '@reactzero/datepicker/styles';

function App() {
  const [date, setDate] = useState(null);
  return <DatePicker value={date} onChange={setDate} placeholder="Select date..." />;
}

If you want full control over the UI, the headless hooks give you complete ARIA compliance without any of the default styles:

import { useDatePicker } from '@reactzero/datepicker';

function MyDatePicker() {
  const { state, isOpen, getGridProps, getCellProps, getTriggerProps } =
    useDatePicker({ locale: 'en-US' });

  // Build whatever UI you want
}

Ships with 10 built-in themes, 3 density modes, range picker, datetime picker, RTL support, and keyboard navigation out of the box.

npm install @reactzero/datepicker

🔗 GitHub · Live Demo

The idea behind ReactZero

Both packages share the same philosophy: zero runtime dependencies, small bundle, accessible by default, easy to style.

I'm planning to keep adding primitives to the family under that same promise.

If either of these solves a problem you've had, a ⭐ on GitHub goes a long way — it helps other developers find them.

And if you run into anything broken, unexpected, or just have feedback — issues and PRs are very welcome. This is early and I genuinely want to know how it holds up in real projects.

Thanks for reading 🙏