Every time I looked for a ready-made component it was the same thing: “create an account”, “log in to see the code”, “upgrade to unlock”. Just to copy a button.

That’s why I built Component Vault: a React component library where you just open it and use it. No login, no sign-up, no email, no paywall. Find the component, copy the code, done.

🔗 https://vault-components.vercel.app (go ahead, it won’t ask you for anything)
💻 GitHub: https://github.com/erickmsms/component-vault

All without logging in:

• 55 generic components: buttons, forms, charts, kanban, navigation, landing page sections...
• Live preview at different screen sizes, a props playground and copy-ready code
• Theme editor with WCAG contrast checks and a .css export for Tailwind 4
• Side-by-side comparison of two components

No dependencies besides React, MIT licensed. Built with Next.js 16, React 19, TypeScript and Tailwind 4.

The goal is to keep it this way: open for everyone to use and everyone to improve. There are a few good first issues if you want to contribute. Just fork and open a PR.

Heads-up: the site UI is in Portuguese for now.

Anyone? Any thoughts?

I've been rendering product videos with Remotion (React → headless Chrome → frames), and scaled text kept looking wrong: either "stuck", stepping instead of gliding, or "shaky", with the letters subtly changing shape every frame. I measured the rendered frames instead of eyeballing them, and it turned out to be two separate bugs.

1. The "stuck" look: the baseline climbs the pixel grid in whole-pixel jumps

Chrome's glyph rasteriser has horizontal sub-pixel positioning but no vertical. When you scale text from its center (the default transform-origin), the baseline moves vertically every frame, and the glyphs snap to whole pixels. So instead of moving 0.3px per frame, the text sits still for a few frames and then jumps 1px.

Fix: pivot the scale on the baseline, so the baseline doesn't move vertically at all. Measure the real baseline (with a 0-height inline-block, or font metrics). Don't guess it from line-height.

Measured vertical judder: 0.284px → 0.014px per frame. Direction reversals over the animation: 29 → 0.

2. The "shaky" look: hinting re-snaps the letterforms every frame

At each new scale, font hinting snaps stems to the pixel grid differently, so the letters literally change shape frame to frame.

Fix: text-rendering: geometricPrecision. It turns hinting off, so the outlines scale smoothly. Shape drift between frames: 3.41% → 0.22%. It looks slightly softer, but that's correct, not blur.

Things that didn't help (cargo cult)

• translateZ(0), backface-visibility: hidden: these rasterise the text into a bitmap layer, so it scales like an image and goes blurry.
• will-change: transform: good in a live preview, bad in the final render for the same reason. If you need it, enable it only when not rendering.

Bonus: aggressive ease-outs freeze on a frame clock

At 30fps, a quint/expo ease-out spends its last 5+ frames moving less than a pixel. That reads as a freeze, not a settlein about one frame.

My main takeaway: you can't seer the frames and diff them. Ifsomeone says it still isn't smooth and your metric says it's fixed, your metric is wrong.

Happy to share the measurement script if anyone wants it.

Expo SDK 58 is out, and for once the headline isn't a new way to break your Podfile. With Xcode 27 retiring Simulator.app, the new expo-device-hub streams your iOS simulators and Android emulators into the browser with live CPU, memory and network graphs, while expo-app-intents lets Siri, Shortcuts and Spotlight trigger actions in your app, and the experimental Noxcturnal transformer roughly halves Metro transform times.

We also look at react-native-better-pdf 1.0 by Jakub Kasprzyk and GMI Software, which drops the bundled PDF engine for the phone's own PDFKit and PdfRenderer on Nitro Views, opening a 1,000-page scan in 56 ms instead of 622 ms. Plus, React Native 0.88 lands, Gesture Handler 3.4 builds with Swift Package Manager, and react-native-gpui renders React Native with Zed's GPU framework.

AI Elements: Agentic UI Patterns

shadcn/ui introduced AI Elements, a curated collection of component patterns created specifically for building conversational and agentic interfaces.

Each pattern is composed from standard shadcn/ui primitives designed to be copied directly into codebases, standardizing interfaces for agent tool calls, planning, sources, and step restoration.

Trace: Observability Primitive for Agent Activity

shadcn released Trace, a dedicated primitive designed to unify agent activity displays under one abstraction. It represents reasoning traces, tool executions, task queues, chains of thought, and subagent routines.

Trace models agent progress as a list of status lines with support for expandable details, links, and nested execution steps.

Chatbot Template: AI SDK Agent Starter

The shadcn team published an official minimal chatbot template built with Next.js, Vercel AI SDK, shadcn/ui, shadcn/react, and shadcn/typeset.

Designed to run on the Vercel AI Gateway, the starter serves as a clean starting point for streaming conversational interfaces with typographic defaults and state management built in.

