Repository: mdbootstrap/TW-Elements

Stars: 13121

README.md

TW Elements is a huge collection of free, interactive components for Tailwind CSS.

<table>
<tbody>
<tr>
<td>
<a href="https://tw-elements.com/" alt="TW Elements tutorials" rel="dofollow">
<img width="600" src="https://tecdn.b-cdn.net/img/components-big.jpg">
</a>
</td>
<td>
<ul>
<li>500+ UI components</li>
<li>117+ design blocks</li>
<li>Dark mode support</li>
<li>Easy theming & customization</li>
<li>Simple, 1 minute install</li>
<li>Free for personal & commercial use</li>
</ul>
<a href="https://tw-elements.com/docs/standard/getting-started/quick-start/">Get started with TW Elements now!</a>
</td>
</tr>
</tbody>
</table>

---

- Table of Contents
- Community
- Components
- Design blocks
- Installation

---

Community

- Motivate us with some words of encouragament ❤️
- Share your ideas & feature requests 💡
- Aks for help & help others in our community support 🙏
- Engage, discuss & have fun in our community 💬

If you want to help the project grow, start by simply sharing it with your peers!

- Share via Dev.to](https://tw-elements.com/)%20%20%20%20%20%20%20%20\n%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20I%27d%20like%20to%20share%20my%20latest%20discovery%20with%20you.%20\n%20%20%20%20%20%20%20%20Tailwind%20Elements%20is%20currently,%20the%20most%20popular%203rd%20party%20UI%20kit%20for%20TailwindCSS%20with%20over%2010k%20Github%20stars.%20%20%20%20%20%20%20%20![GitHub%20Repo%20stars](https://github.com/mdbootstrap/TW-Elements/)%20%20%20%20%20%20%20%20It%27s%20a%20huge%20collection%20of%20stunning%20components%20made%20with%20attention%20to%20the%20smallest%20detail.%20%20%20%20%20%20%20%20%20Forms,%20cards,%20buttons,%20and%20hundreds%20of%20others.%20%20%20%20%20%20%20%20%20All%20components%20have%20dark%20mode%20and%20very%20intuitive%20theming%20options.%20%20%20%20%20%20%20%20The%20project%20is%20supported%20by%20an%20engaged%20community%20on%20GitHub,%20I%20recommend%20you%20check%20it%20out%20and%20join%20one%20of%20the%20many%20discussions.%20%20%20%20%20%20%20%20\n%20%20%20%20%20%20%20%20You%20will%20find%20installation%20instructions%20here,%20and%20you%20can%20track%20the%20progress%20of%20the%20project%20live%20%20%20%20%20%20%20%20%20here.%20%20%20%20%20%20%20%20\n%20%20%20%20%20%20%20%20The%20project%20was%20kickstarted%20by%20@MDBootstrap,%20a%20group%20of%20open-source%20developers%20behind%20MDB%20UI%20Kit%20-%20a%20high-quality%20UI%20kit%20for%20Bootstrap,%20and%20also%20behind%20MDB%20GO%20-%20hosting%20and%20deployment%20platform.%20%20%20%20%20%20%20%20\n%20%20%20%20%20%20%20%20I%20highly%20recommend%20you%20to%20check%20it%20out!%20%20%20%20%20%20%20%20\n%20%20%20%20%20%20%20%20%7B%25%20link%20mdbootstrap/tw-elements-breakthrough-version-is-here-59hh%20%25%7D%20%20%20%20%20%20%20%20\n>)
- Share via Twitter
- Share via Facebook
- Share via LinkedIn
- Share via Pinterest
- Share via Reddit
- Share via StumbleUpon
- Share via Vkontakte
- Share via Weibo
- Share via Hackernews
- Share via Gmail
- Share via email

Thank you!

---

Components

A collection of stunning components made with attention to the smallest details. Forms, cards, buttons, and hundreds of others – in TW Elements you will find all the essential elements necessary for every project.

<table>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/forms/datepicker/">
<img alt="Datepicker" src="https://mdbootstrap.com/img/tw-demo/datepicker.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/dropdown/">
<img alt="Dropdown" src="https://mdbootstrap.com/img/tw-demo/dropdown.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/modal/">
<img alt="Modal" src="https://mdbootstrap.com/img/tw-demo/modal.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Datepicker</td>
<td align="center">Dropdown</td>
<td align="center">Modal</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/data/charts/">
<img alt="Charts" src="https://mdbootstrap.com/img/tw-demo/charts.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/tooltip/">
<img alt="Tooltips" src="https://mdbootstrap.com/img/tw-demo/tooltips-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/carousel/">
<img alt="Carousel" src="https://mdbootstrap.com/img/tw-demo/carousel.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Charts</td>
<td align="center">Tooltips</td>
<td align="center">Carousel</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/accordion/">
<img alt="Accordion" src="https://mdbootstrap.com/img/tw-demo/accordion.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/navigation/tabs/">
<img alt="Tabs" src="https://mdbootstrap.com/img/tw-demo/tabs.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/stepper/">
<img alt="Stepper" src="https://mdbootstrap.com/img/tw-demo/stepper.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Accordion</td>
<td align="center">Tabs</td>
<td align="center">Stepper</td>
</tr>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/forms/timepicker/">
<img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/img/tw-demo/timepicker.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/navigation/footer/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/img/tw-demo/footer.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/navigation/navbar/">
<img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/img/tw-demo/navbar.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Timepicker</td>
<td align="center">Footer</td>
<td align="center">Navbar</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/alerts/">
<img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/alert-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/avatar/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/avatar.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/badges/">
<img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/badge-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Alerts</td>
<td align="center">Avatar</td>
<td align="center">Badges</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/button-group/">
<img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/button-group-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/buttons/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/button-2.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/cards/">
<img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/card-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Button group</td>
<td align="center">Buttons</td>
<td align="center">Cards</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/chips/">
<img alt="Tailwind CSS Time picker" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/chips.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/collapse/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/collapse-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/gallery/">
<img alt="Tailwind CSS Navbar" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/lightbox.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Chips</td>
<td align="center">Collapse</td>
<td align="center">Gallery</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/jumbotron/">
<img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/header-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/link/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/link.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/listgroup/">
<img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/list-group-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Jumbotron</td>
<td align="center">Link</td>
<td align="center">List group</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/notifications/">
<img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/notification.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/paragraphs/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/paragraphs.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/placeholders/">
<img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/placeholder-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Notifications</td>
<td align="center">Paragraphs</td>
<td align="center">Placeholders</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/popover/">
<img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/popover-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/progress/">
<img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/progress-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/rating/">
<img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/rating-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Popover</td>
<td align="center">Progress</td>
<td align="center">Rating</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/scroll-back-to-top-button/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/scroll-back-to-top.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/social-buttons/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/social-media.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/spinners/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/spinner-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Scroll to top</td>
<td align="center">Social buttons</td>
<td align="center">Spinners</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/timeline/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/timeline.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/toast/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/toast-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/tooltip/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/tooltip-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Timeline</td>
<td align="center">Toast</td>
<td align="center">Tooltip</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/components/video/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/video.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/video-carousel/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/video-carousel.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/checkbox/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/checkbox-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Video</td>
<td align="center">Video carousel</td>
<td align="center">Checkbox</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/forms/file-input/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/file-upload.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/input-group/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/input-group.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/login-form/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/login-form.webp">
</a>
</td>
</tr>
<tr>
<td align="center">File input</td>
<td align="center">Input group</td>
<td align="center">Login form</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/forms/radio/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/radio-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/range/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/range-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/registration-form/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/registration-form.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Radio</td>
<td align="center">Range</td>
<td align="center">Registration form</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/forms/search/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/search-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/select/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/select-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/forms/switch/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/switch.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Search</td>
<td align="center">Select</td>
<td align="center">Switch</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/forms/textarea/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/textarea.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/data/tables/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/table-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/methods/ripple/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/ripple.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Textarea</td>
<td align="center">Tables</td>
<td align="center">Ripple</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/content-styles/animations/">
<img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/animations2.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/content-styles/mask/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/mask-1.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/content-styles/shadows/">
<img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/shadow-1.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Animations</td>
<td align="center">Masks</td>
<td align="center">Shadows</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/data/datatables/">
<img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/datatable.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/lightbox/">
<img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/lightbox.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/rating/">
<img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/rating.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Datatables</td>
<td align="center">Lightbox</td>
<td align="center">Rating</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/methods/scrollbar/">
<img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/scrollbar.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/components/popconfirm/">
<img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/popconfirm.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/">
<img alt="Logo Clouds" src="https://mdbootstrap.com/img/tw-demo/design-blocks.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Scrollbar</td>
<td align="center">Popconfirm</td>
<td align="center">More coming soon</td>
</tr>

</table>

---

Design blocks

Responsive Landing page blocks built with Tailwind CSS. Plenty of design blocks examples such as Teams, services, projects, faq, and many more.

<table>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/hero-sections/">
<img alt="Hero" src="https://mdbootstrap.com/img/tw-demo/hero.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/pricing/">
<img alt="Pricing" src="https://mdbootstrap.com/img/tw-demo/pricing.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/cta/">
<img alt="Call to action" src="https://mdbootstrap.com/img/tw-demo/cta.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Hero</td>
<td align="center">Pricing</td>
<td align="center">Call to action</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/features/">
<img alt="Features" src="https://mdbootstrap.com/img/tw-demo/features.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/contact/">
<img alt="Contact" src="https://mdbootstrap.com/img/tw-demo/contact.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/news/">
<img alt="News/blog" src="https://mdbootstrap.com/img/tw-demo/news.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Features</td>
<td align="center">Contact</td>
<td align="center">News/blog</td>
</tr>

<tr>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/team/">
<img alt="Team" src="https://mdbootstrap.com/img/tw-demo/team.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/stats/">
<img alt="Tabs" src="https://mdbootstrap.com/img/tw-demo/stats.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/testimonials/">
<img alt="Stepper" src="https://mdbootstrap.com/img/tw-demo/testimonials.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Team</td>
<td align="center">Stats</td>
<td align="center">Testimonials</td>
</tr>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/content/">
<img alt="Content" src="https://mdbootstrap.com/img/tw-demo/content.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/newsletter/">
<img alt="Newsletter" src="https://mdbootstrap.com/img/tw-demo/newsletter.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/project-sections/">
<img alt="Projects" src="https://mdbootstrap.com/img/tw-demo/projects.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Content</td>
<td align="center">Newsletter</td>
<td align="center">Projects</td>
</tr>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/headers/">
<img alt="Headers" src="https://mdbootstrap.com/img/tw-demo/headers.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/faq/">
<img alt="FAQ" src="https://mdbootstrap.com/img/tw-demo/faq.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/logo-clouds/">
<img alt="Logo Clouds" src="https://mdbootstrap.com/img/tw-demo/logo-clouds.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Headers</td>
<td align="center">FAQ</td>
<td align="center">Logo Clouds</td>
</tr>
<tr>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/banners/">
<img alt="Headers" src="https://mdbootstrap.com/img/tw-demo/banners.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/docs/standard/designblocks/mega-menu/">
<img alt="FAQ" src="https://mdbootstrap.com/img/tw-demo/mega-menu.webp">
</a>
</td>
<td>
<a href="https://tw-elements.com/">
<img alt="Logo Clouds" src="https://mdbootstrap.com/img/tw-demo/design-blocks.webp">
</a>
</td>
</tr>
<tr>
<td align="center">Banners</td>
<td align="center">Mega Menu</td>
<td align="center">More coming soon</td>
</tr>
</table>

---

Integrations

TW Elements integrations with popular technologies.

- Django Integration
- Angular Integration
- Express Integration
- Laravel Integration
- Next Integration
- Nuxt Integration
- Django Integration
- Remix Integration
- Solid Integration
- Svelte Integration
- Sveltekit Integration
- Vue Integration

---

Installation

##### NPM

1. Before starting the project make sure to install Node.js (LTS)") and TailwindCSS.

2. Run the following command to install the package via NPM:

text

npm install tw-elements

3. TW Elements is a plugin and should be included inside the tailwind.config.js file. It is also recommended to extend the content array with a js file that loads dynamic component classes:

javascript

module.exports = {
  content: ["./src//.{html,js}", "./node_modules/tw-elements/js//.js"],
  plugins: [require("tw-elements/plugin.cjs")],
  darkMode: "class",
};

4. Dynamic components will work after adding the js file:

text

<script src="./TW-ELEMENTS-PATH/js/tw-elements.umd.min.js"></script>

Alternatively, you can import it in the following way (bundler version):

text

import 'tw-elements';

##### MDB GO / CLI

Create, deploy and host anything with a single command.

1. To start using MDB GO / CLI install it with one command:

text

npm install -g mdb-cli

2. Log into the CLI using your MDB account:

text

mdb login

3. Initialize a project and choose Tailwind Elements from the list:

text

mdb init tailwind-elements-free

4. Install the dependencies (inside the project directory):

text

npm install

5. Run the app:

text

npm start

6. Publish when you're ready:

text

mdb publish

##### CDN

You can easily test TW Elements by adding CDN scripts to your classic HTML template without the need for installing any packages.

Add the stylesheet files below in the _head_ section:

text

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/css/tw-elements.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    darkMode: "class",
    theme: {
      fontFamily: {
        sans: ["Roboto", "sans-serif"],
        body: ["Roboto", "sans-serif"],
        mono: ["ui-monospace", "monospace"],
      },
    },
    corePlugins: {
      preflight: false,
    },
  };
</script>

Require the js bundled file right before the _body_ closing tag:

text

<script src="https://cdn.jsdelivr.net/npm/tw-elements/js/tw-elements.umd.min.js"></script>

Repository: mdbootstrap/TW-Elements

Stars: 13121

README.md Copy Chapter

Table of Contents Copy Chapter

Community Copy Chapter

Components Copy Chapter

Design blocks Copy Chapter

Integrations Copy Chapter

Installation Copy Chapter

README.md

Table of Contents

Community

Components

Design blocks

Integrations

Installation