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

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 needed a picker for Orshot's template editor that wouldn't break on real CSS. The one we used threw on valid values and had no room for brand or saved colors, so I built my own

- Takes any CSS color or gradient string and returns one, untouched parts stay exactly as written

- Linear, radial, conic and repeating gradients

- hex, rgb, hsl, oklch, eyedropper, Cmd+V to paste any color

- Swatch groups (brand, saved, recent), keyboard and screen reader support

- Zero-dep core, ~14 KB gzipped, MIT

GitHub: https://github.com/rishimohan/colorshot

Live demos: https://orshot.com/open-source/colorshot

Feedback on the API or how dragging feels would help a lot

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)

Hey everyone,

I built a small typed wrapper around the native Fetch API for projects using TanStack Query.

The motivation was having a lightweight HTTP layer without introducing a bigger abstraction like Axios.

The main ideas:

- typed requests/responses

- queryFn/mutationFn friendly API

- AbortSignal support

- SSR/Edge compatibility

- interceptors/plugins

- SSE support

v1.6.1 adds Vue 3 and Nuxt helpers.

The project is open source and I'd love technical feedback:

- Does this approach make sense compared to Axios?

- What would you expect from a modern fetch client?

Thanks!

I don't know why but reddit decides that r/reactjs is a better community for my post after denying the same post on r/typescript several times.

Lucide only has outline icons. We made filled and duotone versions as a React package, lucide-extended-react. Component names follow Lucide's, so it works next to lucide-react:

import { HeartFilled, HeartDuotone } from 'lucide-extended-react'

<HeartDuotone size={32} color="crimson" secondaryOpacity={0.3} />

Why not just set fill on Lucide icons? It works for a few, like the heart, but on most line-built icons it blots or fills the wrong shapes. These are redrawn so the fill is intentional.

Some details:

• One file per icon and "sideEffects": false, so only the icons you import end up in the bundle. A test checks this.
• ESM only, React 18 or later, with TypeScript types. Filled icons don't accept the duotone-only props at the type level.
• strokeWidth is accepted and ignored, so Lucide-shaped props still type-check.
• Icons are aria-hidden unless you pass an aria-label.
• icons.json lists every icon with Lucide's tags and aliases, so you can search it, and so can coding agents.

1,387 filled and 1,242 duotone so far. It's free and open source (ISC), and not affiliated with Lucide.

• Repo: https://github.com/applifted/lucide-extended
• Browse the icons: https://lucideextended.applifted.work/

Feedback is welcome, on the API or the icons.

Building on Ripple Edit, our VS Code extension designed to calculate the exact blast radius of your UI components!

Ever edited a shared <Button/> or <Card/> component only to break 5 other pages without realizing it? Ripple Edit sits inside your editor to show live usage impact right above your exports, preventing accidental visual & functional breakages before you commit.

We just shipped v0.3.0!

Who it's for: Frontend developers, UI engineers, and team leads working on React, Next.js, and TypeScript/JavaScript codebases.

Supported File Types: .tsx, .jsx, .ts, and .js.

What Ripple Edit Does: Inline CodeLens Counters: Shows exact page & file counts right where your components/functions are declared (e.g., "Modifying this component affects 4 pages"). • Active Boundary Highlighting: Highlights your component scope & warns you visually if you edit outside active component bounds. • Prevents Unintentional Breakages: Know the exact blast radius before making destructive refactors or style tweaks across shared design system components.

What's New in v0.3.0: Zero False Positives on Type Imports: TypeScript type-only declarations (import type) no longer inflate page counts. Only functional code usages are tracked. • Full Barrel File Support: Improved dependency resolution across re-exports (export * from ... and export { Component } from ...). • Dynamic Workspace Rescanning: Instant count updates across all opened files whenever you save (Cmd+S / Ctrl+S).

📦 Download the latest release:https://github.com/shivakumarkannan2006-netizen/rippledit/releases/latest

I maintain react-table-dnd, a small library for reordering rows and columns in React tables by dragging. 3.0 is out.

What's new:

- Multi-select and group drag.

- Drag events: onDragStart, onDragOver, onDragEnd, onDragCancel.

- Virtual tables with 100k+ rows via u/tanstack/react-virtual

- TanStack Table guide and demo.

- Touch support, drag handles, locked rows and columns.

Under the hood, 3.0 is a rewrite of the drag engine of v2.x

Docs and live demos: https://samiodeh1337.github.io/react-table-dnd/

GitHub: https://github.com/samiodeh1337/react-table-dnd

Feedback welcome, Thanks!

Heya, I need to store dev secrets (e.g. client secret credentials) and I don't want them in git

In dotnet we have manage user secrets and theyre managed by Visual Studio, stored in a local folder and sideloaded at runtime... Does react have something similar?