Official Registry Directory Expansions

The official shadcn/ui registry directory added new specialized community components and domain toolkits this week.

• @babelize — Open-source localization components including language switchers, relative-time formatters, and translation widgets.
• @liquikit — Liquid glass primitives with physically based refraction built on Base UI that work across modern browsers.
• @audio-ui — Accessible audio controls including knobs, faders, XY pads, waveforms, and sequencers on headless primitives.
• @bevel — Tactile skeuomorphic components like guarded switches, split-flap boards, and motorized faders on Tailwind v4.
• @dualkit — Bilingual Arabic and English components featuring RTL layouts, Gulf currency formats, and Hijri calendar support.
• @organui — Domain components for healthcare and life sciences featuring 3D organ viewers, ECG traces, and lab result trackers.

📙 Articles, Tutorials & News

Building shadcn/ui Registries for Claude Code and Cursor

Preet Suthar outlines the structure, validation steps, and namespace setup required to author custom registries that coding agents can inspect and consume.

7 Best shadcn/ui Themes and Theme Generators

A curated comparison evaluating popular color palette customizers, theme presets, and generators across the shadcn/ui ecosystem.

Tailwind CSS v4, shadcn/ui & Dark Mode

A complete video walkthrough demonstrating how to structure a centralized design system using Tailwind CSS v4 and shadcn/ui primitives.

📦 Projects, Packages & Tools

onsystem: Design System Linter and MCP for Agents

A zero-config tool that combines an MCP server with a linter to prevent coding agents from inventing variants, hardcoding colors, or breaking spacing scales.

pie-menu: Radial Interaction Primitive

A radial pie menu for shadcn/ui with press-drag-release interaction, full keyboard support, and a headless primitive core.

signoff-ui: Human Review Primitives for Agents

UI components providing multi-file diff reviews with per-hunk decisions, inline comments, tool approvals, and telemetry for AI SDK and AG-UI agents.

animate-ui: Lower-Level Primitive Animations

An animation toolkit that targets the underlying primitives your components rely on, preserving custom shadcn markup and component source ownership.

shadcn-exchange: Cross-Registry Block Search

A directory tool allowing developers to search, preview, and CLI-install blocks across all public community registries.

facade-ui: Base UI Marketing Blocks and Templates

An open-source registry of accessible marketing blocks, landing page sections, and templates built on Base UI and Tailwind CSS v4.

nasaq: Arabic and RTL-First shadcn Registry

An open-source registry of React components, themes, and page templates designed with native RTL layout and Arabic typography, paired with an MCP server.

🌈 Related

audiocn-solid: Audio Primitives for Solid

A collection of audio UI components ported to SolidJS and distributed as copy-paste source through the shadcn CLI workflow.

esuiss: Multi-Platform UI Primitives

A component collection extending shadcn design patterns across React, Next.js, React Native with Expo, SwiftUI, and Jetpack Compose.

GooseForum: Go-Powered Self-Hosted Forum

A self-hosted forum platform featuring shadcn/ui discussion pages, an admin console, and a light and dark theme workbench, distributed as a single Go binary.

Read the full issue: https://www.shadcnweekly.com/issues/4

I am working on an open-source project called Openspline, it adds a live, talking face to any voice AI agent in five lines of code.

Just upload a still image, select a voice and you can create a talking avatar with lipsynced video generated locally.

It is still in very early stage, but the results look very promising.

Open sourced it here

Are you also getting tired to review noisy JSX / TSX changes just to realize the actual change was 1 prop?

Thats what I wanted to improve in GitComet. While looking for options I found Difftastic.

It uses Tree-sitter to understand code structure ... the same one GitComet also use! My immediate feeling was: this has to be tried out!

After testing it I knew it had to be included in the current release. Difftastic helps to show the relevant changes ignoring whitespace and formatting.

Difftastic diff really shines when viewing HTML, JSX/TSX and similar XML like syntaxes.

I created a demo how to enable it in GitComet 0.3.1 take a look!

• Animated motion components
• Modern shaders
• Clean UI blocks
• MCP server integration with Lovable, Bolt, and v0
• CLI support for smoother installations

And much more coming soon!

Hi everyone! I just finished a React and course and decided to build my first react app. Currently, I am trying to save a string to browser local storage but it does not persist on refresh. Through some console.logs I was able to see that it in fact DOES save the string to the location specified in. setItem initially but when I refresh the key or value in local storage stops existing.

Here is my code

