shadcn OIDC: OpenID Connect Configuration Registry

shadcn announced a new official registry dedicated to building OpenID Connect (OIDC) configuration interfaces.

The registry lets developers compose authentication settings by selecting identity providers, form controls, and validation libraries tailored to their application stack.

snapcn: Remotion Video Registry by shadcn-labs

shadcn-labs released snapcn, an official community registry providing Remotion components designed for rendering product demo videos programmatically.

Developers can use the shadcn CLI to install animated text reveals, terminal sessions, device frames, logo stings, and complete scenes directly into React codebases.

canvas-kit: Infinite Canvas Primitives for React

canvas-kit is an open-source infinite canvas implementation distributed as a shadcn registry.

The package provides pan, zoom, drag, and marquee selection primitives that install directly into your project as editable source files, enabling custom whiteboard and node interfaces without third-party canvas runtimes.

Official Registry Directory Expansions

The official shadcn/ui registry directory added new specialized domain toolkits, media players, and supervisory primitives this week.

• @videojs Audio, video, and live streaming player skins from Video.js delivered as editable React and Tailwind CSS source.
• @wick-charts Smooth realtime canvas charts that handle streaming data while styling with active shadcn theme tokens.
• @creance Supervisory UI components for AI agents featuring approvals, tool call tracking, run timelines, and diff reviews.
• @pluginui Audio effect and instrument interface controls for web applications and native DAWs powered by the Maru Audio platform.
• @twelfth Domain components for retail buying and category managers, including P10–P90 forecast bands and pricing scoreboards.
• @notionic React Server Component primitives for Notion pages including KaTeX math, Mermaid diagrams, and toggle lists.

📙 Articles, Tutorials & News

Using shadcn/ui with Rspress

The Rspress documentation framework published a guide detailing how to integrate shadcn/ui primitives, Base UI, and Tailwind CSS styling into Rspress sites.

Zero-React shadcn Primitives for HTMX

A community discussion detailing 96 plain HTML and Tailwind CSS components styled to match shadcn/ui, paired with an MCP server for non-React stacks.

📦 Projects, Packages & Tools

ReUI: Excalidraw Whiteboard Blocks

ReUI published interactive whiteboard canvas blocks powered by Excalidraw, installable via the @reui registry CLI command or directly as AI prompts.

shapcn: Shape-Aware Icon Morphing

A motion-centric primitive for shadcn/ui that provides smooth, shape-aware icon morphing transitions across interactive states.

watermelon-ui: Expansive Registry with MCP Server

An MIT-licensed shadcn registry offering over 500 component variants, 131 animated components, 189 blocks, 12 dashboards, and a keyless MCP server for coding agents.

night-glass: Dark Glassmorphism Theme

A dark theme preset for shadcn/ui with near-black surfaces, liquid-glass panels, and single accent colors, compatible with Tailwind CSS v3 and v4.

creative-ui: Expressive Components and Claude Skills

A collection of expressive animated components and Claude Code design skills that can be installed into .claude/skills with a single shadcn CLI command.

shadcn-table: Turnkey TanStack Table Solution

A data table library built on top of TanStack Table and shadcn/ui primitives, featuring motion-driven transitions and full sorting, filtering, and pagination support.

blobz: Deterministic SVG Avatar Registry

An open-source deterministic SVG avatar generator that provides an MIT-licensed shadcn registry of avatar primitives and block layouts.

shadcn create for Figma: Variable & Token Switcher

A Figma community tool mirroring shadcn's create workflow, allowing designers to swap themes, radii, fonts, and icon sets across canvas files using native variables.

🌈 Related

nxui: Animated Components for shadcn-vue

Over 360 animated Vue 3 components, WebGL backgrounds, charts, and shader effects designed to install via the shadcn-vue CLI.

Astryx: Meta's Open Source Design System

Meta published Astryx, an open-source design system featuring accessible React components, hooks, and page templates that integrate with the shadcn registry format.

looot-crm: Intent-Driven CRM on shadcn/ui

An open-source, self-hosted CRM built with Next.js, Supabase, and shadcn/ui that tracks account buying-intent signals such as hiring and tech stack updates.

solidping: Self-Hosted Uptime Monitoring

An AGPL-3.0 self-hosted uptime monitoring and status page platform featuring a monitoring dashboard built entirely with shadcn/ui.

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

Hi all, I want to share a WebSocket library I built, chanx-js. It makes the messages on both ends of a socket typed, keeps the frontend in sync with what the server really sends, and comes with React hooks.

Every realtime feature I built in React ended up the same way. lastMessage was any, so I wrote the message types by hand and found out the backend had changed them only when something broke in production. On top of that I kept rewriting the same reconnect logic and the same switch over message types in every project.