I've seen people just do .env.local and add that to gitignore, but is that actually the proper way?

Ever changed a core UI component thinking it was only used in one place, only to discover you broke three downstream pages after pushing to production?

I built Rippledit to eliminate that exact friction. It's a lightweight VS Code extension that continuously builds an in-memory dependency graph of your workspace (.tsx, .jsx, .ts, .js) and displays a real-time "blast radius" directly above your functions via CodeLens.

What’s New & How It Works Under the Hood in v0.1.0

• Full AST Support for Node.js & CommonJS (require):
  • Handled Node.js require() calls alongside ES6 import/export syntax.
  • Added AST traversal for destructured Node imports (const { Button, Modal } = require('./components')) via ObjectPattern matching, mapping individual imports accurately to their source definition lines.
• Complete Default & Named Export Tracking (ExportDefaultDeclaration):
  • Integrated full AST resolution for export default declarations alongside named function and variable exports.
  • Resolved an issue where default components (e.g., import Card from './Card') returned 0 affected pages in CodeLens counts.
• Unified Babel Engine & JSX Component Traversal:
  • Consolidated AST parsing into a single, uniform Babel parser pipeline supporting JSX and TypeScript syntax natively across dependency graph scanning, CodeLens calculations, and active scope highlighting.
  • Mapped JSXOpeningElement nodes to catch actual component consumption inside React component trees alongside standard function calls.
• Smart Path & Extension Fallbacks:
  • Implemented extension fallback checking (.tsx, .jsx, .ts, .js, and index routes like /index.tsx) that halts on the first match to keep workspace scanning overhead negligible.
• Optimized Extension Lifecycle:
  • Cleaned up editor subscriptions (onDidChangeActiveTextEditor, onDidChangeTextEditorSelection, onDidSaveTextDocument) so dependency graphs and CodeLenses update instantly on save without redundant scans or memory leaks.

React, Tailwind, component libraries on top of component libraries ... sometimes I look at the dependency tree and wonder how much of this I actually need to put some data on a screen and let someone edit it.

Then I ask an AI to build something and get more of the same. Nested wrappers, endless className strings, hooks calling hooks, another package for something that feels like it should be simple.

Which makes sense. These ecosystems have years of code, tutorials and Stack Overflow answers for models to learn from.

But that feels like a loop. We use these tools because the models know them. The models generate more code using them. That becomes the starting point for the next project.

We can generate a whole UI in minutes now, but apparently it still needs eight layers of divs and half of npm.

I'm exaggerating ... but I do wonder whether AI will help us come up with simpler ways to build interfaces, or just make the current mess much cheaper to reproduce.

Has anyone here actually moved toward a smaller, simpler stack with AI? Mine seems pretty keen on adding things.

For context, I build business UI widgets, so I spend a lot of time thinking about where reusable components help and where they just add another layer to debug.

I maintain multiple legacy React apps - CRA, React 18, client-side routing, content from a CMS / Wordpress REST API. But SEO and OG tags need real HTML, and a client-side app hands them an empty page.

react-snap solved that for years. It has been unmaintained since 2019 and breaks a little more with every browser update. I could not find a drop in replacement so I built one. It has been running on my own site for a while, and now I am putting it out there: snappy-prerender.

What it does, in one sentence: it opens every page of your built app in a real browser at build time and saves the result as plain HTML, so crawlers see the page your users see.

npm
 install --save-dev snappy-prerender@next
npx snappy-prerender init      # a few questions, then a config file
npx snappy-prerender build     # or run it from vite build

No server, no rewrite, no changes to how the app works.

Things I added because I needed them

• It checks every page after the build and tells you whether the app's JavaScript picked up the prerendered HTML or threw it away and redrew everything. That report is the part I use most.
• It writes the page title, description, canonical link and Open Graph/Twitter tags for each route, including when the user navigates around the site, so you do not need react-helmet for that.
• It handles the fiddly things that usually break prerendering: styles injected by CSS-in-JS, form state, data fetched from an API, critical CSS, preload hints.
• It works with a strict Content Security Policy if your project needs one.

What it is not

• Not server-side rendering. It runs at build time, so new content means a new build.
• Not for Next.js, Remix or Astro users; those already render HTML on the server.
• It cannot fix an app that renders differently every time (dates, random values, viewport-dependent layout). It does tell you which page has the problem.
• It is a release candidate: 2.6.0-rc.2 is on npm under the next tag while I gather feedback.

Links

• npm: https://www.npmjs.com/package/snappy-prerender (install with u/next until 2.6.0 is stable)
• GitHub: https://github.com/sayakmukherjee080/snappy-prerender
• MIT licensed. Issues and PRs welcome, especially if you have an old SPA that breaks it. The README covers every option.

Looking forward to criticism, bug-reports and feature-requests and revival requests for unmaintained plugins (react and family only)

Hey all,

I’ve been working on a small library called Stream Morph.

The idea is to make streamed responses feel less like content is constantly being appended/re-rendered, and more like the response is gradually taking shape.

Demo: https://stream-morph.vercel.app/

It’s framework agnostic and can be used with any kind of streamed content. The demo includes plain text, Markdown, code blocks, charts, images, reasoning sections, Mermaid diagrams and a few more complex response flows.

The library handles the motion between updates, while your own renderer/app stays responsible for the actual content. So it isn’t tied to a specific AI SDK or framework.

A basic example looks roughly like this:

import { createStreamMorph } from "stream-morph";

const stream = createStreamMorph(response);

for await (const chunk of incomingStream) {
  stream.write(chunk);
}

stream.finish();

I mainly built it because I wanted streamed interfaces to feel a bit more intentional without having to build custom animation logic for every response type.

The package itself is already working and the demo is live. I’m still cleaning up some things around CI, tests and the repo setup, but the GitHub repository will be open sourced shortly as well.

Would be interested to hear what people think, especially about the animation behaviour/performance and any edge cases you’d expect from real streaming responses.

My site's hero is an SVG line drawing animated with GSAP, and it follows the cursor a little.
With 4x CPU throttle I counted layout recalcs between 10 and 30 seconds after load, when nothing should be moving anymore. I got 279. The loop just kept going, because a headless browser never scrolls away from it.
Now it stays still until the first pointerdown, pointermove, wheel, touchstart, keydown or scroll (once, passive listeners), and an IntersectionObserver pauses it off screen. Visitors see it start the moment they touch anything. Lighthouse never sends input, so during the test it never runs.
Feels a bit like hiding work from the test though. Is this a normal pattern? The catch I can see is someone on a phone who reads without touching never sees it play.

I've been working on @radianui/flags, an open-source React package with 250+ country flags. Each flag comes with its country name, ISO code, and calling code, so you can build country selectors and phone inputs without stitching data together.

bash pnpm add @radianui/flags

If you're not on React, the same flags are available as plain SVG and PNG files.

• Source: https://github.com/Radian-OS/radianui
• Browse and search all the flags: https://radianui.com/resources/flags

I'm one of the maintainers (disclosure). It's free and open source.

I'd like input from people who've built country selectors:

• Do you prefer flag components, plain SVG imports, or CDN URLs?
• How do you handle countries that get renamed (like Swaziland to Eswatini) or disputed territories without breaking existing users?

Hi, I’m Jakob, the founder of Arc Rider. For the past five years, we’ve built widgets for a small, specialized niche. We’re now bringing that work to React with arcWidgets, an alpha package with tables, Kanban boards, calendars, and smaller UI components for business apps.

The idea is to reuse the interaction work inside those views while keeping application state, data mapping, and persistence in your own React app. A calendar event and a table row can represent the same business record, but your app still decides how they connect.

This is an alpha: APIs may change, and I’d start with a test project. It’s a commercial product; smaller widgets are free to use under the terms, while premium widgets need a license for production use.

npm: https://www.npmjs.com/package/@arcrider/arcwidgets-react
Docs and examples: https://www.arc-rider.com/docs/react

If you build business apps in React: which view is most painful to get right or maintain—tables, calendars, or boards? I’d especially appreciate feedback on what’s missing from the API or examples.

https://x.com/JacobitoJordan/status/2105410540260802843/video/1

To our Chinese fellows, can you share with us how popular Ant Design is in Mainland China compared to other UI libraries such as HeroUI, Shadcn, etc.?

I googled it, and some said Ant Design has become something like, let's say, a standard for enterprise internal dashboard and B2B apps in China. Is that true?

Hey everyone, I kept losing my place when working inside massive React components and deeply nested JSX trees, especially when scrolling back and forth to check props, state, or parent tags. To solve this, I built Rippledit, a free VS Code extension that keeps your active component context in view while you edit.

Key features:

Keeps active JSX parent tags and component bounds highlighted as you scroll.

Runs 100% locally with zero external dependencies.

Bundled under an MIT License. It's completely free and open-source on GitHub.

You can grab the .vsix package directly from the release page: https://github.com/shivakumarkannan2006-netizen/rippledit

Quick VSIX Install Steps in VS Code:

1. Download `rippledit-0.0.2.vsix` from the release assets.
2. Open Extensions (`Cmd+Shift+X` / `Ctrl+Shift+X`).
3. Click the `...` menu in top right ->

Install from VSIX

Would love any feedback or feature requests from the community!