Don't waste time evaluating which Web UI (Component) libraries to use. If you're already using React, we recommend going with shadcn/ui – as it's the most extensible and strikes a balance between flexibility and simplicity. For other environments, or for the easiest experience, go with Bootstrap.
When using Bootstrap it's best to opt for the framework specific integration of Bootstrap, for example Angular users would opt for NgBootstrap.
Shadcn/ui is more recent, but changed the game. It puts the components totally under your control since the code lives in your repository, and still acts like a separate library by utilising path aliases.
The trade-off of this approach is that any updates made to the Shadcn code base won't automatically be reflected in your code base. You should consider this when electing to use Shadcn. If having a distinct look and feel for your UI is unimportant, and you don't want to maintain your UI, a conventional library such as Material UI may be better for your project.
Shadcn builds off radix-ui and TailwindCSS, an industry standard framework that offers an opinionated approach to managing your css classes. This makes it even easier to manage customizations made to your components.
While Shadcn/ui is largely copying their component code into your project, they have a CLI which is recommended over manual installation.
To install/update all Shadcn/ui components at once, you can use the npx command: npx shadcn@latest add -a -y -o.
V0 is the premier frontend code generation tool by Vercel. It has partnered with shadcn/ui to allow you to extend the clean, modern shadcn components in a myriad of ways. It's also integrated with the shadcn/ui path alias conventions. For more info, see the related rule on generating mockups with V0.
In effect, these technologies together let you quickly build your own custom component library for any React application.
Schadcn uses a special cn utility under the hood in its component definition. This utility will override any of its default tailwind classes with the classes provided as an argument. This means that effectively you can apply tailwind classes to Schadcn components as you would an ordinary html element.
Shadcn's cn utility uses tailwind-merge to merge sets of tailwind classes together and clsx to append class names provided as arguments for a component provided the value is truthy.
const Heading1 = ({className, children}: {className: string, children: React.ReactNode})=> {{/*Classes in the second argument of "cn"will override classes in the first argument*/}return <h1 className=cn("font-semibold text-xl", className)>{children}</h1>}const Layout = ({children}: {children: React.ReactNode})=>{return <main>{/* text-2xl will be applied here */}<Heading1 className="text-2xl">Hello world!</Heading1>{children}</main>}
For a more in depth look, see the video later on.
Bootstrap has been the go-to general-purpose component library for years.
While Bootstrap is a safe and reliable choice, it does have drawbacks, such as limited customizability and heavy reliance on CSS overrides to achieve bespoke designs.
You can see the popularity of various frameworks at star-history.com.
First consider the import type – some component libraries, such as shadcn/ui, use a "copy and paste" style of code sharing, while others (Bootstrap) have typical import behaviour (hiding implementation details behind their APIs). The latter kind are typically easier to use, but harder to extend.
There's also a divide in terms of maintenance responsibility – if you copy and modify code into your project, you'll have update code to newer versions yourself.
Alternatively, package imports may be upgraded and maintained by the community, but you have to be conscious of any API changes.
When evaluating a component library, also keep in mind:
What's your favourite UI library?