How it works, in three steps: `

1. The server declares its messages and handlers. Here with chanx-js on Node:

​

const Chat = defineMessage('chat', z.object({ text: z.string() }));
const Notice = defineMessage('notice', z.object({ text: z.string() }));

const chat = consumer('/ws/chat/{room}', {
  name: 'chat',
  groups: (conn) => [`room.${conn.params.room}`],
}).on(Chat, { output: Notice }, (m, ctx) =>
  ctx.broadcast(Notice.create({ text: m.payload.text })),
);

1. The server publishes those as AsyncAPI, and the CLI turns them into a typed channel:

   npx @chanx-js/codegen http://localhost:8000/asyncapi.json # writes src/generated

   // src/generated/channels.ts export type ChatToServer = ChatMessage; // { action: 'chat'; payload: { text: string } } export type ChatToClient = NoticeMessage; // { action: 'notice'; payload: { text: string } } export type ChatReplies = { chat: NoticeMessage };

   export const chat = defineChannel<ChatToServer, ChatToClient, ChatReplies>()({ name: 'chat', address: '/ws/chat/{room}', });

2. Your component uses that channel with useChannel:

   import { createClient } from '@chanx-js/client'; import { ChanxClientProvider, useChannel } from '@chanx-js/client/react'; import { chat } from './generated';

   const client = createClient({ baseUrl: 'ws://localhost:8000' });

   function ChatRoom({ room }: { room: string }) { const { status, messages, send } = useChannel(chat, { params: { room }, buffer: 'all', });

   return ( <> <p>{status}</p> {messages.map((m, i) => ( <p key={i}>{m.payload.text}</p> ))} <button onClick={() => send({ action: 'chat', payload: { text: 'hi' } })}> Send </button> </> ); }

   root.render( <ChanxClientProvider value={client}> <ChatRoom room="lobby" /> </ChanxClientProvider>, );

params must have room because the path does, m.payload.text is a string, and send({ action: 'chat', payload: { txt: 'hi' } }) fails to compile. When the backend changes a message, you regenerate and TypeScript shows every place to fix.

What else it gives you:

• const reply = await request({ action: 'chat', payload: { text: 'hi' } }), with the reply typed from ChatReplies
• Reconnects, and topic subscriptions (room:lobby, ...) restored after a reconnect
• lastMessage for the latest message, or an on map with callbacks that don't re-render, and batch: 'raf' for busy streams
• The server side too: one validated handler per message type, AsyncAPI docs generated from the code, broadcasts across instances through Redis

The backend needs to be a chanx server, since the client relies on its message format and the AsyncAPI it publishes. That can be chanx-js on Node (ws, Express, Fastify, Hono, NestJS), Bun or Deno, or chanx on Django and FastAPI, the Python version I started with.

• Repo: https://github.com/chanx-dev/chanx-js
• React guide: https://js.chanx.dev/client/integrations/react
• npm: https://www.npmjs.com/package/@chanx-js/client

It's still new on the JS side, so if you run into any problem or have ideas to improve it, please open an issue or a discussion. Stars and PRs are welcome too.

How I can make a shuffle system witn leitner boxes on React?

I was building a web app and wanted Excel files to live within it and be fully modifiable / saveable, but couldn't find anything open source that fully fit the bill. I ended up building the repo below.

Basically full Excel functionality in our React app including:

• Import .xlsx and csv file, export to .xlsx
• Fully preserves existing Excel formatting
• Real-time calc that's a heavily modified fork of ironcacl
• Formulas and calculations
• Multiple worksheets
• All the formatting options you'd use on day-to-day basis
• Fully open source

https://github.com/pixelsmasher13/gridpath. Please let me know if you end up trying it out.

Hey everyone,

I built an interactive 3D tactical command center using React and CesiumJS to track real-time global telemetry feeds.

Key React implementation details:

• Canvas & WebGL Integration: Synced Cesium's render loop with React state without triggering unnecessary re-renders during high-frequency telemetry updates.

• Custom Hooks: Encapsulated live ADS-B flight feeds, orbital satellite calculations (SGP4), and threat feeds into dedicated streaming hooks.

• Performance: Avoided standard React DOM nodes for map markers; batched updates directly into Cesium primitive collections to maintain a smooth 60 FPS.

• Dynamic Telemetry: Global fiber optic lines, data centers, and live GNSS interference zones rendered dynamically.

Looking for feedback on React state management patterns when handling high-frequency WebGL data streams!

(Live demo link added in the comments below)

Skeleton screens always felt like a guess to me: grey bars in roughly the right shape, then the real content pops in somewhere slightly different.

So I built Arrivo. While loading is true, an effect plays exactly where your content will land. When it turns false, the real elements are revealed in place.

Demo : https://tuancuongpham.github.io/arrivo/ 

Code: https://github.com/tuancuongpham/arrivo

npm i u/brottin/arrivo

import { Reveal } from '@brottin/arrivo';

import { halftone } from '@brottin/arrivo/effects';

<Reveal effect={halftone} loading={isLoading}>

  <ArticleCard post={post} />

</Reveal>

How it works:

• Your content stays in the DOM, hidden with visibility, so nothing shifts when it lands.
• Each wrapper gets one canvas overlay. Text lines are measured with Range rects and images are read from the page, so the effect draws the real shape of your content instead of a guess.
• An effect is two draw functions, idle() and reveal(p). One shared requestAnimationFrame loop drives every instance, off-screen ones pause, and reduced motion turns every reveal into a 150 ms fade.
• Zero runtime dependencies, about 8.5 KB gzipped for the core and 0.7 to 3.4 KB per effect, tree-shaken.

The 13 effects: split-flap, redacted, quadtree mosaic, CMYK halftone, CRT tune-in, ink (with 8 threshold maps), particle swarm, darkroom, Tetris, fuse (with a Lunar New Year mode), equalizer, thermal and snowfall.

It's 0.1.0, so feedback is very welcome, especially on where you'd actually use something like this and where it would be too much.