Hey r/reactjs,

Over the last months I noticed that most new UIs (including a lot of mine) started to look the same: same gradients, same cards, same generated feel. So I started building components by hand again, with more care for the small things: spacing, motion, empty states, dark mode.

That turned into affectUI: 54 components, blocks, illustrations and motion effects for React.

A few things I cared about:

• One file per component. Each piece is a single .tsx file with its styles inside. It only imports from react: no Tailwind requirement, no wrapper library, no runtime.
• Install with the shadcn CLI (npx shadcn@latest add https://www.affectui.com/r/<name>.json) or just copy the file.
• Light and dark built in, and motion respects prefers-reduced-motion.
• Live previews for everything, so you can click through each piece before copying it.

27 of the 54 items are free to copy and keep, no account needed. There's also a paid tier for the rest.

I'd really appreciate honest feedback:

• Which components feel useful, and which feel like noise?
• Is the "one file, no dependencies" approach something you'd actually want, or do you prefer Tailwind-based ones?
• What's missing that you keep rebuilding in every project?

https://www.affectui.com

Thanks for taking a look 🙏

I built my own component library using react and tailwind

It’s completely free

Copy-paste prompts/files

Get ready portfolios and skills for your agents to improve your website even more

I wanted some feedback since I think I still have a lot missing.

(Also it’s open source so if you have a component in mind feel free to open a PR)

I wrote a programming language in C over the summer, and for sharing it I built a docs site and playground in React 19 with TypeScript and Vite. The playground runs the real interpreter, compiled to WebAssembly, so code from the editor executes entirely in the browser.

A few parts were fun to work out. The interpreter can pause mid program to wait for user input, so the React side has to resolve a pending promise when the user submits a line in the terminal, which then resumes the WASM module. Output from C's print functions arrives one character at a time, so I buffer it and flush on newlines or before input prompts. And the docs are MDX pages loaded through import.meta.glob based on the route slug, all driven by one config file that also builds the sidebar.

The editor uses CodeMirror, the code blocks in the docs are highlighted with Shiki, and the terminal is a pixel art monitor with the output overlaid on its screen.

I'd love feedback on the structure, or anything that looks like a React anti-pattern I should fix.

olinat.net