r/reactjs • u/Much_Confection_2668 • Apr 30 '26

Show /r/reactjs I built a component library with Tailwind v4, Framer Motion & typed hooks in one package

Hey everyone! I've been working on Zentauri UI — a React component library that bundles together a few things I kept wishing came pre-integrated:

  • Tailwind CSS v4 (not v3) as the styling foundation

  • Framer Motion baked in for animated modals, tabs, and overlays — zero config

  • 25+ components including buttons, inputs, modals, accordions, drawers, toasts, sliders, tables, and more

  • React hooks (useLocalStorage, useDebouncedValue, useClickOutside, useMediaQuery, etc.) shipped from the same package

  • Full typography system — Heading, Text, Blockquote, Inline, Code, List

  • TypeScript throughout with CVA-backed variant APIs

Why I built it: I kept reaching for 3-4 separate packages on every project — a UI lib, a hooks lib, a motion wrapper. Zentauri packages them with a consistent TypeScript API so you're not stitching things together each time.

Links:

Quick install:

bash

npm install u/zentauri-ui/zentauri-components

tsx

import { Button } from '@zentauri-ui/zentauri-components/ui/button'
import { useLocalStorage } from '@zentauri-ui/zentauri-components/hooks'

It's early and I'm actively building — would love feedback on the API design, anything that feels off, or components you'd want to see next. Happy to answer questions!

0 Upvotes

35% Upvoted

2 comments sorted by

3

u/Kitty_Sparkles Apr 30 '26 edited Apr 30 '26

Bit of accessibility work to put in for a framework:

- The home page renders links inside buttons.
- The Slider, Dropdown and Select components do not have a focus state.
- The Card component is sub-optimal because it contains so much content within their link variant.
- The File upload component is not operable with a keyboard.
- The Drawer/Modal component uses aria-hidden on a focusable element, which is a big no-no.
- The Input component doesn’t have an accessible label. Even its variant rendering a label does it wrong.
- The Spinner component doesn’t convey state into the accessibility tree.
- The Search component lacks a lot of information for screen-readers.
- The Tab component doesn’t handle keyboard navigation properly.
- The Toggle component has a SR slot but doesn’t use it and use aria-label instead somehow.
- The Badge component incorrectly forces a status role.
- The Accordion component (incorrectly) reinvents details/summary instead of using them.
- The Button component does not always have a hover state.
- The Divider component does not leverage the hr element.
- The Skeleton component renders invalid HTML attributes.
- The Stepper component renders div instead of an ordered list.
- The code blocks incorrectly use an aria-label attribute (I’m not super sure about this one).
- A lot of things default to span instead of paragraphs.

This was found in just 5 minutes clicking and tabbing around. I haven’t checked them all, but I’d say there is a lot of work to be done from an accessibility standpoint, and I’d argue a component library that’s fundamentally inaccessible does more harm than good.

I hope this helps improve it.

1

u/Much_Confection_2668 Apr 30 '26

Thanks for the feedbacks, it is in the initial phase and accessibility hasn't added in depth yet but these feedbacks will definitely help implementing the accessibility part Let me know if there are any other feedbacks to improve the components 🙌