09:20Better Stack · Tutorial
MCP Apps Are Changing the Internet. Here's How to Build One!
A 9-minute end-to-end demo of SkyBridge — the open-source framework that puts your React app inside ChatGPT and Claude.
May 24thThe argument in one line.
Astryx ends the choice between a big-company design system that makes every app look the same and a copy-pasted component library nobody maintains, by locking down behavior and accessibility in the system while exposing only look-and-feel through type-safe theme tokens.
Read if. Skip if.
READ IF YOU ARE…
- A frontend or full-stack developer choosing a component library for a new React project who is tired of Tailwind class drift or the maintenance burden of copy-pasted shadcn components.
- A team lead who wants brand consistency enforced structurally through shared tokens rather than through convention and code review.
- A developer who leans on AI coding tools and wants a library with a CLI that feeds structured docs straight into an agent's context instead of hoping the model guesses the right props.
SKIP IF…
- You're not working in React — Astryx is a React-only component library.
- You already have a mature, working design system and aren't in the market for a replacement.
The full version, fast.
Meta open-sourced Astryx, an internal design system it has run across 13,000 apps for eight years, positioning it as a shadcn alternative built on its StyleX styling engine. The pitch: most design systems force a tradeoff between adopting a big company's look (Material UI) or copy-pasting components you now own and must maintain forever. Astryx keeps behavior, accessibility, and quality inside the system while pushing all customization into type-safe theme tokens — one brand color generates a full palette, a base size and ratio generate a type scale, and radius/motion controls round out the look. Tokens can be overridden globally or scoped to a single component, themes can extend other themes, and a Tailwind Bridge maps the same tokens to Tailwind utility classes for teams that don't want to switch to StyleX. A built-in CLI also feeds component docs directly into AI coding tools so agents write correct Astryx code instead of guessing.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:25
01 · Intro
Cold open naming Astryx as Meta's shadcn-style library built on StyleX, refined for 8 years across 13,000 internal apps.
00:25 – 01:30
02 · Templates & Components
Tour of 150+ components via prebuilt templates: a group table, payment form, Kanban board, IDE layout, ecommerce site, and an AI chat UI with markdown rendering.
01:30 – 02:15
03 · Why Astryx Exists
Frames the two bad options design systems usually force: adopt a big-company look (Material UI) or copy-paste components you now have to maintain yourself forever.
02:15 – 03:36
04 · Building a Custom Theme
Astryx's defineTheme function generates a full theme from a handful of inputs: one brand color, a type scale (base size + ratio), radius, and motion speed.
03:36 – 05:02
05 · Customizing Tokens & Variants
Overriding a specific token (like a button's background color) globally versus scoping the override to one component; defining a fully custom, type-safe component variant.
05:02 – 05:28
06 · Pre-Built Themes & Production Builds
Prebuilt starter themes, extending an existing theme instead of starting from scratch, and compiling a theme into static CSS/JS artifacts for SSR frameworks like Next.js.
05:28 – 06:07
07 · Brand Consistency
Argues a single theme file keeps styling consistent across a team (and across AI-generated code) in a way ad hoc Tailwind classes don't, though a disciplined token-based Tailwind setup can approximate it.
06:07 – 06:47
08 · Styling Components Directly
One-off component styling via the xstyle prop (StyleX), plus support for Tailwind, Panda, or plain className overrides.
06:47 – 07:20
09 · Tailwind Bridge
A bridge that maps Astryx's theme tokens onto Tailwind utility classes, so teams can keep Tailwind syntax while values stay theme-governed.
07:20 – 07:49
10 · Built for AI Agents
A CLI meant for AI tools, not humans, that loads component docs into an agent's context and can populate an AGENTS.md file so models write correct Astryx code.
07:49 – 08:21
11 · Final Thoughts
Wrap-up recommending the documentation and playground, plus a closing plug for Better Stack's own observability product.
Lines worth screenshotting.
- Meta says it has refined Astryx internally for eight years across 13,000 applications before open-sourcing it.
- Astryx ships with over 150 accessible React components, more than most component libraries launch with.
- The core critique of shadcn-style libraries: copying components into your project means you now own every fork, so upstream fixes and accessibility become your problem.
- The core critique of big-brand systems like Material UI: your app inherits the brand's look with limited customizability.
- Astryx's fix is a hard split — the system owns behavior, accessibility, and quality; themes own everything visual.
- A single brand hex color is enough to auto-generate an entire accent and background palette in Astryx's theme builder.
- Typography in Astryx is defined by a base size plus a ratio — a base of 14 with a 1.2 ratio means each size step multiplies the previous one by 1.2, generating the whole type scale automatically.
- Theme tokens in Astryx are fully type-safe, which is why the library recommends defining themes in TypeScript rather than CSS.
- Overriding a token globally changes every component that references it; Astryx lets you scope an override to a single component and variant instead so the rest of the app is untouched.
- You can define fully custom component variants (e.g. a one-off 'my button' variant) and they remain type-safe and autocompletable.
- Themes can extend other existing themes instead of being built from scratch each time, and they compile into pre-built static CSS/JS artifacts for server-rendered frameworks like Next.js.
- Astryx's 'Tailwind Bridge' maps its design tokens (colors, radius, font size) onto Tailwind utility class names, so a team can keep writing Tailwind classes while the underlying values stay governed by the theme.
- Astryx includes a CLI built for AI agents, not humans, that fetches component documentation and can populate an AGENTS.md file so coding assistants write correct component code instead of inventing props.
Behavior stays fixed, only the look moves through tokens
WHAT TO LEARN
The reusable idea isn't Astryx itself — it's the split between a locked-down system layer and a fully token-driven theme layer, which removes the usual tradeoff between brand consistency and copy-paste maintenance debt.
02Templates & Components
- A tour of prebuilt templates (tables, forms, Kanban boards, IDE layouts, ecommerce, AI chat) demonstrates a component library's real range better than a plain feature list would.
- Every component in every template drawing from the same core library means options documented for one instance (icon, size, variant) hold true everywhere it's reused.
03Why Astryx Exists
- The two default design-system paths both have a cost: a big-brand system limits customization, and a copy-pasted one makes every project responsible for its own forked maintenance.
- Losing a shared upstream means accessibility fixes and updates silently become the adopting team's job.
04Building a Custom Theme
- A theme can be generated from just a handful of inputs — one brand color, a type scale, a radius value, and a motion speed — rather than defining every token by hand.
- Type scales built from a base size and ratio keep proportions consistent automatically as you add larger text sizes.
05Customizing Tokens & Variants
- Changing a token globally affects every component referencing it — scope the change to a single component/variant when you only want a local fix.
- TypeScript-based theme definitions keep custom variants type-safe and autocompletable, which plain CSS can't offer.
06Pre-Built Themes & Production Builds
- Extending an existing theme avoids rebuilding a whole design system from scratch for every new project.
- Compiling a theme into static CSS/JS ahead of time matters for SSR frameworks where styles must exist on first paint.
07Brand Consistency
- Centralizing styling in one theme file makes drift easy to spot in a diff, whether it was introduced by a person or an AI.
- A comparable outcome is possible with disciplined Tailwind tokens, but it isn't enforced the same way without type safety.
08Styling Components Directly
- One-off component overrides (via a style prop) let you deviate from the theme for a single instance without touching global tokens.
- Supporting multiple styling approaches (StyleX, Tailwind, className) lowers the switching cost for teams with existing conventions.
09Tailwind Bridge
- Mapping design tokens onto Tailwind utility classes lets a team keep writing familiar syntax while the values stay theme-governed.
- Mixing two full styling systems (e.g. StyleX and Tailwind) in the same project adds more confusion than it saves.
10Built for AI Agents
- A CLI that loads a library's own documentation into an AI agent's context reduces the chance the model invents incorrect props or patterns.
- Populating a project's AGENTS.md automatically gives coding assistants durable, correct guidance instead of relying on the model's training data for a newer library.
Terms worth knowing.
- StyleX
- Meta's own CSS-in-JS styling engine that Astryx is built on top of; it compiles styles at build time rather than generating them at runtime.
- shadcn
- A popular open-source pattern where component source code is copied directly into a project instead of installed as a dependency, giving full ownership but no upstream update path.
- Design token
- A named variable (color, radius, font size, motion speed) that a theme defines once and every component references, so changing the token updates the whole app consistently.
- Type scale ratio
- A multiplier applied repeatedly to a base font size to generate every larger text size in a design system, so each step up is a consistent proportion bigger than the last.
- Tailwind Bridge
- Astryx's mechanism for exposing its own design tokens as Tailwind utility class names, letting a team keep writing Tailwind syntax while the underlying values stay centrally governed.
- xstyle prop
- The prop Astryx components accept to apply one-off StyleX style overrides directly to a single component instance without touching the global theme.
- AGENTS.md
- A file some AI coding tools read for project-specific guidance; Astryx's CLI can generate one so agents know how to correctly use its components.
Things they pointed at.
Lines you could clip.
01:36
“Option one is that you adopt a big company system like Material UI, and now all of your apps look like a Google product with limited customizability.”
01:44
“you copy and paste the components into your project, but you now own the code, so every project has its own fork of every component”
02:58
“the system controls the behavior, accessibility, and quality, and themes control how it looks”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
This is Asterix, Meta's own version of Shad CN built on top of our styling solution, Style X. It's fully themeable, MIT licensed, and Meta says they've been refining this internally for eight years across 13,000 applications.
If you're someone who dislikes Tailwind or Shadzien, this one should definitely interest you. And even if you like Shadzien, let's see if there's a reason to switch.
Now I'm honestly really impressed with how many components and features that this launched with. It does go to show that they have been using this internally for years. There's over a 150 accessible components built on top of React, but instead of going through this list, the best way to show you is probably with our templates.
As it shows all of them in use together. We have a group table here with status sections and drop down menus. We have a payment form where you can see all of the individual form elements that you're going to need along with form status for things like error messages.
You can build a drag and drop Kanban board with it or build out an IDE with tabs and sidebars. Ecommerce sites, it has you handled there. And even an AI chat site, it can do that too complete with a markdown component to render in the response that you get back.
It also has a subscribe button. No. Wait.
That's YouTube. But go ahead and click subscribe if you like what we're doing here. It really helps out.
As you can see, Asterisk should really have you covered for pretty much all of your component needs, and all of these components actually come from that core library. So using this is just the same as using any component would be, and you can check out the documentation for all of the options that a component has. For example, a button can have an icon.
It can have end content, sizes, variants. Again, pretty much anything that you need. But now let's get into why you should actually use this.
Meta's argument is that design systems have always forced you into two bad options. Option one is that you adopt a big company system like Material UI, and now all of your apps look like a Google product with limited customizability. Option two is you grab something like ChatCN, you copy and paste the components into your project, but you now own the code, so every project has its own fork of every component, and upstream fixes become hard to follow because it's now your job to update all of these.
Some people don't like being responsible for all of that component code. So Asterisk claims to end that trade off. With Asterisk, the system controls the behavior, accessibility, and quality, and themes control how it looks, being customized at the token level for things like color, type, radius, motion, everything you could need without ever rewriting a component.
So here I have an application I made using some of those templates of the Asterisk website, and this is actually the default look of all of the components if you don't provide them with a theme. So it does come with a base theme. To create our own theme though, we can use the define theme function, and this actually comes with a couple cool features.
Features. The first one is the color option. Sometimes you know what your main brand color should be.
In my case, it's a bright green, but you don't wanna generate the background color, the accent color. You don't really wanna think about all of those individual ones. So with Asterisk here, if I just hit save on this, you can see it actually generates those for me.
So So I get a really good starting point just based off one hex color. After color, we then also have the typography options. This is pretty self explanatory.
We're using into here, but then we do also have a scale. So the base size for my text is going to be 14, but then it's gonna have a ratio of 1.2. What this means is every step up we take in the text size, so if I went for text size large, it's going to take the base and multiply it by 1.2, and that will be our individual text sizes, so it's generating all of those tokens for us.
After this, we can then control the radius. This one is pretty self explanatory. If I wanted our buttons to be rounded, I could set this to a high number.
And if I wanted everything to have a sharp corner, I could set this to zero. After this, we then have the final helper option, which is motion, and this essentially just controls the animation speed for things like hovering and pressing. You So can get really far with the custom theme by just defining a few variables up here, and that generates all of the tokens for you.
But what if you don't like some of the tokens that it selected? For example, if I wanted to change the color that it's chosen for my secondary button over here, we can go into the token section here. And a really cool thing about this theme and also this token section is that everything is type safe.
So it knows the tokens that we can actually define, and this is why it's better to do it in a JavaScript file or a TypeScript file instead of CSS since we can get that type safety. The background color of that secondary button is defined by the color neutral token. So all I need to do is set this to an array where one of them is light mode and the other is dark mode.
For me, that's just going to be the same color. If I hit save now, you can see it's changed the color of my secondary button, but we do have a problem where this text doesn't actually look right since I've now changed the color. So what I want to do is change that text color to black, but the problem is that is actually defined by the color text primary variable.
So if I go ahead and save this, you can see it changes a load of the text on my screen to be black instead of just the one in the button like I wanted. So instead of changing that token globally, instead what I can do is just change it for the component. This is where we can use the component section.
I say we want to change our button here. I provide what the variant is, in my case, secondary, and I can put any CSS variables that I want in here. So I just want the color to be black.
So now if I save this, we can see our secondary button has that black text color, but nothing else has changed now. It's limited to just this component. The other cool thing about this component section is you can then also define your own custom variants.
So say I wanted a variant of a button called my button, I can set this up here with a color of black and a background color of red. And then when I go to use my button, it's all type safe, and it knows that my button is a valid variant. You can see over here we now have a subscribe button.
So you can really do a lot just from that theme configuration, completely adjusting every part of each component or just the overall style of your app, and there's even some prebuilt themes if you want to get started from a good base. You can see there's loads of customizations in these files, and you can even extend themes so you can build on top of an existing one instead of making a completely new one each time.
All of these themes can then be built for production as well, so it works in server side rendered apps like Next. Js. It will statically generate all of the needed CSS and JavaScript.
One of the great benefits of having a single place like this for your themes is that it helps enforce your brand consistency. This is actually an argument I've seen against Tailwind where because a developer can write any class or an AI can write any, sometimes you end up with components that have a bit of a style drift since someone's decided to use their own Tailwind class.
When you have a set theme like this, it's just easier to keep track of as it all happens in one place. You can easily differ view if you want to see what's changed in your theme, and an AI doesn't need to think about the tailwind classes that it can use. It just uses the tokens and the components provided.
Although, I will say you can achieve something quite similar with tailwind and Chad CN where you define everything as a token. Although, it's not type safe, so it's going to be a lot harder to enforce. Now besides themes, you can also just style a component directly if you want to make a change, and there are actually a few ways to do this.
The recommended way is probably using x style because that uses style x, which this has been built on top of and meta obviously made. You can also use other libraries like tailwind, panda, and various things like that or just plain CSS with the class name. So you can see here I have overrides defined in style x.
I've got some styles called a primary button where I want a color to be white and a background color to be red. If I now just want to change a single button on this page, all I need to do is give it the x style prop and pass it my style x styles. And if I hit save on this, you can see my primary button now adjusts to those styles.
So this is how you style something if you just want it to be one off and you don't want to make this change for all of the primary buttons. You can see on the documentation all the different ways that you have to style a component. It is super flexible, but the really cool one that I want to point out is this tailwind support.
They've actually done this with what they call a tailwind bridge. So this lets you continue to use tailwind, but but it maps all of the design tokens from your theme that you set up in Asterisk to those tailwind utility classes. So things like your colors, radius, font size are all defined by the theme from Asterisk, and then tailwind can use those with the tailwind class names.
For me though, I'd probably continue to use style x as it's what Asterisk has been built around, and I just think mixing those libraries is going to be more confusion than it's worth. Moving on from styling though, another great feature of Asterisk is just how well it works with AI. There's actually an Asterisk CLI, but it's largely not meant for human use, and it's actually meant for AI.
It contains things like commands to fetch all of the documentation on each component, load it into context just to help your agents work with that component, and it can even fill your agents.m d just to give some more guidance. I actually found when I was using this in all of my demos that it did an extremely good job of this, and I found the models like Fable, GPT, all of them could work with Asterix even though it's a relatively new library.
Overall, you can see Asterix is just a seriously feature packed design system, and I only went over the basics. I highly recommend checking out the documentation as it is really well written, and most of these components even have best practice sections, which is going to be really helpful for an LLM. And there's also a playground if you just want to trial this without actually having a project.
Would you use something like this? Let me know in the comments down below. Wait there, subscribe, and as always, see you in the next one.
The Hook
The bait, then the rug-pull.
Meta just open-sourced the component library it has been quietly refining inside 13,000 of its own apps for eight years — and it's pitched as a direct answer to the tradeoff every team hits between a big-brand system and a pile of copy-pasted components nobody wants to own.
Named ideas worth stealing.
02:58model
Astryx Theme Token System
- Color
- Typography (base size + scale ratio)
- Radius
- Motion
Four inputs generate a complete, type-safe design system: one brand hex color auto-generates the accent and background palette, a base font size plus a ratio auto-generates the whole type scale, and radius/motion sliders control corner roundness and animation speed.
Steal forspinning up a brand-consistent look for an internal tool or new client project in minutes instead of hand-picking every shade and size
06:47concept
Tailwind Bridge
Maps a theme's design tokens (color, radius, font size) onto Tailwind utility class names, so a codebase can keep writing familiar Tailwind classes while the actual values stay centrally governed by the theme file.
Steal formigrating a Tailwind-heavy codebase toward token governance without a full rewrite
How they asked for the click.
VERBAL ASK
08:11product
“Radically better observability stack — betterstack.com”
Silent text-only end card naming the channel's own product (Better Stack) with a URL; no verbal ask in the transcript, just an overlay in the final seconds alongside the sign-off.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
