~reactstatus | Bookmarks (140)

Onlook: An Open-Source 'Figma'-Style Design App for React — A new open source, local-first Figma style design app (for Windows, Linux and macOS) that targets React use cases. You can design layouts directly on a live page and instantly write your changes to code. Early days but looks very promising. GitHub repo.

Verification Input: Customizable, Masked Input Component — Check out the demos on the homepage, but this is well suited for entering OTP codes, certain types of password, and the like. GitHub repo.

Radon IDE 1.0: An IDE for React Native Development — Formerly known as React Native IDE, Radon is an extension that significantly extends either VS Code or Cursor into a fully fledged IDE for React Native (and Expo) development. It is a paid product, however, but all the money is funneled back into open source React Native development and the feature set might convince...

MUI X 7.23.0: Advanced React Components for Complex Use Cases — We’ve diligently linked to each new release of this popular suite of React components, but never featured it “properly”, so it’s about time we did! MUI X is a well rounded suite of professionally designed and MIT-licensed components. v7.23.0 improves the data grid component and adds full React 19 support.

Component Testing RSCs with Storybook — Testing server components can be tricky because they span the frontend/backend divide, but Storybook offers a way and here’s how.

React Data Fetching Patterns — Not about how to fetch data in React apps, but some common patterns to structure said fetching.

Tremor: React Component Suite for Dashboards and Charts — Built with React, Tailwind CSS, and Radix UI, you can use Tremor by either copy and pasting the components or via their npm package. You get all the typical dashboard UI elements like charts, progress indicators, activity trackers, accordions, tables, etc.

React Router v7 Released — Michael explains it best: “v7 brings everything you love about Remix back into React Router proper. We encourage all Remix v2 users to upgrade [...] For the majority of the React ecosystem [...] we believe React Router v7 will be the smoothest way to bridge the gap between React 18 and 19.” The project has a nifty new homepage too.

Vite 6.0 Released — Despite coming from the creator of Vue.js, the Vite build tool has rapidly found itself at the heart of the React ecosystem with its enviable combo of speed, simplicity and extensibility. v6 doubles down on each of these and introduces an experimental ‘Environment API’ for framework authors to use Vite in more powerful ways.

A Lightweight Model Is Just the Right Size — Gemini 1.5 Flash-8B is production ready and faster than ever. Optimized for speed and efficiency, Gemini now offers Grounding with Google Search, enabling JavaScript developers to get more accurate responses. Try it on for size via Google AI Studio.

Feature-Based React Architecture — “In a feature-based architecture, each feature is decoupled from the others as much as possible. This way we can keep the components and their data fetching functions focused on their domain.”

▶  Building a Teleprompter App in 30 Minutes with AI — Building apps with AI powered tools isn’t that unusual nowadays, but if you’ve never seen the process, this is a good look at the process all the way through to deployment. He uses Vercel’s v0, Replit and Cursor.

Spoiled: A Realistic 'Spoiler' Component — The homepage is a live demo. A neat way to keep things hidden until a user wants to see them. Powered by the CSS Painting API with a static image fallback. GitHub repo.

TinyBase v5.4: A Reactive Data Store for Local-First Apps — A powerful reactive data store you could essentially use as the entire backend of your app. v5.4 ups the ante with a WebSocket synchronization server that runs on Cloudflare Durable Objects.

≡ React Burger Menu 3.1: Off-Canvas Sidebar Component — Has a variety of effects and styles powered by CSS transitions and SVG path animations. GitHub repo.

React Swipeable: Swipe Event Handler Hook — Customizable, lightweight hook that provides all the information needed to manage swipe interactions. GitHub repo.

🩻 dwv-react: A React DICOM-Format Medical Image Viewer — DICOM is a standard for distributing medical images, such as from CT or MRI scans.

Payload 3.0: A Headless Next.js-Native CMS Platform — An open source, headless CMS with a customizable React-based admin system, GraphQL and REST APIs, flexible auth, file uploads, etc. “Payload is the only Next.js CMS—in a way that no other CMS can come close to,” they claim. GitHub repo.

🤖 Vercel's AI Chatbot Starter Template — An open source AI chatbot app template built using Next.js. It uses Vercel’s AI SDK and other Vercel APIs for the heavy lifting.

React Scan: Detect Performance Issues in Your App — A pure JavaScript tool you can drop into your app to automatically ‘scan’ for problematic renders without doing lots of integration work. There’s a simple demo on the homepage or you can see Aiden’s view of Twitter/X being scanned. GitHub repo.

▶  A Look At “use cache”, Next.js's Latest Take on Data Caching — Explained in Jack’s usual tight, expertful fashion. (17 minutes.)

Building React Forms with Ease Using React Hook Form, Zod and Shadcn — I exaggerate, but it seems there are almost as many ways to create forms in React as there React developers, but here’s one developer’s clean, modern approach.

Uncontrolled or Controlled: A Matter of Perspective? — Controlled components have state managed by React, while uncontrolled components store their state in the DOM, but sometimes it’s a bit more complicated than that, as Sam demonstrates here.

Introducing @clerk/nextjs V6, with Support for Next.js 15 — With v6, the auth() helper is now asynchronous, <ClerkProvider> defaults to static rendering instead of dynamic, and support for partial pre-rendering has been introduced. Learn more about v6 updates and follow our guide to upgrade.