# Tailkit

A comprehensive UI component library for Tailwind CSS, offering professionally designed components available in HTML, React, Vue.js, and Alpine.js formats. It helps web developers, founders, agencies and entrepreneurs build modern web applications faster with ready-to-use, customizable UI components. It features a custom MCP server for AI-assisted component discovery, code retrieval and building custom pages through your favorite AI assistants and editors.

## Designed by pixelcave

- [CodedVisuals](https://codedvisuals.com): The visual layer for your marketing site. Drop-in animated visual compositions that make your React and shadcn/ui marketing pages stand out. Powered by Motion, with skills your AI agent can build with.
- [Available for freelance work](https://pixelcave.com/#freelance): Freelance web development, design and consultation services available. Contact us to discuss your project needs and requirements.
- [Pixelcave insider newsletter](https://pixelcave.com/#subscribe): Subscribe to receive exclusive free templates, work insights, project updates, and special offers delivered a few times per month.
- [About](https://pixelcave.com/about): About pixelcave
- [Contact](https://pixelcave.com/contact): Get in touch

## Main Pages

- [Home](https://tailkit.com/): Tailkit homepage showcasing the component library and its features.
- [Pricing](https://tailkit.com/pricing): Pricing plans and licensing options for Tailkit.
- [Components](https://tailkit.com/components): Browse the full catalog of all available Tailwind CSS UI components organized by category.
- [Templates](https://tailkit.com/templates): Pre-built marketing and web application templates with customized Tailkit components, available in HTML (with Astro), React, Vue.js and Laravel versions.
- [Starter Kits](https://tailkit.com/starter-kits): Starter kit projects to quickly bootstrap new applications with Tailkit.
- [MCP Server](https://tailkit.com/mcp-server): Tailkit's MCP (Model Context Protocol) server for AI-assisted component discovery and code retrieval.
- [Web Application](https://tailkit.com/web-application): Overview of Tailkit's web application interface for browsing and copying components.
- [Free Tailwind Component of the Day](https://tailkit.com/free-tailwind-component-of-the-day): A daily featured free Tailwind CSS component.
- [Free Tailwind Components](https://tailkit.com/free-tailwind-components): A selection of free Tailwind CSS components.
- [Tools](https://tailkit.com/tools): Collection of free Tailwind CSS development tools.
- [Blog](https://tailkit.com/blog): Articles, tutorials, and updates about Tailkit, Tailwind CSS, and web development.
- [Changelog](https://tailkit.com/changelog): Release notes and version history for Tailkit.
- [Become an Affiliate](https://tailkit.com/become-an-affiliate): Information about the Tailkit affiliate program.

## Documentation - Getting Started

- [Introduction](https://tailkit.com/docs): Get started with Tailkit and learn how to set up your first project with Tailwind CSS components.
- [Installation](https://tailkit.com/docs/getting-started/installation): Learn how to install Tailkit and set up Tailwind CSS in your project.
- [Configuration](https://tailkit.com/docs/getting-started/configuration): Learn how to configure Tailkit and customize Tailwind CSS settings for your project.
- [HTML Structure](https://tailkit.com/docs/getting-started/html-structure): Learn how to set up your project's foundation with the required fonts and markup.

## Documentation - MCP Server

- [MCP Server Introduction](https://tailkit.com/docs/mcp-server/introduction): Learn about Tailkit's MCP Server for AI-powered component discovery and code retrieval.
- [MCP Server Installation](https://tailkit.com/docs/mcp-server/installation): Set up the Tailkit MCP Server in your AI-powered code editor.
- [MCP Server Tools](https://tailkit.com/docs/mcp-server/tools): Explore the tools available for browsing, searching, and retrieving components.
- [MCP Server Resources](https://tailkit.com/docs/mcp-server/resources): Explore the resources that contain reference information and documentation..
- [MCP Server Quick Start](https://tailkit.com/docs/mcp-server/quick-start): Practical examples of using the MCP Server with your AI assistant.

## Documentation - Templates

- [HTML with Astro](https://tailkit.com/docs/templates/html-astro): Set up and use Tailkit templates built with Astro.
- [React](https://tailkit.com/docs/templates/react): Set up and use Tailkit templates built with React and Vite.
- [Vue.js](https://tailkit.com/docs/templates/vuejs): Set up and use Tailkit templates built with Vue.js and Vite.
- [Laravel](https://tailkit.com/docs/templates/laravel): Set up and use Tailkit templates built with Laravel and Blade.

## Documentation - Extras

- [Support](https://tailkit.com/docs/extras/support): Get help with Tailkit, report bugs, and request new features.
- [Credits](https://tailkit.com/docs/extras/credits): Credits and acknowledgments for the open source resources used in Tailkit.

## Tools

- [Tailwind Color Palette](https://tailkit.com/tools/tailwind-color-palette): Explore and copy Tailwind CSS color palette values.
- [Tailwind Button Builder](https://tailkit.com/tools/tailwind-button-builder): Visual button builder tool for creating Tailwind CSS buttons.
- [Heroicons v2](https://tailkit.com/tools/heroicons-v2): Browse and search Heroicons v2 icon set.
- [Heroicons v1](https://tailkit.com/tools/heroicons-v1): Browse and search Heroicons v1 icon set.
- [Bootstrap Icons](https://tailkit.com/tools/bootstrap-icons): Browse and search Bootstrap Icons.
- [Lucide Icons](https://tailkit.com/tools/lucide-icons): Browse and search Lucide Icons.

## Legal

- [License Agreement](https://tailkit.com/license): Tailkit license agreement and terms of use.
- [Privacy Policy](https://tailkit.com/privacy-policy): Tailkit privacy policy.
- [Terms of Service](https://tailkit.com/terms-of-service): Tailkit terms of service.

## Components - Application UI

- [Stacked](https://tailkit.com/components/application-ui/layouts/stacked): Stacked layouts put a top navigation bar above your main content area, with optional subheaders, breadcrumbs, or action toolbars in between.
- [Dark Sidebar](https://tailkit.com/components/application-ui/layouts/dark-sidebar): Dark sidebar layouts are the dominant pattern for dashboards, admin panels, and data-intensive applications.
- [Light Sidebar](https://tailkit.com/components/application-ui/layouts/light-sidebar): Light sidebar layouts offer the same structural advantages as dark sidebars but with a brighter, more open feel.
- [Alerts](https://tailkit.com/components/application-ui/components/alerts): Alerts show up everywhere, and getting them wrong is surprisingly easy.
- [Avatars](https://tailkit.com/components/application-ui/components/avatars): Avatars do more work than they get credit for.
- [Badges](https://tailkit.com/components/application-ui/components/badges): Badges are compact visual labels that communicate status, count, or category at a glance.
- [Banners](https://tailkit.com/components/application-ui/components/banners): Banners are the loud cousin of alerts.
- [Breadcrumbs](https://tailkit.com/components/application-ui/components/breadcrumbs): Breadcrumbs solve a simple problem: letting users know where they are and giving them a quick way back.
- [Buttons](https://tailkit.com/components/application-ui/components/buttons): Buttons are where interaction starts.
- [Button Groups](https://tailkit.com/components/application-ui/components/button-groups): Whenever you have a set of related actions that belong together, grouping them into a single visual unit helps users understand the relationship.
- [Cards](https://tailkit.com/components/application-ui/components/cards): Cards might be the most used container pattern in modern UI design.
- [Cards in Grid](https://tailkit.com/components/application-ui/components/cards-in-grid): Having a great card component is only half the problem.
- [Card Headings](https://tailkit.com/components/application-ui/components/card-headings): A card heading establishes what the card is about and, just as importantly, what actions are available.
- [Dividers](https://tailkit.com/components/application-ui/components/dividers): Dividers do quiet, thankless work.
- [Dropdowns](https://tailkit.com/components/application-ui/components/dropdowns): Dropdowns keep your interface clean by hiding secondary actions until the user asks for them.
- [Form Actions](https://tailkit.com/components/application-ui/components/form-actions): Form actions are the sections where users confirm, cancel, or complete a form-related task.
- [Form Elements](https://tailkit.com/components/application-ui/components/form-elements): Form elements are the foundation of every data-entry interface.
- [Form Input Groups](https://tailkit.com/components/application-ui/components/form-input-groups): Input groups combine a text input with related elements, like a currency symbol, domain prefix, search icon, or action button, into one cohesive control.
- [Form Layouts](https://tailkit.com/components/application-ui/components/form-layouts): Individual form elements are the ingredients.
- [Form Switches](https://tailkit.com/components/application-ui/components/form-switches): Toggle switches communicate binary state better than checkboxes.
- [List Groups](https://tailkit.com/components/application-ui/components/list-groups): List groups organize related items into a clean, vertical layout that users can scan at a glance.
- [Media Objects](https://tailkit.com/components/application-ui/components/media-objects): The media object is one of the oldest and most useful layout patterns on the web.
- [Modals](https://tailkit.com/components/application-ui/components/modals): Modals interrupt what users are doing, and that's the point.
- [Navigation](https://tailkit.com/components/application-ui/components/navigation): Navigation determines whether people can actually use your application.
- [Page Headings](https://tailkit.com/components/application-ui/components/page-headings): Page headings anchor the top of every view in a dashboard or admin panel.
- [Pagination](https://tailkit.com/components/application-ui/components/pagination): Pagination splits large datasets into navigable pages.
- [Progress Bars](https://tailkit.com/components/application-ui/components/progress-bars): Progress bars show users how far along a process is.
- [Statistics](https://tailkit.com/components/application-ui/components/statistics): Statistics components turn raw numbers into insight at a glance.
- [Tables](https://tailkit.com/components/application-ui/components/tables): Tables are the backbone of data-heavy applications.
- [Tabs](https://tailkit.com/components/application-ui/components/tabs): Tabs organize related content into switchable panels without leaving the page.
- [Timeline](https://tailkit.com/components/application-ui/components/timeline): Timelines display events in chronological order.
- [Sign In](https://tailkit.com/components/application-ui/pages/sign-in): Sign-in pages are the front door to your application.
- [Sign Up](https://tailkit.com/components/application-ui/pages/sign-up): A good registration page removes friction.
- [Password Reset](https://tailkit.com/components/application-ui/pages/password-reset): Forgetting a password shouldn't feel like a dead end.
- [Installation](https://tailkit.com/components/application-ui/pages/installation): First-run setup wizards can make or break user retention.
- [Status](https://tailkit.com/components/application-ui/pages/status): Public status pages tell your users what's happening before they have to ask.
- [Maintenance](https://tailkit.com/components/application-ui/pages/maintenance): Every application needs downtime occasionally, and how you communicate it defines user trust.
- [Errors](https://tailkit.com/components/application-ui/pages/errors): Error pages are a missed opportunity in most applications.
- [Invoice](https://tailkit.com/components/application-ui/pages/invoice): Invoices need to be clear, professional, and printable.
- [User Profile](https://tailkit.com/components/application-ui/pages/user-profile): User profile pages are where people manage their account settings and personal information.
- [Form Radio Groups](https://tailkit.com/components/application-ui/components/form-radio-groups): Radio groups are the right choice when users need to pick exactly one option from a set.
- [Tooltips](https://tailkit.com/components/application-ui/components/tooltips): Tooltips provide brief contextual hints when users hover over or focus on an element.
- [Popovers](https://tailkit.com/components/application-ui/components/popovers): Popovers are floating containers that appear near a trigger element to show additional context, a mini form, or quick actions.
- [Steps](https://tailkit.com/components/application-ui/components/steps): Step indicators guide users through multi-stage processes.
- [Two Factor](https://tailkit.com/components/application-ui/pages/two-factor): Two-factor authentication adds a critical security layer to your login flow.
- [Select Menus](https://tailkit.com/components/application-ui/components/select-menus): Select menus let users pick from a list of options.
- [Command Palettes](https://tailkit.com/components/application-ui/components/command-palettes): The command palette (Cmd+K or Ctrl+K) has moved from developer curiosity to mainstream UI expectation.
- [Offcanvas](https://tailkit.com/components/application-ui/components/offcanvas): Offcanvas panels slide content in from the screen edge without leaving the current page.
- [Ribbons](https://tailkit.com/components/application-ui/components/ribbons): Ribbons are decorative labels that attach to the corner or edge of a card to call out a status or category at a glance.
- [Calendars](https://tailkit.com/components/application-ui/components/calendars): Calendar UI is deceptively complex.
- [Notifications](https://tailkit.com/components/application-ui/components/notifications): Notifications surface feedback at the moment it matters.
- [Various](https://tailkit.com/components/application-ui/layouts/various): In this category, you will find dashboard layouts that feature a different design approach than the classic sidebar or stacked layouts with simple flat or elevated sidebar designs.
- [Empty States](https://tailkit.com/components/application-ui/components/empty-states): An empty state is the first thing a new user sees in most sections of your app, and it's one of the most neglected design moments.
- [Chat](https://tailkit.com/components/application-ui/components/chat): Chat interfaces have become a staple UI pattern, powering customer support widgets, team messaging, AI assistant frontends, and in-app notification threads.
- [Audio Controls](https://tailkit.com/components/application-ui/components/audio-controls): Audio players need to feel familiar.

## Components - Marketing

- [Various](https://tailkit.com/components/marketing/layouts/various): Building a marketing site means combining a header, content sections, and a footer into something that feels cohesive.
- [Hero](https://tailkit.com/components/marketing/sections/hero): The hero section is the first thing visitors see, and first impressions are hard to undo.
- [Main Headers](https://tailkit.com/components/marketing/sections/main-headers): The main header is the navigation hub of your entire site.
- [Page Headers](https://tailkit.com/components/marketing/sections/page-headers): Page headers sit at the top of inner pages and give visitors immediate context about where they are.
- [Footers](https://tailkit.com/components/marketing/sections/footers): Footers are where visitors look when they need something specific: a support link, legal pages, social profiles, or a way to get in touch.
- [About](https://tailkit.com/components/marketing/sections/about): About sections tell visitors who you are and why they should care.
- [Blog Lists](https://tailkit.com/components/marketing/sections/blog-lists): Blog listing sections display your articles in a scannable, visually appealing layout.
- [Blog Posts](https://tailkit.com/components/marketing/sections/blog-posts): Blog post sections handle the reading experience for individual articles.
- [Comments](https://tailkit.com/components/marketing/sections/comments): Comment sections let visitors engage with your content and each other.
- [Contact](https://tailkit.com/components/marketing/sections/contact): Contact sections make it easy for visitors to reach out.
- [CTA](https://tailkit.com/components/marketing/sections/cta): Call-to-action sections exist for one purpose: getting visitors to take the next step.
- [FAQ](https://tailkit.com/components/marketing/sections/faq): FAQ sections answer the questions your visitors are already thinking.
- [Features](https://tailkit.com/components/marketing/sections/features): Feature sections are where you show visitors what your product actually does.
- [Image Overlays](https://tailkit.com/components/marketing/sections/image-overlays): Image overlay sections place text and calls to action directly on top of full-width imagery.
- [Logos](https://tailkit.com/components/marketing/sections/logos): Logo sections display the brands, clients, or partners that trust your product.
- [Newsletter](https://tailkit.com/components/marketing/sections/newsletter): Newsletter sections capture email addresses from visitors who aren't ready to buy yet but want to stay connected.
- [Pricing](https://tailkit.com/components/marketing/sections/pricing): Pricing sections are where browsing turns into buying.
- [Statistics](https://tailkit.com/components/marketing/sections/statistics): Statistics sections display your key numbers in a way that builds instant credibility.
- [Team](https://tailkit.com/components/marketing/sections/team): Team sections introduce the people behind your company.
- [Testimonials](https://tailkit.com/components/marketing/sections/testimonials): Testimonials are the most persuasive content on a marketing site because they let customers do the selling for you.
- [Home](https://tailkit.com/components/marketing/pages/home): A marketing home page is your entire pitch in a single scroll.
- [Features](https://tailkit.com/components/marketing/pages/features): A dedicated features page lets you go deeper than a homepage section ever could.
- [Pricing](https://tailkit.com/components/marketing/pages/pricing): The pricing page is one of the highest-intent pages on any marketing site.
- [Contact](https://tailkit.com/components/marketing/pages/contact): A well-designed contact page removes friction between you and your visitors.
- [About](https://tailkit.com/components/marketing/pages/about): The about page is where visitors go to understand who's behind the product.
- [Page Separators](https://tailkit.com/components/marketing/sections/page-separators): Page separators add visual transitions between sections, giving your layout room to breathe and creating distinct content areas.
- [Content Sliders](https://tailkit.com/components/marketing/sections/content-sliders): Content sliders rotate through multiple pieces of content in a single section, saving vertical space while showcasing more material.
- [Image Sliders](https://tailkit.com/components/marketing/sections/image-sliders): Image sliders and galleries showcase multiple images in an interactive, space-efficient format.

## Components - Ecommerce

- [Checkout](https://tailkit.com/components/ecommerce/sections/checkout): Checkout is where browsing turns into revenue.
- [Product Lists](https://tailkit.com/components/ecommerce/sections/product-lists): Product listing pages are where most shopping journeys begin.
- [Product Details](https://tailkit.com/components/ecommerce/sections/product-details): The product detail page is where buying decisions happen.
- [Product Reviews](https://tailkit.com/components/ecommerce/sections/product-reviews): Product reviews are one of the strongest trust signals in online shopping.
- [Category Filters](https://tailkit.com/components/ecommerce/sections/category-filters): Category filters determine how quickly customers find what they're looking for.

## Blog

- [How to install Tailwind CSS v4 to your Angular project](https://tailkit.com/blog/how-to-install-tailwind-css-v4-to-your-angular-project): Let's see how to easily install Tailwind 4 along with its official plugins in your brand new or existing Angular project.
- [How to install Tailwind CSS v4 to your Svelte project](https://tailkit.com/blog/how-to-install-tailwind-css-v4-to-your-svelte-project): Let's see how to easily install Tailwind 4 along with its official plugins in your brand new or existing Svelte project.
- [How to install Tailwind CSS v4 to your React project](https://tailkit.com/blog/how-to-install-tailwind-css-v4-to-your-react-project): Let's see how to easily install Tailwind 4 along with its official plugins in your brand new or existing React 19 project.
- [How to install Tailwind CSS v4 to your Vue.js project](https://tailkit.com/blog/how-to-install-tailwind-css-v4-to-your-vuejs-project): Let's see how to easily install Tailwind 4 along with its official plugins in your brand new or existing Vue.js 3 project.
- [How to install Tailwind CSS v4 to your Laravel project](https://tailkit.com/blog/how-to-install-tailwind-css-v4-to-your-laravel-project): Let's see how to easily install Tailwind 4 along with its official plugins in your brand new or existing Laravel 12 project.
- [Everything you need to know about Tailwind CSS v4](https://tailkit.com/blog/everything-you-need-to-know-about-tailwind-css-v4): Tailwind 4 is here! Learn all about the new features, breaking changes and installation options.
- [How to implement color theme toggle functionality in your Tailwind CSS based project](https://tailkit.com/blog/how-to-implement-color-theme-toggle-functionality-in-your-tailwind-css-based-project): Let's see how easily we can create different color themes that our users can toggle between in our Tailwind CSS based websites.
- [How to implement dark mode toggle functionality that works in any Tailwind CSS based project](https://tailkit.com/blog/how-to-implement-dark-mode-toggle-functionality-that-works-in-any-tailwind-css-based-project): Let's explore how we can build a JavaScript snippet that we can reuse over and over again in any of our Tailwind CSS projects.
- [How to add Tailwind CSS v3 to your React project](https://tailkit.com/blog/how-to-add-tailwind-css-to-your-react-project): Learn how to easily add Tailwind 3 along with its official plugins in your brand new or existing React 19 project.
- [How to add Tailwind CSS v3 to your Vue.js project](https://tailkit.com/blog/how-to-add-tailwind-css-to-your-vuejs-project): Learn how to easily add Tailwind 3 along with its official plugins in your brand new or existing Vue.js 3 project.
- [How to add Tailwind CSS v3 to your Laravel project](https://tailkit.com/blog/how-to-add-tailwind-css-to-your-laravel-project): Learn how to easily add Tailwind 3 along with its official plugins in your brand new or existing Laravel 11 project.
- [Our brand new blog is now live!](https://tailkit.com/blog/our-brand-new-blog-is-now-live): We are excited to welcome you all to our brand new blog. Let's build something amazing together!