--- title: "Meta releases its React design system" publication: "React Status" issue: 481 published_at: "2026-07-03" canonical_url: "https://react.statuscode.com/issues/481" --- Plus shadcn/ui gets chat components, React Router 8.1, and shadcn-inspired mapping components. #​481 — July 3, 2026 [Read on the Web](https://react.statuscode.com/issues/481) Together with [![Master.dev\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1280,h_245/co_white,e_outline:17/cgiteem1q7kgf8yoheqo.png)](https://master.dev/workshops/codex/?utm_source=email&utm_medium=reactstatus&utm_content=codexcooper) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/d3rq25ebulc1pplq8yvb.jpg)](https://astryx.atmeta.com/) [Meta Releases Its _Astryx_ Design System](https://astryx.atmeta.com/) — Built on React and [StyleX](https://stylexjs.com/), and under development at Meta for over 8 years (powering _“over 13,000 apps”_, they claim), Astryx provides [more than 160 components](https://astryx.atmeta.com/components), [theming](https://astryx.atmeta.com/themes), [templates](https://astryx.atmeta.com/templates), and tooling. There's also [a playground](https://astryx.atmeta.com/playground) to experiment with. Meta 💡 In [How Astryx Works](https://astryx.atmeta.com/blog/how-astryx-works), the Meta team explains the technical story behind the project, why they built it, and the basics of its operation. [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/32e8caac.png)](https://master.dev/workshops/codex/?utm_source=email&utm_medium=reactstatus&utm_content=codexcooper) [Agentic Frontend Development](https://master.dev/workshops/codex/?utm_source=email&utm_medium=reactstatus&utm_content=codexcooper) — Join this interactive workshop and see how AI can help with the messy middle of frontend work. Covers practical patterns for prompting, reviewing, debugging, and iterating with Codex — to help design, build, and refine modern interfaces. Master.dev sponsor **IN BRIEF:** - [Storybook has introduced first-class support for TanStack projects](https://storybook.js.org/blog/storybook-for-tanstack-react/) in the React ecosystem, including Router, Start, and Query. - Vercel continues to tease Next.js 16.3 (now in preview) with a look at [Turbopack progress](https://nextjs.org/blog/next-16-3-turbopack) and [AI-related improvements](https://nextjs.org/blog/next-16-3-ai-improvements). - Vercel has also [introduced _Vercel Services_](https://vercel.com/blog/vercel-services-run-full-stack-on-vercel). It provides a way to run multiple frameworks in one project, e.g. a Next.js frontend and a backend that might well be built in Python, Go, or Rust. [The Hidden Cost of Hydration Mismatches](https://3perf.com/blog/hydration-mismatch/) — How a single hydration mismatch, combined with web font swapping, can push a React page’s Largest Contentful Paint ([LCP](https://web.dev/articles/lcp)) from green into the red. Ivan Akulov 📄 [How We Made React Native Animations Smooth on Low-End Android](https://blog.margelo.com/profiling-skia-reanimated-low-end-android) – A deep dive into Skia, Reanimated, and Hermes performance on budget Android. Vishesh Raheja 📺 [How Tanner Linsley Built TanStack to Outlive Him](https://www.youtube.com/watch?v=rCJ9OdNdigQ) – A _very_ smoothly produced 15-minute interview with the creator of [TanStack](https://tanstack.com/). The Build Log 📄 [Next.js Already Traces Your Requests: How to Export Them with OpenTelemetry](https://blog.sentry.io/nextjs-export-traces-opentelemetry/) Kyle Tryon (Sentry) 📄 [I Let React Compiler Handle Memoization: Here's What Actually Broke](https://blog.logrocket.com/react-compiler-memoization-what-actually-broke/) Isaac Okoro (LogRocket) 🛠 Code, Tools & Libraries [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/mbrvbof3q1ujqnfapog4.jpg)](https://www.mapcn.dev/) [mapcn: Ready-to-Use Customizable Map Components](https://www.mapcn.dev/) — Built by a Cloudflare design engineer, mapcn is a suite of map components for React based on [MapLibre](https://maplibre.org/projects/gl-js/) and styled with Tailwind. If you use `shadcn/ui`, you’ll be very comfortable here as it follows the same approach. Anmoldeep Singh 💬 [`shadcn/ui` Adds New Components for Chat Interfaces](https://ui.shadcn.com/docs/changelog/2026-06-chat-components) — `MessageScroller`, `Message`, `Bubble`, `Attachment`, and `Marker` components join the suite, providing an easy way to create a messaging experience in your app. shadcn Team [termcn: A Suite of Beautiful Terminal Components for React](https://www.termcn.dev/) — Built on [Ink](https://github.com/vadimdemedes/ink) and [OpenTUI](https://opentui.com/) and distributed via the shadcn CLI, this is a comprehensive component library for _terminal_ UIs. Aniket Pawar [React Icons 5.7: Easily Bring Popular Icons Into Your React Projects](https://react-icons.github.io/react-icons/) — Use imports to bring in only the icons your project needs from sets like Font Awesome, Typicons, GitHub’s [Octicons](https://octicons.github.com/), and more. v5.7 bumps all the icon sets up to their latest versions. Kamijin Fanta 📰 Classifieds Real-time UI, stale data? The bottleneck is the query, not the component. [TimescaleDB](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=react-status-newsletter) fixes it. --- ⚛️ You compose React from components. Compose your AI backend the same way — agents as typed APIs, native TypeScript SDK, 100+ recipes. [→ Star on GitHub](https://agentfield.ai/github/?utm_source=react&utm_medium=newsletter&utm_campaign=react-260626&utm_id=react-260626-github-cta&utm_content=github-cta). - [Ant Design 6.5](https://github.com/ant-design/ant-design/releases/tag/6.5.0) – The enterprise-focused design language/React UI library gets a smaller bundle size, new icons, and [a DESIGN.md file](https://ant.design/design.md) for agents to use. - [Downshift 9.4](https://www.downshift-js.com/) – Primitives to build WAI-ARIA compliant React autocomplete, combobox and select components. [v9.4 fixes](https://github.com/downshift-js/downshift/pull/1690) React Compiler compatibility. - [React Router 8.1](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v810) – Adds a way for `create-react-router` to install an agent skill, and instrumentation data now [includes extra metadata](https://reactrouter.com/how-to/instrumentation#result-metadata). - [TinyBase 9.0](https://tinybase.org/guides/releases/#v9-0) – Bug fix and stability release for the reactive data store and sync engine backend. - [Expo SDK 57](https://expo.dev/changelog/sdk-57) – Brings React Native 0.86 to Expo. - [MUI / Material UI 9.2](https://github.com/mui/material-ui/releases/tag/v9.2.0) and [MUI-X 9.8](https://github.com/mui/mui-x/releases/tag/v9.8.0) - [React Native VisionCamera 5.1](https://github.com/mrousavy/react-native-vision-camera/releases/tag/v5.1.0) Curated by Peter Cooper and Terence C. Gannon. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom