--- title: "Astryx vs. shadcn/ui: Testing Meta’s AI-friendly React design system with Claude Code" url: https://daily.dev/posts/astryx-vs-shadcn-ui-testing-meta-s-ai-friendly-react-design-system-with-claude-code-vbuoqhcrn source_url: https://blog.logrocket.com/astryx-vs-shadcn-meta-ai-react-claude type: article source: "LogRocket" published: 2026-08-24T08:09:28.199Z updated: 2026-08-24T08:10:01.178Z tags: ["react", "mcp", "claude-code", "design-systems", "shadcn"] reading_time: 14 upvotes: 4 comments: 1 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Astryx vs. shadcn/ui: Testing Meta’s AI-friendly React design system with Claude Code **[LogRocket](https://daily.dev/sources/logrocket)** · 14 min read · 4 upvotes · 1 comments ## Summary A hands-on comparison tests Meta's newly open-sourced Astryx design system against shadcn/ui using Claude Code as the AI agent building three UIs: a dashboard, a themed settings modal, and a data table. Astryx ships a CLI, MCP server, and manifest that let the agent query real component APIs instead of guessing from training data, resulting in fewer but cheaper mistakes (wrong prop names caught instantly by TypeScript) versus shadcn/ui, where the agent used an outdated Radix asChild pattern that broke after shadcn v4 moved to base-ui. Theme swapping was also far simpler in Astryx (4 lines, full propagation) versus shadcn (manual sed edits, incomplete propagation due to hardcoded Tailwind classes). The piece notes Astryx is still Beta (v0.0.14), has an inconsistent component count across sources, and lacks a mature third-party ecosystem. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why did Claude Code fail to build a dropdown menu with shadcn/ui v4? It used the asChild prop on DropdownMenuTrigger, a Radix composition pattern the agent remembered from training, but shadcn/ui v4 moved off Radix onto base-ui and dropped that prop, so the build failed. The agent had no manifest or CLI to check the new API and had to be corrected by inspecting updated source files like input.tsx and button.tsx. _Developers migrating shadcn/ui to v4's base-ui foundation can track breaking prop changes like this via daily.dev._ ### What is Meta's Astryx design system and how does it help AI coding agents? Astryx is a React and StyleX-based component library that Meta open-sourced on 28 June 2026 under the MIT license after eight years of internal use. It ships a CLI, an MCP server, and a manifest describing every component and prop, letting AI agents like Claude Code query the real API instead of guessing from outdated training data, which turns mistakes into build-time prop errors rather than invented components. _Teams weighing AI-friendly design systems for agent-built UIs can follow tools like Astryx on daily.dev._ ### How does theming differ between Astryx and shadcn/ui when using an AI agent? Astryx propagates theme changes completely through a CSS cascade, requiring only four changed lines (a CSS import and a theme provider prop) with no component files touched. shadcn/ui splits styling between CSS variables and hardcoded Tailwind classes in component templates, so changing token values via sed commands only partially restyled the UI, leaving hardcoded classes like rounded-lg and text-sm unchanged. _Developers choosing a themeable component library for agent-driven UI work can compare approaches like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@pdfopsdev** · 0 upvotes > curious how manifest staleness gets caught in practice, does astryx's MCP server validate against the actual built components or is it a hand maintained schema? that's the failure mode that bites in six months once nobody's watching it. --- Tags: [#react](https://daily.dev/tags/react), [#mcp](https://daily.dev/tags/mcp), [#claude-code](https://daily.dev/tags/claude-code), [#design-systems](https://daily.dev/tags/design-systems), [#shadcn](https://daily.dev/tags/shadcn) [View this post on daily.dev](https://daily.dev/posts/astryx-vs-shadcn-ui-testing-meta-s-ai-friendly-react-design-system-with-claude-code-vbuoqhcrn)