스크립트
00:00:00This is Asterix, Meta's own version of ShadCN, built on top of our styling solution, StyleX.
00:00:05It's fully themable, MIT licensed, and Meta says they've been refining this internally
00:00:09for 8 years across 13,000 applications. If you're someone who dislikes Tailwind or ShadCN,
00:00:15this one should definitely interest you, and even if you like ShadCN,
00:00:18let's see if there's a reason to switch.
00:00:24Now I'm honestly really impressed with how many components and features that this launched with,
00:00:29it does go to show that they have been using this internally for years.
00:00:32There's over 150 accessible components built on top of React, but instead of going through this list,
00:00:37the best way to show you is probably with our templates, as it shows all of them in use together.
00:00:41We have a group table here with status sections and drop-down menus.
00:00:44We have a payment form where you can see all of the individual form elements that you're going to need,
00:00:48along with form status for things like error messages.
00:00:50You can build a drag-and-drop Kanban board with it, or build out an IDE with tabs and sidebars.
00:00:56E-commerce sites, it has you handled there.
00:00:58And even an AI chat site, it can do that too, complete with a markdown component to render in the response that you get back.
00:01:03It also has a subscribe button.
00:01:05No wait, that's YouTube, but go ahead and click subscribe if you like what we're doing here, it really helps out.
00:01:10As you can see, Asterix should really have you covered for pretty much all of your component needs,
00:01:14and all of these components actually come from that core library.
00:01:16So 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.
00:01:23For example, a button can have an icon, it can have end content, sizes, variants, again, pretty much anything that you need.
00:01:30But now let's get into why you should actually use this.
00:01:32Meta's argument is that design systems have always forced you into two bad options.
00:01:36Option 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.
00:01:44Option two is you grab something like ShadCN, you copy and paste the components into your project, but you now own the code,
00:01:50so 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.
00:01:57Some people don't like being responsible for all of that component code, so Asterix claims to end that tradeoff.
00:02:03With Asterix, the system controls the behavior, accessibility, and quality, and themes control how it looks,
00:02:08being customized at the token level for things like color, type, radius, motion, everything you could need without ever rewriting a component.
00:02:14So here I have an application I made using some of those templates off the Asterix website,
00:02:18and 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.
00:02:24To create our own theme though, we can use the define theme function,
00:02:27and this actually comes with a couple cool features.
00:02:29The first one is the color option.
00:02:31Sometimes you know what your main brand color should be, in my case it's a bright green,
00:02:35but you don't want to generate the background color, the accent color, you don't really want to think about all of those individual ones.
00:02:40So with Asterix here, if I just hit save on this, you can see it actually generates those for me,
00:02:44so I get a really good starting point just based off one hex color.
00:02:48After color, we then also have the typography options.
00:02:50This is pretty self-explanatory, we're using into here, but then we do also have a scale.
00:02:54So the base size for my text is going to be 14,
00:02:57but then it's going to have a ratio of 1.2.
00:02:59What this means is every step up we take in the text size, so if I went for text size large,
00:03:03it's going to take the base and multiply it by 1.2, and that will be our individual text sizes,
00:03:08so it's generating all of those tokens for us.
00:03:10After this, we can then control the radius.
00:03:12This one is pretty self-explanatory.
00:03:14If I wanted our buttons to be rounded, I could set this to a high number,
00:03:17and if I wanted everything to have a sharp corner, I could set this to zero.
00:03:21After this, we then have the final helper option, which is motion,
00:03:23and this essentially just controls the animation speed for things like hovering and pressing.
00:03:27So you can get really far with the custom theme by just defining a few variables up here,
00:03:31and that generates all of the tokens for you.
00:03:34But what if you don't like some of the tokens that it's selected?
00:03:36For example, if I wanted to change the color that it's chosen for my secondary button over here,
00:03:40we can go into the token section here,
00:03:42and a really cool thing about this theme and also this token section is that everything is type safe,
00:03:47so it knows the tokens that we can actually define,
00:03:49and this is why it's better to do it in a JavaScript file or a TypeScript file instead of CSS,
00:03:53since we can get that type safety.
00:03:55The background color of that secondary button is defined by the color neutral token,
00:03:58so all I need to do is set this to an array where one of them is light mode and the other is dark mode.
00:04:03For me, that's just going to be the same color.
00:04:05If I hit save now, you can see it's changed the color of my secondary button,
00:04:08but we do have a problem where this text doesn't actually look right,
00:04:11since I've now changed the color.
00:04:12So what I want to do is change that text color to black,
00:04:15but the problem is that is actually defined by the color text primary variable,
00:04:18so if I go ahead and save this,
00:04:19you can see it changes a load of the text on my screen to be black,
00:04:22instead of just the one in the button like I wanted.
00:04:24So instead of changing that token globally,
00:04:26instead what I can do is just change it for the component.
00:04:28This is where we can use the component section.
00:04:30I say we want to change our button here.
00:04:32I provide what the variant is, in my case secondary,
00:04:35then I can put any CSS variables that I want in here.
00:04:37So I just want the color to be black.
00:04:39So now if I save this,
00:04:40we can see our secondary button has that black text color,
00:04:42but nothing else has changed now.
00:04:44It's limited to just this component.
00:04:46The other cool thing about this component section
00:04:47is you can then also define your own custom variants.
00:04:50So say I wanted a variant of a button called my button.
00:04:52I can set this up here with a color of black and a background color of red,
00:04:56and then when I go to use my button,
00:04:57it's all type safe,
00:04:58and it knows that my button is a valid variant.
00:05:00You can see over here,
00:05:01we now have a subscribe button.
00:05:02So you can really do a lot just from that theme configuration,
00:05:05completely adjusting every part of each component,
00:05:07or just the overall style of your app.
00:05:09And there's even some pre-built themes
00:05:10if you want to get started from a good base.
00:05:12You can see there's loads of customizations in these files,
00:05:15and you can even extend themes
00:05:16so you can build on top of an existing one
00:05:18instead of making a completely new one each time.
00:05:20All of these themes can then be built for production as well.
00:05:23So it works in server-side rendered apps like Next.js.
00:05:26It will statically generate all of the needed CSS and JavaScript.
00:05:28One of the great benefits of having a single place like this for your themes
00:05:31is that it helps enforce your brand consistency.
00:05:34This is actually an argument I've seen against Tailwind,
00:05:36where because a developer can write any class,
00:05:38or an AI can write any,
00:05:40sometimes you end up with components that have a bit of a style drift
00:05:42since someone's decided to use their own Tailwind class.
00:05:45When you have a set theme like this,
00:05:46it's just easier to keep track of as it all happens in one place.
00:05:49You can easily differ view if you want to see what's changed in your theme,
00:05:53and AI doesn't need to think about the Tailwind classes that it can use,
00:05:56it just uses the tokens and the components provided.
00:05:58Although I will say you can achieve something quite similar
00:06:00with Tailwind and ShadCN,
00:06:01where you define everything as a token,
00:06:03although it's not type-safe,
00:06:05so it's going to be a lot harder to enforce.
00:06:06Now besides themes,
00:06:07you can also just style a component directly
00:06:09if you want to make a change,
00:06:10and there are actually a few ways to do this.
00:06:12The recommended way is probably using X-Style,
00:06:14because that uses StyleX,
00:06:16which this has been built on top of,
00:06:17and Meta obviously made.
00:06:19You can also use other libraries like Tailwind,
00:06:21Panda, and various things like that,
00:06:22or just plain CSS with the class name.
00:06:24So you can see here,
00:06:25I have overrides defined in StyleX.
00:06:27I've got some styles called a Primary button,
00:06:29where I want a color to be white,
00:06:30and the background color to be red.
00:06:32If I now just want to change a single button on this page,
00:06:34all I need to do is give it the X-Style prop,
00:06:36and pass it my StyleX styles,
00:06:38and if I hit save on this,
00:06:39you can see my Primary button now adjusts to those styles.
00:06:42So this is how you style something,
00:06:43if you just want it to be one-off,
00:06:45and you don't want to make this change
00:06:46for all of the Primary buttons.
00:06:47You can see on the documentation
00:06:48all of the different ways that you have to style a component.
00:06:51It is super flexible,
00:06:52but the really cool one that I want to point out
00:06:53is this Tailwind support.
00:06:55They've actually done this
00:06:56with what they call a Tailwind bridge.
00:06:58So this lets you continue to use Tailwind,
00:07:00but it maps all of the design tokens
00:07:01from your theme that you set up in Asterix
00:07:03to those Tailwind utility classes.
00:07:06So things like your colors,
00:07:07radius,
00:07:07font size,
00:07:08are all defined by the theme from Asterix,
00:07:10but then Tailwind can use those
00:07:11with the Tailwind class names.
00:07:13For me though,
00:07:13I'd probably continue to use StyleX
00:07:15as it's what Asterix has been built around,
00:07:17and I just think mixing those libraries
00:07:18is going to be more confusion than it's worth.
00:07:20Moving on from styling though,
00:07:21another great feature of Asterix
00:07:22is just how well it works with AI.
00:07:24There's actually an Asterix CLI,
00:07:26but it's largely not meant for human use,
00:07:28and it's actually meant for AI.
00:07:29It contains things like commands
00:07:30to fetch all of the documentation
00:07:31on each component,
00:07:33load it into context
00:07:34just to help your agents work with that component,
00:07:36and it can even fill your agents.md
00:07:38just to give some more guidance.
00:07:40I actually found when I was using this
00:07:41in all of my demos
00:07:42that it did an extremely good job of this,
00:07:43and I found the models like Fable,
00:07:45GPT,
00:07:45all of them could work with Asterix,
00:07:47even though it's a relatively new library.
00:07:49Overall,
00:07:49you can see Asterix is just a seriously
00:07:51feature-packed design system,
00:07:52and I only went over the basics.
00:07:54I highly recommend checking out the documentation
00:07:55as it is really well written,
00:07:57and most of these components
00:07:58even have best practice sections,
00:08:00which is going to be really helpful for an LLM,
00:08:02and there's also a playground
00:08:03if you just want to trial this
00:08:04without actually having a project.
00:08:06Would you use something like this?
00:08:07Let me know in the comments down below,
00:08:08wait there, subscribe,
00:08:09and as always,
00:08:10see you in the next one.