Index

import { adamwathan } from "@/app/blog/authors"; import card from "./card.jpg"; import productPagePreview from "./product-page-preview.jpg"; import Link from "next/link"; import { Image } from "@/components/media";

export const meta = { title: "Introducing Tailwind UI Ecommerce", description: Almost 6 months in the making, we finally released Tailwind UI Ecommerce — the first all-new component kit for Tailwind UI since the initial launch back in February 2020., date: "2021-08-11T19:30:00.000Z", authors: [adamwathan], image: card, excerpt: ( <> Almost 6 months in the making, we finally released{" "} <Link href="https://tailwindui.com/#product-ecommerce">Tailwind UI Ecommerce</Link> — the first all-new component kit for Tailwind UI since the initial launch back in February 2020. </> ), };

<Link href="https://tailwindui.com"> <Image alt="Tailwind UI Ecommerce available now" src={card} /> </Link>

Almost 6 months in the making, we finally released the first all-new component kit for <Link href="https://tailwindui.com">Tailwind UI</Link> 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, including stuff like:

• Product Overviews
• Product Lists
• Category Previews
• Shopping Carts
• Category Filters
• Product Quickviews
• Store Navigation
• Promo Sections
• Checkout Forms
• Customer Reviews
• Order Summaries
• Storefront Pages
• Product Pages
• Order History Pages

...and more.

For a quick preview, check out this product page example we shared via our newsletter last week:

<Link href="https://tailwindui.com/components/ecommerce/page-examples/product-pages"> <Image alt="Preview one of the new product page examples" src={productPagePreview} /> </Link>

It's been a really fun and challenging process putting this together, and I'm really proud of how it turned out. I wrote up a big post about "Designing Tailwind UI Ecommerce" that's worth a read if you're interested in the process behind putting together a new Tailwind UI product like this.

You can check out a bunch more interactive previews as well as screenshots of every single new example over at <Link href="https://tailwindui.com/#product-ecommerce">the Tailwind UI website</Link>.

If you like what you see, consider <Link href="https://tailwindui.com/pricing">purchasing a license</Link> — it's the best way to support our work on Tailwind CSS and Headless UI and makes it possible for us to keep making these tools better and better.

Want to check it out? <Link href="https://tailwindui.com">Visit the Tailwind UI website →</Link>