// function for search button
async function handleClick(){
    localStorage.setItem("lastLocationSearched", searchValue);
    setData(null);
    setIsPending(true);
    setError(null);
    try{
const value = await fetch(`https://geo.ipify.org/api/v2/country?apiKey=***********&ipAddress=${searchValue}`).then((response)=>{
  if (!response.ok){
        throw Error("Could not fetch the data for that resource");
                    }
  return response.json();
});
setData(value);


    console.log(localStorage.getItem("lastLocationSearched"));
    } catch(error){
      setError(error.message);
    }


setIsPending(false);
  };

// useEffect hook
  useEffect(()=>{
        if ((localStorage.getItem("lastLocationSearched")===null)|| (localStorage.getItem("lastLocationSearched")==="")){
          console.log(localStorage.getItem("lastLocationSearched"));
        setSearchValue("");
        handleClick();
        }else{
          
          setSearchValue(localStorage.getItem("lastLocationSearched"));
          handleClick();
        }
    }, []);

Through some digging online I saw someone say that remove the strict mode tags from index.js would fix this problem but it did not for me. Can anyone please assist me?

We’ve all been there: you tweak a simple base component (like a button, input, or modal card) for the specific page you’re working on, push your code, and only find out later that you silently broke the layout on 3 other pages you forgot existed.

Running a global find (Cmd+Shift+F) is slow and messy because it pulls up tests, comments, and every file with a similar name.

To fix this, I made Rippledit—a free VS Code extension that shows you the exact blast radius directly inside your editor.

What it does:

It’s completely free on the VS Code Marketplace:

https://marketplace.visualstudio.com/items?itemName=shivakumarkannan.rippledit

(or search Rippledit in your VS Code Extensions tab)

Would love your honest thoughts and feedback!

A common production failure happens when a user leaves a React application open during a deployment.

The old tab may still be running build A, while the server is now serving build B. When the user later navigates to a lazy-loaded route, the browser requests a hashed chunk from build A that is no longer available.

For example:

Reports.a1b2.js  // requested by the old tab
Reports.c3d4.js  // available after deployment

The result can be:

• ChunkLoadError
• Failed to fetch dynamically imported module
• A route that works in a fresh tab but fails in an old tab

A normal React Error Boundary can display the failure, but it cannot update the old tab’s JavaScript references. Retrying the same import may also request the same missing hashed file again.

I built and published a small utility called react-lazy-chunk-recover to experiment with this problem.

The recovery approach:

1. Detects likely chunk-load failures
2. Optionally retries transient failures
3. Allows one guarded full-page reload
4. Uses sessionStorage to prevent an infinite reload loop
5. Passes the error to the existing Error Boundary if recovery fails
6. Avoids browser reload and storage access during SSR

Example:

import { lazyWithRetry } from "react-lazy-chunk-recover";

const Reports = lazyWithRetry(() => import("./Reports"), {
  moduleKey: "reports",
});

The default retry count is zero because retrying a deleted hashed asset usually does not help. Retries can be enabled for applications that also experience short-lived network failures.

Some important limitations:

• A reload cannot recover a permanently unavailable asset
• Retaining old assets may be a better infrastructure solution
• The HTML entry point should be revalidated after deployment
• A full-page reload must work on nested client-side routes
• Old clients may be incompatible with a new backend
• An asset manifest must be trusted and version-compatible if used

For applications using React.lazy, Vite, Webpack, or a CDN:

1. How do you handle stale chunk failures?
2. Do you retain assets from previous deployments?
3. Do you reload the page, show an update prompt, or use an Error Boundary?
4. Have you tested this with two builds and an already-open browser tab?

I wrote more about the problem, implementation, testing strategy, and deployment considerations here:

• npm package: https://www.npmjs.com/package/react-lazy-chunk-recover
• Technical article: https://sachithsiriwardana.medium.com/handling-react-lazy-chunk-load-errors-after-deployment-1e4980a7a69a

I’d be interested to hear how other teams handle this failure mode in production.

If you take software engineering principles seriously then none of the react state hooks belong inside a react component.

I think one of the most critical things you should do is ensure the decoupling of storage and UI components. The react components force you to do is precisely and zustand doesn't help.

I haven't sourced grip-react a year ago and I've been using it exclusively, absolutely zero usestate usememo, useeffect, etc and absolutely zero prop drilling. I don't know why anyone would want to do something different, honestly.

Has anyone else created an API that is a 100% replacement with complete declarativeness? I looked at angular and mobx, they're close but no cigar.

At my last company, they would finish the accessibility layer near the end of the product's development stage, and I remember developers complaining about repeating old sprints non-stop.

What's the industry norm when solving such issues? Of course, accessibility goes beyond people with extra needs: it should also include everyone's way of accessing the web, starting from a simple "cookie button" that takes up 40% of the screen space.

When do these issues start being noticed in your development life-cycle? How does your company think about them?

