UI Libraries for Claude Code: Avoiding the Default AI Aesthetic

One of the easiest ways to make AI built UI look better is to stop letting it build every component from scratch. In this video, I'm going to go over the component libraries I use with Claude, the three kinds worth knowing, what each one is good for, and how to get Claude to actually use them. When you ask AI for a toast, a command menu, or a loading state, it builds one from scratch with default styling every time. It doesn't know how a toast should stack or how a drawer should feel when you drag it. Component libraries are the fastest ways to give the model someone else's taste, and each kind does a different job. The first kind is foundations. Things like Shadcn, Base UI, and Radix. These give you the behavior of a component—keyboard navigation, focus, accessibility—all the stuff that's easy to get wrong when you build it yourself. Then you do the styling. This is what you'd use for most of your app. Buttons, inputs, dialogues, dropdowns, tabs, and the rest of your components. One thing to watch out for, default Shadcn has become an AI look of its own. If you've used tools like Claude Code or Lovable enough, you can probably spot it right away. Same radius, same grey, same fonts. So, use it as a starting point and then change the radius, the colors, and the type so it looks like your product. Those three things carry most of the personality. A tighter radius and a serif heading can make the exact same components feel like an editorial product instead of a SaaS template. And since Shadcn copies the code into your project instead of hiding it in a package, Claude can change all of it. Claude is really good at this if you give it your brand colors and fonts up front. The second kind is specialists. These are libraries that do one component really well. Sonner is for toasts. It handles how they stack, how they expand when they hover, and how they animate in and out. Vault is for drawers. The kind you drag up from the bottom on mobile and flick down to close. Command K is for command menus, the search box you open with Command K. And NumberFlow animates numbers when they change, so a price or account ticks over instead of jumping. You usually notice these when they're missing. When AI builds toasts itself, they tend to pile on top of each other or vanish before you can read them. A hand-built drawer often won't drag at all; it just opens and closes. And a homemade command menu usually breaks the moment you try to use it with the keyboard. None of these are huge features, but these are the details that make a product feel finished, and they're exactly the details AI skips when it builds things from scratch. Sonner and Vault were both made by Emil Kowalski, and he also has a skill called pick-ui-library. When Claude needs a component, it tells Claude which library to use from a short list, with one sentence on why. So, if Claude starts building its own toast system, it'll use Sonner instead. The third kind is design components. These are your finished, styled components that you copy straight into your project. Libraries like Beautiful UI, RareUI, Magic UI, Aceternity, and sites like 21st.dev that collect components from a lot of different people. If you're building an AI product, Beautiful UI is the one I'd look at first. It's made by Turbo, and it's built specifically for AI interfaces. Streaming text, approval cards for when an agent needs permission, diff views, and agent screens. Most component libraries were made before AI products existed, so they don't really cover these states yet. RareUI is more for the flashy moments, animated buttons, text effects, interactive backgrounds. You install a component with one command and the code lands in your project so you can edit it. Magic UI is similar, with over 150 free and open-source animated components and effects built with React, Typescript, Tailwind CSS, and Motion. Perfect companion for Shadcn. And Aceternity is the one for landing page effects. 3D cards, background beams, and marquees. And you can install its components with the Shadcn CLI, or have your coding agent add them for you. And 21st.dev is more of a marketplace. Lots of different design engineers publish their components there, so it's a good place to look when you need something specific and don't want to commit to one library. With this whole group, I keep one rule in mind: one huge standout moment per page. One animated hero or one interactive background can make a page feel designed. 10 of them on the same page is how you end up with the next AI-generated look, where everything glows and moves and nothing stands out. So, how do you actually get Claude to use these? The simplest way is to name the library in your prompt. Say, "Use Shadcn for the base components and Sonner for toasts," and it will. When you can, install through the library's CLI or registry so the code lives in your own project. That way Claude can read it and you can change it. And if you don't want to think about it every time, install the pick-ui-library skill and let it choose for you. I'll put links to every library from this video down in the description. Drop a like and subscribe if you want more AI design workflows and I'll see you in the next one. Thanks for watching.