Changelog

New heroes, feature sections, CTAs, and more

We've been busy the last few weeks working on a big batch of fresh marketing components for Tailwind UI, including tons of new hero sections, feature sections, CTAs, and more.

We also spent a bunch of time going through the examples that were already there and gave them a bit of polish — we were pleasantly surprised to discover that yes, we actually have gotten better at design since we released some of these components almost three years ago.

• Updated all examples in the Hero Sections category, including 10 new designs
• Updated all examples in the Feature Sections category, including 10 new designs
• Updated all examples in the CTA Sections category, including 3 new designs
• Updated all examples in the FAQ Sections category, including 3 new designs
• Updated all examples in the Footers category

New Protocol template

Today we're happy to announce the launch of our new Protocol template, a meticulously crafted documentation template tuned for API references.

Powered by MDX, we've sweat all the nitty-gritty details to make sure the authoring experience is an awesome one, letting you focus on just writing great API docs, not the tooling around it.

New Spotlight template

Today we're pumped to announce the launch of our new Spotlight template, a personal website so nice you'll actually be inspired to publish on it.

Built with Tailwind CSS and Next.js, it includes everything you need to get a personal website up-and-running, including a blog, projects page, dark mode, and more. And as always, it's been designed and built by the Tailwind CSS team.

New Pocket template

Today we're happy to announce the launch of our new Pocket template, the perfect website template for your exciting new mobile app.

Built with Tailwind CSS and Next.js, Pocket is loaded with tons of fun animations and interactions powered by the Framer Motion library. Be sure to check out the live preview for the full experience.

Tailwind UI templates

Today we’re thrilled to announce the launch of Tailwind UI templates!

These are visually-stunning, easy to customize site templates built with React and Next.js. The perfect starting point for your next project and the ultimate resource for learning how experts build real websites with Tailwind CSS.

• Salient template - A beautiful SaaS landing page to announce your next big idea.
• Transmit template - A clean and professional podcast template fit for any show.
• Syntax template - Educate your users in style with this documentation template.
• Keynote template - Launch your next conference with a splash with this eye-catching template.
• Primer template - A stunning landing page for your first course or ebook.

New additions

• Added 16 new Table examples to the Application UI package

New additions

• Added new Comboboxes category to the Application UI package with 5 examples
• Added new Command Palettes category to the Application UI package with 9 examples

New additions

• Added new Calendars category to the Application UI package with 8 examples

New additions

• Added new Textareas category to the Application UI package with 5 examples
• Added 9 new Radio Group examples to the Application UI package
• Added 1 new Step example to the Application UI package
• Added 1 new FAQ example to the Marketing package

Tailwind UI Ecommerce

Today we’re excited to announce the launch of Tailwind UI Ecommerce!

Almost 6 months in the making, we finally released the first all-new component kit for Tailwind UI since the initial launch back in February 2020.

Tailwind UI Ecommerce adds over 100 new components across 14 new component categories and 7 new page example categories:

• Added new Product Overviews category to the Ecommerce package with 5 examples
• Added new Product Lists category to the Ecommerce package with 11 examples
• Added new Category Previews category to the Ecommerce package with 6 examples
• Added new Shopping Carts category to the Ecommerce package with 6 examples
• Added new Category Filters category to the Ecommerce package with 5 examples
• Added new Product Quickviews category to the Ecommerce package with 4 examples
• Added new Product Features category to the Ecommerce package with 9 examples
• Added new Store Navigation category to the Ecommerce package with 5 examples
• Added new Promo Sections category to the Ecommerce package with 8 examples
• Added new Checkout Forms category to the Ecommerce package with 5 examples
• Added new Reviews category to the Ecommerce package with 4 examples
• Added new Order Summaries category to the Ecommerce package with 4 examples
• Added new Order History category to the Ecommerce package with 4 examples
• Added new Incentives category to the Ecommerce package with 8 examples
• Added new Storefront Pages category to the Ecommerce package with 4 examples
• Added new Product Pages category to the Ecommerce package with 5 examples
• Added new Category Pages category to the Ecommerce package with 5 examples
• Added new Shopping Cart Pages category to the Ecommerce package with 3 examples
• Added new Checkout Pages category to the Ecommerce package with 5 examples
• Added new Order Detail Pages category to the Ecommerce package with 3 examples
• Added new Order History Pages category to the Ecommerce package with 5 examples

New additions

• Added new 404 Pages category to the Marketing package with 6 examples
• Added new Empty States category to the Application UI package with 6 examples
• Added 6 new Input Group examples to the Application UI package
• Added new Checkboxes category to the Application UI package with 4 examples

New additions

• Added 2 new Pricing Page examples to the Marketing package
• Added 2 new Pricing Section examples to the Marketing package
• Added 2 new FAQ examples to the Marketing package
• Added 1 new Testimonial example to the Marketing package
• Added 1 new Header example to the Marketing package

React and Vue support

Today we’re excited to add first class support for React and Vue 3 to all of the examples in Tailwind UI, which makes it even easier to adapt them for your projects.

It’s been a long journey but I am super proud of where we ended up on this one, and really think it’s going to make Tailwind UI a useful tool for a whole new group of Tailwind CSS users.

• Functional and accessible — all of the React and Vue examples in Tailwind UI are powered Headless UI which handles all of the ARIA attribute management, keyboard interactions, focus handling, and more for you, while keeping all of that gnarly complexity safely tucked away in your node_modules folder where we can make improvements and fix bugs on your behalf, without you ever having to change your own code.
• Fully customizable — with Headless UI, we’ve managed to abstract away all of the complicated JS functionality without taking away any control over the actual markup. That means that the entire design is still in entirely under your control, and you can fully customize any example by simply adding and removing utility classes like you’re used to.