I know that self-promotion is forbidden, but this is an actual listing with React companies who can help you with your next project. I would just advise checking them, just for a piece of advise, not to mention the web services that they can provide: https://focusreactive.com/blog/top-reactjs-development-services-in-2026/

Hey everyone!

Been working on Tip Glide, a small framework-agnostic tooltip library written in TypeScript.

It uses a single shared tooltip that moves between elements and adjusts its size to fit the content. It also handles viewport boundaries, so the tooltip adjusts its position when there's not enough space.

A few things you can configure are the movement, directional lean, hover delays, arrow, and enter/exit animations.

It has zero runtime dependencies and comes with adapters for React, Angular, Vue, Svelte, Solid, Astro and Preact, along with a vanilla JS API.

There's an interactive playground where you can mess around with the settings and see how everything behaves.

Would love some feedback on the movement, especially when switching quickly between elements, but also on the API and anything else that could be improved.

Live demo & playground | npm | GitHub | Portfolio

I'm a self-taught developer, and I know React and Next.js. Lately, I've been feeling increasingly anxious about my future as a developer.

AI is moving so fast. It can generate components, build entire websites, connect APIs, and even create full-stack applications. Sometimes I wonder what the point is of spending months learning something when AI can already do so much of it.

I want to get a better-paying developer job, but honestly, I'm confused about what I should focus on right now. Should I keep improving my React/Next.js skills, get better at backend development, or start learning AI engineering?

I keep hearing about RAG, AI agents, vector databases, LLM integrations, and all these new things. It feels like there's always something new to learn, and I'm worried that if I focus on the wrong things, I'll fall behind while everyone else moves forward.

For those of you already working in the industry, what would you do if you were in my position? Would you focus on becoming a strong full-stack developer first, or would you start learning AI engineering alongside web development?

I'm not looking for a shortcut or expecting to become an expert overnight. I just want to make the right decisions, build useful skills, and have a realistic chance of getting hired.

I'd really appreciate some honest advice from people who have been through this or are dealing with the same situation. Right now, I could genuinely use some direction.

I’ve been cleaning up a small React component library I built for a few internal projects and the code itself is fine but the docs are starting to get messy. Right now every component has examples, props a few usage notes and sometimes little edge cases that are easy to forget. I tried keeping everything in the repo as markdown and that works but once the number of components started growing it became annoying to actually browse. I’ve seen a lot of people here recommend stuff and I like the idea of keeping the docs in Git and not having to build the docs site myself and I want to know if that is a good idea or not?

For people maintaining React libraries do you keep everything close to the code or use something separate like Storybook, GitBook, Mintlify, Docusaurus etc? Curious what actually stays maintainable once the library gets bigger.

I had a 70-page PDF to generate from React in a TanStack Start app, and with react-pdf it took over 60 seconds. So I built @inkoxide/render.

It's not a react-pdf clone, though it's meant to feel familiar: Document, Page, View, Text, Image, StyleSheet.create and Font.register work the way you'd expect, so moving a document over is mostly changing the import. Everything under the components is new: a layout engine written in Rust does layout, text, pagination and PDF writing.

• A 43-page report with 1,000 table rows renders in about 41 ms on Node, and in about 56 ms in the browser, inside a Web Worker, so the page keeps responding.
• A one-page invoice takes about 1.2 ms instead of about 18 ms.

It also does things I kept missing:

• Tailwind className
• tables whose headers repeat on every page
• an error naming the component stack when a style or prop isn't supported, instead of silently ignoring it
• PDF/A and encryption

Site and docs: https://inkoxide.dev GitHub: https://github.com/eddiesr93/inkoxide Playground (edit an example; switch to Layout to see the boxes the engine placed): https://inkoxide.dev/playground

Happy to answer questions.

Hey !

I've been working on a project called Veltrix-UI for the past few months, building it from scratch. It's probably the biggest project I've worked on independently so far.

The idea is to make it easier for developers to find UI components they like, preview them directly in the browser, and copy the JSX code to use in their own React projects.

Some of the things I've built into it:

• Live previews of components
• One-click JSX code copying
• Search, filters, and sorting
• Favourites without needing an account
• A backend for managing and serving components

I used React, Vite, Tailwind CSS, Node.js, Express, and MongoDB to build it.

The project is live now, and I'd really like to get it in front of developers other than myself. I know there's always room to improve a project once other people start using it.

Live demo: https://veltrix-ui.vercel.app/

GitHub: https://github.com/AwadhDhoot23/Veltrix-UI

If you get a chance to try it, I'd genuinely appreciate your feedback. I'm especially interested in whether the components are useful enough that you'd actually use them in a project, what's missing, and what feels rough or confusing.

Honest criticism is welcome - I'd rather find out what needs work than just hear that it looks nice.