**UI Libraries for Claude Code (Ban the AI Look) — Transcript & Summary | SozAI**
Source: https://sozai.app/transcript/ui-libraries-claude-code-ban-ai-look/

Griffin Wooldridge explains three kinds of UI component libraries (foundations, specialists, designed components) for making Claude-built interfaces look less generic, and how to prompt Claude to use

## Key Takeaways

- Use foundation libraries like shadcn/ui for behavior, but customize radius, colors, and fonts to avoid the default AI look.
- Specialist libraries like Sonner and Vaul handle details AI usually gets wrong when building from scratch.
- Designed component libraries accelerate visual polish, but limit flashy effects to one standout per page.
- Naming libraries explicitly in prompts or using the pick UI library skill steers Claude toward better components.

## What the video covers

- AI-built UI tends to build every component from scratch with default styling, missing details like toast stacking, drawer drag behavior, and keyboard navigation.
- Foundation libraries (shadcn/ui, Base UI, Radix) provide component behavior like accessibility and focus; the default shadcn look has become a recognizable 'AI look' that should be customized.
- Customizing radius, colors, and typography carries most of a product's personality; since shadcn copies code into the project, Claude can modify it freely.
- Specialist libraries do one component well: Sonner for toasts, Vaul for drawers, Command K for command menus, and Number Flow for animated numbers.
- Emil Kowalski created Sonner and Vaul and also published a 'pick UI library' skill that helps Claude choose the right library from a short list.
- Designed component libraries (Beautiful UI, Rare UI, Magic UI, Aceternity UI, 21st.dev) offer finished styled components; Beautiful UI is highlighted for AI-specific interfaces like streaming text and approval cards.
- Rule of thumb: use one standout animated or interactive moment per page to avoid the cluttered 'glowing everything' AI aesthetic.
- To get Claude to use these, name the libraries in the prompt or install the pick UI library skill, and install components via CLI/registry so the code lives in the project.

## Chapters

1. 00:00 Why AI-built UI looks generic
2. 00:44 Foundation libraries and the shadcn AI look
3. 01:50 Specialist libraries for toasts, drawers, and menus
4. 02:45 Pick UI library skill
5. 03:02 Designed component libraries
6. 03:30 One standout moment per page
7. 03:53 Prompting Claude to use these libraries

Answers

## Questions about this video

What are the three kinds of component libraries the video recommends?

The video recommends foundations (shadcn/ui, Base UI, Radix) that provide component behavior, specialists (Sonner, Vaul, Command K, Number Flow) that do one component well, and designed components (Beautiful UI, Rare UI, Magic UI, Aceternity, 21st.dev) that offer finished styled components to copy into a project.

How can you stop shadcn/ui from looking like the generic AI style?

The video suggests changing the border radius, color palette, and typography, since these carry most of the personality. A tighter radius and a serif heading, for example, can make the same components feel editorial rather than like a SaaS template.

How do you get Claude to actually use these libraries?

You can name the libraries directly in your prompt, such as asking it to use shadcn for base components and Sonner for toasts, or install the pick UI library skill so Claude chooses appropriate libraries itself.

## Full Transcript — Download SRT & Markdown

00:00

Speaker A

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

00:11

Speaker A

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.

00:21

Speaker A

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

00:31

Speaker A

foundations. Things like shad CN base UI and radics. 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.

00:44

Speaker A

This is what you'd use for most of your app. Buttons, inputs, dialogues, drop downs, tabs, and the rest of your components. One thing to watch out for, default Shad Cenne has become an AI look of its own. If you've used tools like

00:56

Speaker A

Claude Code or Lovable enough, you can probably spot it right away. Same radius, same gray, 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

01:08

Speaker A

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 SAS template. And since Chad Cienne copies the code into your project instead of

01:19

Speaker A

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

01:30

Speaker A

toasts. It handles how they stack, how they expand when they hover, and how they animate in and out. V is for drawers, the kind you drag up from the bottom on mobile and flick down to close. Command K is for command menus,

01:42

Speaker A

the search box you open with command K. And number flow animates numbers when they change, so a price or a count ticks over instead of jumping. You usually notice these when they're missing. When AI builds toasts itself, they tend to

01:54

Speaker A

pile on top of each other or vanish before you can read them. A handbuilt 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

02:05

Speaker A

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 V were both made by Emil Kowalsski and he also has a

02:16

Speaker 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.

02:27

Speaker A

[music] The third kind is designed components. These are finished styled components that you copy straight into your project. Libraries like Beautiful UI, Rare UI, Magic UI, Aceternity, and sites like 21st. that collect components from a lot of different people. If

02:42

Speaker A

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.

02:50

Speaker A

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. Rare UI is more for the flashy moments. Animated buttons,

03:04

Speaker A

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 animated components and it's made to sit on top of Shad CN

03:17

Speaker A

so it fits right into the foundation we talked about earlier. Hassetinity is the one for landing page effects, 3D cards, background beams and mares. And you can install its components with the Shad CN CLI or have your coding agent add them

03:30

Speaker A

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

03:41

Speaker A

whole group, I'd 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

03:53

Speaker A

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 shad CN for the base components and sonner for

04:04

Speaker A

toasts and it will when you can install through the library 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

04:15

Speaker A

pick UI library skill and let it choose for you. I'll put links to every library from this video down in the description.

04:21

Speaker A

Drop a like and subscribe if you want more AI design workflows and I'll see you in the next one. Thanks for watching.

Topics: Claude Code UI component libraries shadcn/ui AI design Sonner Vaul Magic UI Beautiful UI frontend design AI-generated UI

Study this video

- [Flashcards from this video](https://sozai.app/tools/flashcard-maker/?from=transcript&id=94294)
- [Quiz on this video](https://sozai.app/tools/quiz-generator/?from=transcript&id=94294)
- [Crossword from this video](https://sozai.app/tools/crossword-maker/?from=transcript&id=94294)
- [Word search from this video](https://sozai.app/tools/word-search-maker/?from=transcript&id=94294)
- [Study guide from this video](https://sozai.app/tools/study-guide-maker/?from=transcript&id=94294)

Free, made by AI from this transcript. No signup.


---
This is the markdown twin of https://sozai.app/transcript/ui-libraries-claude-code-ban-ai-look/ — the same content, without the markup.
Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back.
Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/