Issue #1
Typeset, TermCN & CSS-in-JS
Together with
Shadcn Labs shadcn/typeset: A Typography System for HTML & Markdown
On July 10, 2026, shadcn released shadcn/typeset — a styling system for HTML and rendered markdown in one CSS file.
Instead of manually tweaking font sizes, line heights, and spacing for every project (blog → docs → chat), you drop in a single typeset.css file. Everything inside a .typeset container gets consistently styled based on just three controls: size, leading, and flow. All other values derive automatically.
Key features include streaming-markdown support with no layout shifts, container-aware presets (compact for chat, roomier for docs), theme and dark-mode awareness, and a visual Typeset Builder to pick fonts, preview contexts, and copy the full setup. Guillermo Rauch called it “the best UI infrastructure for agents and for humans.”
TermCN: shadcn/ui for the Terminal
TermCN from shadcn-labs is essentially “shadcn/ui for terminal apps” — a free, open-source collection of copy-paste terminal UI components for React, released around July 10, 2026.
Built on Ink and OpenTUI, it works with the shadcn CLI and includes charts (bar, line, gauge, heat maps), AI components (chat, streaming text, thinking blocks), and navigation (command palettes, tabs, menus). MIT licensed and ideal for CLIs, AI agents, or any terminal-based app that needs to look professional.
shadcn-cssinjs: CSS-in-JS Port with StyleX
Released July 11, 2026 by @shadcnlabs (Aniket Pawar), shadcn-cssinjs is a CSS-in-JS port of shadcn/ui built entirely with StyleX.
It is a drop-in replacement — same CLI workflow (npx shadcn@latest add button), zero-config setup, fully customizable with StyleX themes and tokens, and officially recommended by the StyleX team. 100% free and open source.
/improve-animations Skill by Emil Kowalski
On July 11, 2026, Emil Kowalski released /improve-animations, inspired by shadcn’s /improve skill. It uses your most capable model to audit all animations in your project, identifies issues like sluggish easing and inconsistent curves, then outputs precise executable plans for cheaper models to implement. Read-only by design — it audits and plans without touching code.
Base UI Ecosystem Fallout (July 6–12)
While the Base UI default announcement dropped on July 3 (outside our window), the ecosystem reaction and migration tooling dominated this week:
- Pro Blocks rebuilt all 390+ blocks for Base UI with automatic variant detection.
- ShadcnStudio updated every block to Base UI and shipped new templates: Promptly (AI Chat App), Calendrix (Booking), and 5 AdminCN Dashboard Layouts.
- ShadcnSpace added 5 landing pages, 5+ topbar blocks, and 25+ new UI components. Catalog now exceeds 350 blocks and 350+ components.
- UIAble.com added a
<Message>chat component with groups, avatars, attachments, and quick actions. - Base UI 1.6 Compatibility Release (July 9) updated the registry baseline and moved OTP Field to stable.
- Developers report smooth migrations — one user migrated a complex custom implementation from Radix to Base UI in ~1.5 hours using the shadcn skill.
⚡️ Sponsor: Shadcn Labs
Pushing the limits of the shadcn/ui ecosystem.
A weekly newsletter with the most interesting shadcn News, Tutorials, Projects, and Tools. The easiest way to keep up with what's happening in the ecosystem.
Once-weekly email, best links, no fluff.
100% free · Delivered every Monday
📙 Articles, Tutorials & News
Card Components with shadcn/ui and Shadcn Space
A July 10, 2026 tutorial from freeCodeCamp showing how to build production-ready cards with hover states, dark mode, and responsive design using shadcn/ui and Shadcn Space.
Radix vs Base UI: Technical Comparison
A detailed breakdown of the differences between Radix and Base UI — API design, bundle size, accessibility, animation handling, and migration paths for shadcn/ui projects.
📦 Projects, Packages & Tools
Chat UI Components
shadcn released a full set of composable chat UI primitives — streaming support, auto-scrolling, message bubbles, attachments, and markers. Designed from the ground up, not wrappers around existing libraries. The Figma library was also updated with new Message components: Attachment, Bubble, Message, Message Scroller, and Marker.
Figma to shadcn/ui Plugin v57
Released July 6, 2026 — generate code for your stack with new AI models (Claude Opus 4.8, Fable 5, Sonnet 5, Gemini 3.5 Flash). Stack selectors let you pick component library (Radix UI or Base UI) and framework (Next.js, Vite, React Router, TanStack Start). Generated code now matches your project with correct render props, Link imports, and “use client” placement.
Hyperiux Vault
Launched July 9 — a source-first interaction effects library for React and Next.js with 115 scroll, cursor, text, transition, loader, background, and WebGL effects. Positioned alongside shadcn/ui, not against it. Free Core tier with 32 effects available now.
React Flow UI Update
Updated to support the latest shadcn/ui on React 19 and Tailwind 4.
ABP Framework React UI
The ABP Framework shipped React UI support in v10.4 RC, built with shadcn/ui, Tailwind CSS, TanStack Router, and Vite.
Pocket ID v2.10.0
Upgraded shadcn components in their authentication platform on July 10.
RetroUI
50+ neobrutalist React components plus 158+ blocks and templates, built on both Radix UI and Base UI. Install with the shadcn CLI.
🌈 Related
21st.dev Magic MCP
Turns /ui prompts into React components in Cursor, Claude Code & VS Code. Part of the growing MCP ecosystem for shadcn/ui.
Registry Search Engine
A developer built a central search engine for 200+ shadcn/ui registries after searching through them all.
Have a link you want to share? Send me an email at hello@shadcnweekly.com
All submissions are appreciated.
👋 See you next week!