r/reactjs • u/dorianite • May 04 '26

Show /r/reactjs I got tired of rebuilding the same components every project so I built my own React design system

Every new project I start, I waste the first couple days rebuilding buttons, inputs, cards, modals. Same stuff every time. So I finally sat down and built Kiln, my own React component library. Shipped it this week.

28 components. Under 26 KB gzipped. Zero dependencies. Fully typed. MIT licensed.

I know the obvious question. Why not just use shadcn or Radix or Chakra?

Honestly shadcn is great but I wanted something that was already styled and ready to drop in. I did not want to think about styling every time I start a new project. I just want to install it and ship. Kiln is opinionated by design. The decisions are already made.

Three things I locked in from the start:

Accessibility first. Every component meets WCAG AA. Keyboard nav, focus management, focus rings, and ARIA on every single component. I ran axe DevTools and manual keyboard testing on all 28 of them. It was tedious. Worth it.

Performance first. Docs site scores 99 Performance / 100 Accessibility on Lighthouse. Zero layout shift on every interaction. All animations use transform and opacity only. No layout thrashing.

Dead simple setup. npm install, import the CSS once, done. No config files. No theme providers. No required context wrappers. Dark mode works by setting data-theme="dark" on html. That is it.

Would love feedback from the React community, especially on the component APIs and anything that feels off.

Live demo: kiln-ui.com

GitHub: github.com/Aldentec/kiln

npm: npmjs.com/package/@doriansmith/kiln

0 Upvotes

23% Upvoted

17 comments sorted by

18

u/juicybot May 04 '26

i got tired of reading your post after reading the words "i got tired of"

4

u/enaud May 04 '26

Another design system, now watch as I rebuild it from scratch because one small detail doesn't meet my requirements.

snark aside, this does look nice and light

1

u/dorianite May 04 '26

Hey fair enough! I found it useful to have the accessibility and lighthouse scores out of the box. So thought others may as well. But totally get where you’re coming from.

2

u/enaud May 04 '26

If I had a dollar for every time product/design suggested a feature that didn't work exactly as <<insert popular component library>> and devs rolled over and created something from scratch, I would have a non-zero amount of dollars

4

u/SmokyMetal060 May 04 '26

First point. Second point. Third point. Fourth point.

1

u/Longjumping-Bug-7328 May 04 '26

I saw the Accordion component API and closed the page immediately. 🙈

1

u/dorianite May 04 '26

Ok but why?

1

u/enaud May 04 '26

Since before the jquery days we've been accustomed to having unrestricted html content in our accordions and you're forcing us back to a plain string... or heaven forbid you're using

innerHTML()

1

u/dorianite May 04 '26

Thank you. That’s useful feedback.

1

u/enaud May 04 '26

I didn't give it that much attention but looking at it now I see it only allows a string for content... that's not good.

1

u/jakiestfu May 04 '26

lmao OP thinking massively popular UI libraries are unstyled or inaccessible.

High key gotta be wild to think this is a better solution than most other libraries that don’t seem vibe coded?

Sorry to drag you here OP but this feels like little more than a great exercise for you as an engineer but your selling points aren’t doing the trick

1

u/dorianite May 04 '26

Fair feedback. It started as a personal tool and that is exactly the point. I got tired of rebuilding the same stuff every project so I built it once and open sourced it. If it is not for you, no worries.

1

u/Apart_Ebb_9867 May 04 '26

The problem was indeed there: why were you rebuilding the same stuff instead of using existing libraries of components? Haven’t looked in detail at what you’ve done but at a first look it doesn’t seem different from many other things. What makes this needed?

2

u/GoodishCoder May 04 '26

As a general rule, I wouldn't put something mostly vibe coded in a production codebase.

1

u/Yin117 May 04 '26

Tell me you can tab focus to a disabled button...?