discover · compare · collections · requirements · contribute · feed · watching · stats · help with your tokens
mdbootstrap/TW-Elements · source
Snapshot 0 · 2026-11-04T12:47:22Z · JavaScript · MIT
Content fingerprint
127aa655229c25999941ec6fb0970ee7531c170ee04d8e3d976f3c8dc9eac71dGitHub description at capture
𝙃𝙪𝙜𝙚 collection of Tailwind MIT licensed (free) components, sections and templates 😎
README at capture
# TW Elements [<img src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp" width="45" align="right" alt="tw-elements">](https://tw-elements.com/)<a href="https://www.npmjs.com/package/tw-elements"><img src="https://img.shields.io/npm/dt/tw-elements.svg" alt="Total Downloads"></a> <a href="https://github.com/mdbootstrap/TW-Elements/releases"><img src="https://img.shields.io/npm/v/tw-elements.svg" alt="Latest Release"></a> <a href="https://twitter.com/intent/tweet/?text=Thanks+@TWElement+for+creating+an+amazing+collection+of+open+source+components+for+@tailwindcss%20https://tw-elements.com/&hashtags=tailwindCSS,bootstrap,webdesign,javascript,100DaysOfCode,DevCommunity"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a>
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>
<p><b><a href="https://tw-elements.com/docs/standard/getting-started/quick-start/">Get started with TW Elements now!</a></b></p>
</td>
</tr>
</tbody>
</table>
---
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Community](#community)
- [Components](#components)
- [Design blocks](#design-blocks)
- [Installation](#installation)
---
## Community
- Motivate us with some [words of encouragament ❤️](https://github.com/mdbootstrap/TW-Elements/discussions/categories/kind-words-general-feedback)
- Share your [ideas & feature requests 💡](https://github.com/mdbootstrap/TW-Elements/discussions/categories/share-ideas-request-features)
- Aks for help & help others in our [community support 🙏](https://github.com/mdbootstrap/TW-Elements/discussions/categories/support-from-community)
- **Engage, discuss & have fun in our [community 💬](https://github.com/mdbootstrap/TW-Elements/discussions)**
**If you want to help the project grow, start by simply sharing it with your peers!**
- [Share via Dev.to](<https://dev.to/new?prefill=---%0Atitle%3A%20500+%20open-source%20components%20for%20TailwindCSS%20%0Apublished%3A%20true%0Atags%3Atailwindcss%0A---%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20[](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%20[Tailwind%20Elements](https://tw-elements.com/)%20is%20currently,%20the%20most%20popular%203rd%20party%20UI%20kit%20for%20TailwindCSS%20with%20over%2010k%20Github%20stars.%20%20%20%20%20%20%20%20[](https://github.com/mdbootstrap/TW-Elements/)%20%20%20%20%20%20%20%20It%27s%20a%20**huge%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%20**dark%20mode**%20and%20very%20intuitive%20**theming%20options**.%20%20%20%20%20%20%20%20The%20project%20is%20supported%20by%20an%20[engaged%20community%20on%20GitHub](https://github.com/mdbootstrap/TW-Elements/discussions),%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%20[here](https://tw-elements.com/docs/getting-started/installation),%20and%20you%20can%20track%20the%20progress%20of%20the%20project%20live%20%20%20%20%20%20%20%20%20[here](https://tw-elements.com/docs/standard/getting-started/changelog/).%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%20[MDB%20UI%20Kit](https://github.com/mdbootstrap/mdb-ui-kit)%20-%20a%20high-quality%20UI%20kit%20for%20Bootstrap,%20and%20also%20behind%20[MDB%20GO](https://mdbgo.com/)%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](https://twitter.com/intent/tweet?text=500%2B%20open-source%20components%20for%20%23TailwindCSS%20%F0%9F%A4%A9%0Ahttps%3A//tw-elements.com/%0A%0ACongrats%20%40MDBootstrap%20%40ascensus_mdb%20%40dawidadach%20for%20this%20awesome%20design%20collection!%0A%0AI%20will%20keep%20using%20it%20in%20my%20projects%20for%20sure!%0A%0A%23uiux%20%23webdevelopment%20%23HTML%20%23CSS%20%23design%20%23Webdesign%20%23programming%20)
- [Share via Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A//tw-elements.com)
- [Share via LinkedIn](http://www.linkedin.com/shareArticle?url=https%3A%2F%2Ftw-elements.com%2F&title=500%2B%20open-source%20components%20for%20TailwindCSS)
- [Share via Pinterest](https://www.pinterest.com/pin/create/button?url=https://tw-elements.com/&media=https://tw-elements.com/img/components-big.jpg&description=TailwindElements)
- [Share via Reddit](https://reddit.com/submit?url=https://tw-elements.com/&title=500+%20open-source%20components%20for%20TailwindCSS)
- [Share via StumbleUpon](https://www.stumbleupon.com/submit?url=https://tw-elements.com/&title=500+%20open-source%20components%20for%20TailwindCSS)
- [Share via Vkontakte](https://vk.com/share.php?url=https://tw-elements.com/)
- [Share via Weibo](https://service.weibo.com/share/share.php?url=https://tw-elements.com/&title=500+%20open-source%20components%20for%20TailwindCSS)
- [Share via Hackernews](https://news.ycombinator.com/submitlink?u=https://tw-elements.com/&t=500+%20open-source%20components%20for%20TailwindCSS)
- [Share via Gmail](https://mail.google.com/mail/?view=cm&to=%7Bemail_address%7D&su=Check%20out%20this%20project&body=Hello,%0AI%27m%20reaching%20out%20to%20recommend%20my%20latest%20discovery.%0A%0AIt%27s%20over%20500+%20open-source%20components%20for%20TailwindCSS%20with%20excellent%20support%20and%20an%20awesome%20community:%0Ahttps://tw-elements.com/%0A%0AI%20hope%20you%20will%20find%20it%20useful.%0ABest%20regards,&bcc=%7Bemail_address%7D&cc=%7Bemail_address%7D)
- [Share via email](mailto:?subject=Check%20out%20this%20project&body=Hello%2C%0AI'm%20reaching%20out%20to%20recommend%20my%20latest%20discovery.%0A%0AIt's%20over%20500%20%20open-source%20components%20for%20Tailwind%20CSS%20with%20excellent%20support%20and%20an%20awesome%20community%3A%0Ahttps%3A%2F%2Ftw-elements.com%2F%0A%0AI%20hope%20you%20will%20find%20it%20useful.%0ABest%20regards%2C)
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"><b>Datepicker</b></td>
<td align="center"><b>Dropdown</b></td>
<td align="center"><b>Modal</b></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"><b>Charts</b></td>
<td align="center"><b>Tooltips</b></td>
<td align="center"><b>Carousel</b></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"><b>Accordion</b></td>
<td align="center"><b>Tabs</b></td>
<td align="center"><b>Stepper</b></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"><b>Timepicker</b></td>
<td align="center"><b>Footer</b></td>
<td align="center"><b>Navbar</b></td>
</tr>
<!--New row-->
<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"><b>Alerts</b></td>
<td align="center"><b>Avatar</b></td>
<td align="center"><b>Badges</b></td>
</tr>
<!--New row-->
<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"><b>Button group</b></td>
<td align="center"><b>Buttons</b></td>
<td align="center"><b>Cards</b></td>
</tr>
<!--New row-->
<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"><b>Chips</b></td>
<td align="center"><b>Collapse</b></td>
<td align="center"><b>Gallery</b></td>
</tr>
<!--New row-->
<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"><b>Jumbotron</b></td>
<td align="center"><b>Link</b></td>
<td align="center"><b>List group</b></td>
</tr>
<!--New row-->
<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"><b>Notifications</b></td>
<td align="center"><b>Paragraphs</b></td>
<td align="center"><b>Placeholders</b></td>
</tr>
<!--New row-->
<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"><b>Popover</b></td>
<td align="center"><b>Progress</b></td>
<td align="center"><b>Rating</b></td>
</tr>
<!--New row-->
<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"><b>Scroll to top</b></td>
<td align="center"><b>Social buttons</b></td>
<td align="center"><b>Spinners</b></td>
</tr>
<!--New row-->
<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"><b>Timeline</b></td>
<td align="center"><b>Toast</b></td>
<td align="center"><b>Tooltip</b></td>
</tr>
<!--New row-->
<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"><b>Video</b></td>
<td align="center"><b>Video carousel</b></td>
<td align="center"><b>Checkbox</b></td>
</tr>
<!--New row-->
<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"><b>File input</b></td>
<td align="center"><b>Input group</b></td>
<td align="center"><b>Login form</b></td>
</tr>
<!--New row-->
<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"><b>Radio</b></td>
<td align="center"><b>Range</b></td>
<td align="center"><b>Registration form</b></td>
</tr>
<!--New row-->
<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"><b>Search</b></td>
<td align="center"><b>Select</b></td>
<td align="center"><b>Switch</b></td>
</tr>
<!--New row-->
<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"><b>Textarea</b></td>
<td align="center"><b>Tables</b></td>
<td align="center"><b>Ripple</b></td>
</tr>
<!--New row-->
<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"><b>Animations</b></td>
<td align="center"><b>Masks</b></td>
<td align="center"><b>Shadows</b></td>
</tr>
<!--New row-->
<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"><b>Datatables</b></td>
<td align="center"><b>Lightbox</b></td>
<td align="center"><b>Rating</b></td>
</tr>
<!--New row-->
<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"><b>Scrollbar</b></td>
<td align="center"><b>Popconfirm</b></td>
<td align="center"><b>More coming soon</b></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"><b>Hero</b></td>
<td align="center"><b>Pricing</b></td>
<td align="center"><b>Call to action</b></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"><b>Features</b></td>
<td align="center"><b>Contact</b></td>
<td align="center"><b>News/blog</b></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"><b>Team</b></td>
<td align="center"><b>Stats</b></td>
<td align="center"><b>Testimonials</b></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"><b>Content</b></td>
<td align="center"><b>Newsletter</b></td>
<td align="center"><b>Projects</b></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"><b>Headers</b></td>
<td align="center"><b>FAQ</b></td>
<td align="center"><b>Logo Clouds</b></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"><b>Banners</b></td>
<td align="center"><b>Mega Menu</b></td>
<td align="center"><b>More coming soon</b></td>
</tr>
</table>
---
## Integrations
TW Elements integrations with popular technologies.
- [Django Integration](https://tw-elements.com/docs/standard/integrations/django-integration/)
- [Angular Integration](https://tw-elements.com/docs/standard/integrations/angular-integration/)
- [Express Integration](https://tw-elements.com/docs/standard/integrations/express-integration/)
- [Laravel Integration](https://tw-elements.com/docs/standard/integrations/laravel-integration/)
- [Next Integration](https://tw-elements.com/docs/standard/integrations/next-integration/)
- [Nuxt Integration](https://tw-elements.com/docs/standard/integrations/nuxt-integration/)
- [Django Integration](https://tw-elements.com/docs/standard/integrations/react-integration/)
- [Remix Integration](https://tw-elements.com/docs/standard/integrations/remix-integration/)
- [Solid Integration](https://tw-elements.com/docs/standard/integrations/solid-integration/)
- [Svelte Integration](https://tw-elements.com/docs/standard/integrations/svelte-integration/)
- [Sveltekit Integration](https://tw-elements.com/docs/standard/integrations/sveltekit-integration/)
- [Vue Integration](https://tw-elements.com/docs/standard/integrations/vue-integration/)
---
## Installation
##### NPM
1. Before starting the project make sure to install [Node.js (LTS)](https://nodejs.org/en/ "Node.js (LTS)") and [TailwindCSS](https://tailwindcss.com/ "TailwindCSS").
2. Run the following command to install the package via NPM:
```
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:
```
<script src="./TW-ELEMENTS-PATH/js/tw-elements.umd.min.js"></script>
```
Alternatively, you can import it in the following way (bundler version):
```
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:
```
npm install -g mdb-cli
```
2. Log into the CLI using your MDB account:
```
mdb login
```
3. Initialize a project and choose **Tailwind Elements** from the list:
```
mdb init tailwind-elements-free
```
4. Install the dependencies (inside the project directory):
```
npm install
```
5. Run the app:
```
npm start
```
6. Publish when you're ready:
```
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:
```
<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:
```
<script src="https://cdn.jsdelivr.net/npm/tw-elements/js/tw-elements.umd.min.js"></script>
```