Tailwind UI Kit

Tailwind UI Kit is a collection of pre-designed UI components and templates built with Tailwind CSS, designed to help developers quickly create modern, responsive, and customizable web interfaces.

⚠️ Attention Please

⚠️ This component library uses Tailwind CSS utility classes but does not include TailwindCSS by default.
You must have TailwindCSS configured in your own project for styles to apply correctly.

🛠 Config

To use this component library with Tailwind, add the following to your tailwind.config.js:

module.exports = {
  content: ["...", "./node_modules/tailwind-ux-kit/**/*.{js,jsx}"],
  // other config...
};

Or for tailwind > 4, add the following to your .css file:

@source "../node_modules/tailwind-ux-kit";

🚀 Features

• ⚡ Built with Tailwind CSS
• 🧱 50+ Pre-designed components
• 💡 Easy to customize and extend
• 📱 Responsive by default

📦 Components

1. Navigation

• Navbar
• Side Menu
• Breadcrumbs
• Mega Menu
• Mobile Menu

2. Hero Sections

• Full-width Hero
• Hero with Image
• Hero with Form
• Call to Action

3. Forms & Inputs

• Input Fields
• Checkboxes & Radio Buttons
• Select Dropdowns | Name | Type | Default | Description | | ---------- | ------------------------------- | --------- | ------------------------------------------ | | label | ReactNode | — | The trigger element (usually a <button>) | | children | ReactNode | — | Content of the dropdown | | position | "left" \| "center" \| "right" | "right" | Horizontal alignment of the dropdown |
• Toggles & Switches
• Form Layouts
• Input Groups

4. Buttons

• Primary / Secondary / Tertiary
• Icon Buttons
• Button Groups
• Loading Buttons

5. Cards

• Product Cards
• Profile Cards
• Blog Post Cards
• Feature Cards
• Pricing Cards

6. Modals & Popups

• Basic Modal

Features

• Global modal state management with React Context
• Separate context for modal actions and modal state to reduce unnecessary re-renders
• Pass arbitrary data to modals when opening them
• TypeScript-ready with strong typings
• Easy to use API (openModal, closeModal, isOpen, getModalData)
• Supports standalone or context-controlled modals
• Clean modular structure with centralized exports
• Compatible with React 18+, Vite, Next.js

Usage

1. Wrap your app with ModalProvider

import { ModalProvider } from "@/components/modals";

export default function RootLayout({ children }) {
  return <ModalProvider>{children}</ModalProvider>;
}

| Hook / Component | Description | | ---------------------- | --------------------------------------------------- | | ModalProvider | Context provider to wrap your app | | Modal | Modal component that renders UI based on open state | | useModalActions() | Returns { openModal(id, data?), closeModal(id) } | | useModalState() | Returns { isOpen(id), getModalData(id) } | | useModalInstance(id) | Convenience hook for modal state + actions by ID |

• Confirmation Dialog
• Form Modal
• Slide-over Panels

7. Alerts & Notifications

• Toast Notifications

import { ToastContainer, showToast, setToastDefaults } from 'my-toast-lib';
// Optional: Global theming
setToastDefaults({
icons: {
success: '🎉',
error: '🛑',
},
colors: {
success: { bg: 'bg-green-200', text: 'text-green-900' },
},
});

// Trigger anywhere

showToast('success', 'Operation completed!');
showToast('success', 'Your file was saved!', 4000, {
title: 'Success',
description: 'Everything worked perfectly.',
icon: <RiCheckFill />,
iconContainerClass: 'bg-green-200 text-green-900 rounded-full p-2',
});

showToast(type, message, duration?, config?)

| Parameter | Type | Description | | ---------- | --------------------------------------------- | ----------------------------------------------------- | | type | 'success' \| 'error' \| 'warning' \| 'info' | Toast type, controls default styling | | message | string | Main message, shown if title/description not provided | | duration | number (optional) | Time in ms to auto-dismiss the toast (default: 3000) | | config | ToastConfig (optional) | Extra customization options |

ToastConfig

| Property | Type | Description | | --------------------- | --------------------- | ------------------------------------- | | title? | string \| null | Optional toast title | | description? | string \| null | Optional detailed description | | icon? | string \| ReactNode | Custom icon (string or React element) | | iconContainerClass? | string | CSS classes for the icon container | | bgColor? | string | Override background color class | | textColor? | string | Override text color class |

• Success / Error / Warning Alerts
• Banners

8. Tables

• Basic Table
• Table with Sorting
• Table with Pagination
• Responsive Table

9. Tabs & Accordions

• Horizontal & Vertical Tabs

• Accordions | Prop | Type | Default | Description | | ------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------ | | items | T[] (AccordionItemBase generic) | — | Array of accordion items with id, title, content, and custom props | | allowMultipleOpen | boolean | false | Allow multiple panels to be open simultaneously | | className | string | "" | Custom class name for the accordion container | | renderTitle | (item: T, isOpen: boolean) => React.ReactNode | — | Custom render function for the accordion header/title | | renderContent | (item: T, isOpen: boolean) => React.ReactNode | — | Custom render function for the accordion content |

• FAQ Sections

10. Lists & Grids

• List Groups
• Icon Lists
• Grid Layouts
• Masonry Layouts

11. Footers

• Simple Footer
• Multi-column Footer
• Newsletter Footer
• Social Media Footer

12. Headers

• Basic Header
• Header with Search
• Sticky Header

13. Avatars & Badges

• Avatars
• Avatar Groups
• Status Indicators
• Notification Badges

14. Stats & Metrics

• KPI Cards
• Progress Bars
• Chart Containers

15. Miscellaneous

• Pagination
• Breadcrumbs
• Tooltips
• Loaders / Spinners
• Timeline
• Tags / Chips