All of this stuff is available as a totally free update for Tailwind UI customers. Just log in to your account, select between HTML, React, or Vue in the dropdown above any component, and grab the code in the format you want.

New additions

• Added 2 new Detail Screen examples to the Application UI package
• Added 1 new Settings Screen example to the Application UI package
• Added 2 new Multi-Column Layout examples to the Application UI package
• Added 2 new Page Heading examples to the Application UI package
• Added 1 new Grid List example to the Application UI package
• Added 1 new Select Menu example to the Application UI package
• Added 1 new Tabs example to the Application UI package
• Added 1 new Slide-over example to the Application UI package

New additions

• Added new Contact Pages to the Marketing package with 4 examples
• Added 1 new CTA Section example to the Marketing package
• Added 2 new Header Section examples to the Marketing package
• Added 2 new Newsletter Section examples to the Marketing package
• Added 2 new Contact Section examples to the Marketing package

New additions

• Added 1 new Home Screen example to the Application UI package
• Added 1 new Detail Screen example to the Application UI package
• Added 2 new Multi-Column Layout examples to the Application UI package
• Added 1 new Section Heading example to the Application UI package
• Added 1 new Card Heading example to the Application UI package
• Added 1 new Stacked List example to the Application UI package
• Added 1 new Tabs example to the Application UI package
• Added 1 new Navbar example to the Application UI package

New additions

• Added new Landing Page examples category to the Marketing package with 3 examples
• Added 4 new Feature Section examples to the Marketing package
• Added 3 new Hero Section examples to the Marketing package
• Added 1 new Content Section example to the Marketing package
• Added 1 new Newsletter Section example to the Marketing package
• Added 1 new Stat Section example to the Marketing package
• Added 1 new Testimonial example to the Marketing package

New additions

• Added new List Containers category to the Application UI package with 7 examples
• Added new Dividers category to the Application UI package with 8 examples
• Added 1 new Home Screen page example to the Application UI package
• Added 2 new Stacked List examples to the Application UI package
• Added 1 new Grid List example to the Application UI package
• Added 1 new Page Heading example to the Application UI package
• Added 1 new Stacked Layout application shell example to the Application UI package

New additions

• Added new Details Screens page examples to the Application UI package with 3 examples
• Added new Multi-Column Layouts category to the Application UI package with 3 examples
• Added new Feeds category to the Application UI package with 3 examples
• Added new Media Objects category to the Application UI package with 8 examples
• Added 2 new Buttons examples to the Application UI package
• Added 1 new Grid List example the Application UI package
• Added 2 new Page Headings examples to the Application UI package
• Added new Stacked List example to the Application UI package

New additions

• Added new Settings Screens category to the Application UI package with 4 examples
• Added new Breadcrumbs category to the Application UI package with 4 examples
• Added 1 new Stacked Layout example to the Application UI package
• Added 1 new Description List example to the Application UI package
• Added 1 new Form Layout example to the Application UI package
• Added 2 new Navbar examples to the Application UI package
• Added new Radio Groups category to the Application UI package with 3 examples
• Added 1 new Sidebar Layout example to the Application UI package
• Added 2 new Toggle examples to the Application UI package
• Added 1 new Stacked List example to the Application UI package

New additions

• Added new Pricing Pages category to the Marketing package with 4 examples
• Added new Header Sections category to the Marketing package with 3 examples
• Added 4 new Pricing Section examples to the Marketing package
• Added 2 new CTA Section examples to the Marketing package
• Added 3 new FAQ Section examples to the Marketing package
• Added 3 new Feature Section examples to the Marketing package
• Added 2 new Footer Section examples to the Marketing package
• Added 2 new Logo Cloud examples to the Marketing package

New additions

• Added new Team Sections category to the Marketing package with 8 examples
• Added new Section Headings category to the Application UI package with 9 examples
• Added new Steps category to the Application UI package with 7 examples
• Added 5 new Slide-Over examples to the Application UI package

New additions

• Added the first three Home Screen Examples to the Application UI package

New additions

• Added new Content Sections category to the Marketing package, with 5 examples
• Added new Sidebar Navigation category to the Application UI package, with 8 examples

New additions

• Added new Grid Lists category to the Application UI package, with 3 examples
• Added three new Hero Section examples to the Marketing package

New additions

• Added new Slide-Overs category to the Application UI package, with 6 examples

New additions

• Added new Select Menus category to the Application UI package, with 6 examples

New additions

• Added new Headers category to the Marketing package, with 4 examples
• Added new Flyout Menus category to the Marketing package, with 6 examples

New additions

• Added new Alerts category to the Application UI package, with 6 examples
• Added new Contact Sections category to the Marketing package, with 6 examples
• Fixed border color above profile section in sidebar of Branded Nav with Compact White Page Header stacked layout (from border-gray-700 to border-indigo-800)

New additions

• Added new Stats category to the Application UI package, with 3 components to start
• Added new Notifications category to the Application UI package, with 6 components to start
• Added new Blog Sections category to the Marketing package, with 3 components to start
• Corrected flex-no-shrink to flex-shrink-0 on Toggle components
• Fixed truncation issue in Firefox on Description List components (see https://github.com/tailwindui/issues/issues/71)
• Fixed off-canvas menu in sidebar layouts being too wide for very small screens (see https://github.com/tailwindui/issues/issues/2)

Accessibility improvements

We started working with an accessibility consultant this week who has been going through our early access components and making sure we're following all best practices.

• Link toggle on Action panel with toggle to title/description through aria-labelledby and aria-describedby
• Add alt attribute to logo images in Stacked Layouts
• Add aria-label attribute to icon-only buttons in Stacked Layouts (like aria-label="Notifications" on the bell buttons)
• Add menu semantics to the avatar dropdowns on Stacked Layouts