shadcn/ui blocks, components and 21 Next.js and Astro templates via the CLI
COMPONENTS
Tailwind CSS Components
50+ Tailwind component libraries and UI kits for React, Next.js, shadcn/ui, Vue and HTML. Free and premium, with live previews.
ShadcnblocksSPONSOREDshadcn/ui blocks, components and 21 Next.js and Astro templates via the CLISPOTLIGHT · COMPONENTSSponsoredYour product here
Advertise in Components FROM TAILKITS UI · OUR OWN LIBRARYBrowse Tailkits UI
Hero 1Gradient hero with navbar, headline, subtext, email form and CTAHero Pricing 1Single‑plan card with monthly/annual toggle, price and feature listPricing Bento Grid 1A unique bento grid style which consists of different layouts.Bento Grid Testimonial 1Two‑column testimonial with avatar, gradient quote panel and slider controlsTestimonial
All components
59 components Reviewed by the Tailkits editors. No votes, no rankings.
Free Base UI and Tailwind 4 components for React, now with Chat UI
Full-page shadcn/ui examples for Next.js: dashboards, apps and email templates
Open-source component library for React + Tailwind
Beautiful Shadcn blocks - ready-to-use & built for speed
Launch UI - shadcn/ui Blocks for Landing Pages
Refined animated React components for design engineers
Premium React UI components
Open-source charts built on shadcn/ui for React
Official Livewire components, free and Pro
Free shadcn/ui data grid, filters and chat examples; Pro blocks from $249
AI site builder, Next.js, Tailwind, no code
Animated toast alerts, beautiful by default
Animated React components, page blocks and themeable app UI via shadcn CLI
Headless Svelte components with accessibility built in
Unstyled, accessible React components
Free animated React components and blocks for shadcn/ui and Tailwind CSS 4
shadcn/ui without React
React UI blocks for Tailwind + shadcn
Angular component kit with 130+ building blocks
70+ animated shadcn/ui components for Next.js
Free and Pro shadcn/ui marketing blocks and pages
120+ responsive UI blocks for React.
Unstyled components for React, Vue, Solid, Svelte
5 000+ Tailwind React components
Unstyled Svelte components with WAI-ARIA support
Preline: 740+ Tailwind pages & components
500+ Tailwind Plus UI components
50+ animated sections and 3+ templates
225+ responsive Tailwind CSS components
UI blocks for dashboards, built with shadcn/ui
Launch Rails apps quickly with ready Tailwind components
Accessible, unstyled React UI primitives with examples
Retro Tailwind components ready to copy‑paste
TailwindCSS and shadcn/ui UI kit
Pixel-cornered shadcn/ui components on Base UI, with 42 themes and charts
Accessible Angular UI primitives, Tailwind ready
Interactive Tailwind components for React and Vue.js
33 free to use background snippets
Framer Motion components from ibelick
UI components built with Tailwind CSS for React and Next.js
Reusable shadcn/ui elements
Accessible, unstyled React components and hooks
Free Tailwind CSS components
500+ Tailwind components with Figma file
47+ React UI Components for Tailwind CSS
800+ landing page components for Tailwind, Webflow & Figma
300+ copy-paste Tailwind CSS UI components
16 React & Vue UI components
Open source React and Figma design system
Open-source neobrutalism Tailwind UI component library
Free Tailwind & Alpine component library
Fast, accessible, and fully customizable components built for e-commerce
Tailwind CSS Vue 3 dashboard template with dark mode
80+ ready-made Tailwind CSS components
60+ customizable Tailwind CSS blocks
55 themeable components for rapid web design.
226 Free & Open Source Tailwind CSS Components
README badges styled as shadcn/ui buttons
Nothing here. Yet.
Try a different search or clear a filter to find what you need.
A little less searching. A little more building.
Built something good? Submit a productHow to choose a Tailwind component library
Each listing here is a library or UI kit, not a single component. Its product page shows the price, the frameworks it works with and a live preview when the maker has one.
Copy-paste or npm package
Copy-paste libraries, the model shadcn/ui made popular, put the component code in your project: you own it and can change anything, but updates are manual. Libraries built on shadcn/ui usually install through its CLI, one component at a time. Package libraries install from npm and update with a version bump, but you customize them within their API.
Styled or headless
Styled libraries come with a finished look that you adjust with Tailwind classes or theme variables. Headless libraries, such as those built on Radix UI, handle behavior and accessibility (focus, keyboard, ARIA) and leave the styling to you. Start headless if you have your own design system, styled if you need to ship fast.
Check before you commit
Framework: most libraries here are for React. The Works with line on each product page lists Vue, Svelte, Angular or HTML support.
Tailwind version: Tailwind CSS v4 configures themes in CSS, so a library written for v3 may need changes in a v4 project.
License: free libraries are usually open source; paid kits may limit projects or seats.
Accessibility: try the live preview with a keyboard and a screen reader before you rely on it.
Tailwind Plus and alternatives
Tailwind Plus, formerly Tailwind UI, stopped selling to new customers on September 9, 2026, when Tailwind Labs joined Shopify. See Tailwind Plus alternatives for what changed and what to use instead. Our own library, Tailkits UI, has landing page sections in HTML and shadcn/React. For complete sites rather than parts, browse Tailwind templates.
GOOD TO KNOW
Frequently asked questions
Answers to common questions about components.
Are these Tailwind components free?
Many are. Every card shows whether a library is free, freemium or paid, and you can filter the list by price. Free libraries are usually open source, often under the MIT license.
Do these libraries support Tailwind CSS v4?
Many do, but not all. Tailwind CSS v4 moved theme configuration from tailwind.config.js into CSS, so a library written for v3 may need changes. The product page lists the version under Key points when we could confirm it.
Can I use these components with Vue, Svelte or plain HTML?
Most libraries here are built for React, often with shadcn/ui. Some support Vue, Svelte, Angular or plain HTML; the Works with line on each product page lists what a library supports.
What is shadcn/ui?
shadcn/ui is a set of open-source React components built with Tailwind CSS that you copy into your project instead of installing as a package. Many newer libraries build on it and install through its CLI. You only need it if your project uses React.
Can I still buy Tailwind Plus?
Not as a new customer. Tailwind Labs closed Tailwind Plus, formerly Tailwind UI, to new buyers on September 9, 2026, when it joined Shopify. Existing customers keep access. The libraries listed here, including our own Tailkits UI, are alternatives you can still get.
What is Tailkits UI?
Tailkits UI is our own component library: landing page sections that ship as HTML and as shadcn/React components, restyle from a DESIGN.md file or a shadcn theme, and work with AI editors through MCP. The rest of this page lists libraries from other makers.