Use shadcn/ui with Tailwind CSS for components, because most AI builders already generate code for them. Add daisyUI or HeroUI if you want ready-made styles, Magic UI for animated sections, Lucide for icons, Fontsource for self-hosted fonts and Unsplash, Pexels or unDraw for images. Paid Tailwind Plus is closed to new customers, so use these free kits instead.
An AI tool picks a look for you, usually shadcn/ui and Tailwind CSS. Knowing which free kits, icons and images exist lets you steer it instead of accepting the default. Each entry notes the licence, because that is what you need to check before you publish.
The 12 picks
Swipe or use the arrows.
Free, MIT licenceshadcn/ui
Copy-paste React components built on Tailwind CSS and Radix that you own as code, added with a command-line tool. It is the default most AI builders generate. Its MCP server lets an agent install components, so review what it changes.
Free, MIT licenceTailwind CSS
The utility-first CSS framework that Lovable, v0 and Bolt generate code for. Free and MIT licensed, and Tailwind Labs says it will stay MIT. Tailwind Plus is closed to new customers since 9 September 2026.
Free, open sourceRadix UI Primitives
Unstyled, accessible building blocks such as dialogs, menus and tabs. shadcn/ui is built on them, so you meet Radix through shadcn rather than using it directly.
Free, MIT licencedaisyUI
A Tailwind plugin that adds short class names like btn and card, plus themes, so AI-written markup stays small. Free under the MIT licence, and it needs Tailwind CSS.
Free, Apache-2.0HeroUI
Accessible React components, formerly NextUI, on Tailwind CSS v4, with an MCP server for agents. Free under Apache-2.0. Version 3 changed a lot, so older NextUI tutorials will not match.
Free, MIT licenceMagic UI
Animated React and Tailwind components, such as marquees and shiny buttons, that you copy into landing pages. Free and MIT licensed; a paid Pro bundle also exists.
Free, 2 copies a day21st.dev
A community catalogue of React components and templates, installed through a shadcn-style registry or an MCP. Browsing is free and free users get two component copies a day. Licences are set by each author, so check before commercial use.
Free, ISC licenceLucide
Open-source icon set of more than 2,000 SVG icons with packages for React and other frameworks. ISC licence. Versions jumped to 1.x, so older tutorials may import differently.
Free, open licencesGoogle Fonts and Fontsource
Open-licensed web fonts, mostly under the SIL Open Font License and free for commercial use. Fontsource installs them through npm so you can self-host, which loads faster and avoids third-party requests.
Free, Unsplash LicenseUnsplash
Free photos under the Unsplash License: use them commercially without permission or credit. You may not sell them unchanged or build a competing photo service.
Free, Pexels LicensePexels
Free photos and videos under the Pexels License for websites and ads without credit. You may not sell unaltered copies or imply that a person in a photo endorses you.
Free, own licenceunDraw
Colour-customisable SVG illustrations for landing pages, free for commercial use without credit. Download and self-host them; embedding from its server and using them to train AI are not allowed.
Compare in a table
Show the full comparison table
| Tool | Best for | Free plan |
|---|---|---|
| shadcn/ui | Default kit for AI builders | Free, MIT licence |
| Tailwind CSS | Styling for what AI builds | Free, MIT licence |
| Radix UI Primitives | Accessible behaviour under your styles | Free, open source |
| daisyUI | Fast styled UI, few classes | Free, MIT licence |
| HeroUI | Accessible React components | Free, Apache-2.0 |
| Magic UI | Animated landing sections | Free, MIT licence |
| 21st.dev | Polished community blocks | Free, 2 copies a day |
| Lucide | Consistent open icons | Free, ISC licence |
| Google Fonts and Fontsource | Free fonts, self-hosted | Free, open licences |
| Unsplash | Hero and blog photos | Free, Unsplash License |
| Pexels | Free photos and video | Free, Pexels License |
| unDraw | Clean spot illustrations | Free, own licence |
Get started this week
- Ask your AI tool which UI library and icon set it used in the project.
- Add one new section using a shadcn/ui component installed with its command-line tool.
- Swap the font for a self-hosted Fontsource one and check the page still loads fast.
How to choose
- Let the AI use shadcn/ui and Tailwind, then name the kit you want when you prompt for a new section.
- Install components with the command-line tool and read the diff; copied code is yours to maintain.
- Check each image or component's licence before publishing, especially for commercial use.
- Self-host fonts and illustrations rather than linking to another site's server.
Free plans change. Limits above were checked on 3 Nov 2026; confirm on each tool's pricing page before relying on them.
Frequently asked questions
What UI library do Lovable and v0 use?
Both generate React code with Tailwind CSS and typically shadcn/ui components. Learning those two makes AI-written code far easier to read and change.
Is shadcn/ui free?
Yes. It is MIT licensed and works by copying component source into your project, so there is no package to pay for, and you maintain the code yourself.
Can I use Unsplash or Pexels photos in a commercial app?
Yes, under their own licences, without credit. Both stop you selling unchanged copies, and you should avoid photos that show people in a way that implies endorsement.
Is Tailwind Plus still available?
Not to new customers: Tailwind Labs closed it on 9 September 2026 when it joined Shopify. Tailwind CSS itself stays free and MIT licensed, and shadcn/ui, daisyUI and HeroUI are free alternatives.
Learn this with mentors
Programmes for builders and engineers with admissions open: live classes, mentors and project work.
