Every component below has a Tailwind CSS 4 version built from utility classes, with a live demo and code you can copy. Most need nothing else; where a design needs something utilities cannot express, such as keyframes or a theme colour, it comes as a short @theme block you add to your main CSS.

The demos load the @tailwindcss/browser build so they run anywhere. In a real project, install Tailwind with the Vite plugin or the CLI instead and paste the markup into your templates. Each component also exists in plain CSS and Bootstrap 5, one tab away on its page.

604 free Tailwind CSS 4 components, each with a live demo and copyable code.

Forms & inputs

Forms & inputs 8

Login forms 22

Sign-up & registration forms 8

Checkboxes & radios 8

Toggle switches 8

Range sliders 8

Multiselects 8

File uploads 8

Form wizards 8

Search bars 8

Navigation

Menus 22

Headers 22

Footers 22

Sidebars 8

Dropdown menus 8

Tabs 22

Breadcrumbs 8

Pagination 8

Content & data

Cards 22

Tables & datatables 22

Accordions 8

Timelines 22

Calendars 22

Clocks & timers 8

Dashboard widgets 8

Profile cards 8

UI elements

Tooltips & popovers 8

Badges, chips & avatars 8

Social media icons 8

Star ratings 8

App UI

Chat UI 8

Drag & drop and kanban 8

To-do lists 8

Page sections

Hero sections 8

Testimonials 8

Feature sections & CTAs 8

Newsletter signup forms 8

Stats & animated counters 8

Design-style kits

Glassmorphism UI kit 8

Neumorphism UI kit 8

Neobrutalism UI kit 8

Dark UI kit 8

Commerce

Product cards 8

Shopping cart & checkout 8

Pricing tables 8

Media

Image galleries & lightboxes 8

Carousels 8

Music players 8

Video players 8

Feedback & overlays

Alerts & toasts 8

Modals 8

Progress bars 8

Effects & visuals

Buttons 22

Background patterns 8

Hover effects 8

Scroll animations 8

3D effects 8

Page templates

Coming soon pages 8