{"id":14962193,"url":"https://github.com/mdbootstrap/tw-elements-react","last_synced_at":"2025-04-24T00:23:17.364Z","repository":{"id":171320188,"uuid":"641867918","full_name":"mdbootstrap/TW-Elements-React","owner":"mdbootstrap","description":"TW Elements for React - 𝙃𝙪𝙜𝙚 collection of Tailwind + React components, sections and templates 😎","archived":false,"fork":false,"pushed_at":"2024-06-03T12:54:39.000Z","size":3922,"stargazers_count":139,"open_issues_count":31,"forks_count":25,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-21T09:06:29.418Z","etag":null,"topics":["component","components","components-library","javascript","react","react-template","reactjs","reactjs-components","tailwind-css","tailwind-css-template","tailwind-template","tailwind-ui","tailwindcss","tailwindcss-plugin","template","templates","theme","themes","ui-components","uikit"],"latest_commit_sha":null,"homepage":"https://tw-elements.com/docs/react/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-17T10:31:14.000Z","updated_at":"2025-04-09T17:03:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"741e4efe-6931-4c31-8fe7-0328d0492785","html_url":"https://github.com/mdbootstrap/TW-Elements-React","commit_stats":{"total_commits":121,"total_committers":10,"mean_commits":12.1,"dds":0.5950413223140496,"last_synced_commit":"065ab3abd9b0d53b8437e5edfb11d6bc2c8b19d2"},"previous_names":["mdbootstrap/tailwind-elements-react","mdbootstrap/tw-elements-react"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2FTW-Elements-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2FTW-Elements-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2FTW-Elements-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2FTW-Elements-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/TW-Elements-React/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250536374,"owners_count":21446724,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","components","components-library","javascript","react","react-template","reactjs","reactjs-components","tailwind-css","tailwind-css-template","tailwind-template","tailwind-ui","tailwindcss","tailwindcss-plugin","template","templates","theme","themes","ui-components","uikit"],"created_at":"2024-09-24T13:29:39.199Z","updated_at":"2025-04-24T00:23:17.323Z","avatar_url":"https://github.com/mdbootstrap.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TW Elements React [\u003cimg src=\"https://tecdn.b-cdn.net/img/logo/te-react-logo.webp\" width=\"45\" align=\"right\" alt=\"tw-elements\"\u003e](https://tw-elements.com/docs/react/)\u003ca href=\"https://www.npmjs.com/package/tw-elements-react\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/tw-elements-react.svg\" alt=\"Total Downloads\"\u003e\u003c/a\u003e \u003ca href=\"https://github.com/mdbootstrap/TW-Elements-React/releases\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/tw-elements-react.svg\" alt=\"Latest Release\"\u003e\u003c/a\u003e \u003ca href=\"https://twitter.com/intent/tweet/?text=Thanks+@TWElement+for+creating+an+amazing+collection+of+open+source+components+for+@tailwindcss%20https://tw-elements.com/docs/react/\u0026hashtags=tailwindCSS,bootstrap,webdesign,react,100DaysOfCode,DevCommunity\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\u0026label=Let%20us%20know%20you%20were%20here%21\u0026\"\u003e\u003c/a\u003e\n\nTW Elements React is a huge collection of free, interactive React components for Tailwind CSS.\n\n \u003ctable\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n          \u003ca href=\"https://tw-elements.com/docs/react/\" alt=\"TW Elements tutorials\" rel=\"dofollow\"\u003e\n          \t\t\u003cimg width=\"600\" src=\"https://tecdn.b-cdn.net/img/react-big.jpg\"\u003e\n          \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e    \n        \u003cul\u003e\n         \u003cli\u003e500+ UI components\u003c/li\u003e\n         \u003cli\u003eDark mode support\u003c/li\u003e      \n         \u003cli\u003eEasy theming \u0026 customization\u003c/li\u003e\n         \u003cli\u003eSimple, 1 minute install\u003c/li\u003e    \n         \u003cli\u003eFree for personal \u0026 commercial use\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cp\u003e\u003cb\u003e\u003ca href=\"https://tw-elements.com/docs/react/getting-started/quick-start/\"\u003eGet started with TW Elements React now!\u003c/a\u003e\u003c/b\u003e\u003c/p\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n   \u003c/tbody\u003e\n  \u003c/table\u003e\n\n---\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [License](#license)\n- [Coming soon](#coming-soon)\n- [Components](#components)\n- [Installation](#installation)\n\n---\n\n## License\n\nTWE React Alpha licensing information is available at the license file\n\n---\n\n## Coming soon\n\nCheck out the upcoming features - watch our **[social profiles](https://twitter.com/TailwindElement/)** to **get early access**!\n\n \u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Builder\" src=\"https://mdbootstrap.com/img/tw-demo/drag-and-drop.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Templates\" src=\"https://mdbootstrap.com/img/tw-demo/templates.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e \n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Design blocks\" src=\"https://mdbootstrap.com/img/tw-demo/design-blocks.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e \n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eDrag \u0026 drop builder\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTemplates\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eDesign blocks\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n---\n\n## Components\n\nA collection of stunning components made with attention to the smallest details. Forms, cards, buttons, and hundreds of others – in TW Elements React you will find all the essential elements necessary for every project.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Datepicker\" src=\"https://mdbootstrap.com/img/tw-demo/datepicker.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Dropdown\" src=\"https://mdbootstrap.com/img/tw-demo/dropdown.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/modal/\"\u003e\n            \u003cimg alt=\"Modal\" src=\"https://mdbootstrap.com/img/tw-demo/modal.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eDatepicker (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eDropdown (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eModal\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Charts\" src=\"https://mdbootstrap.com/img/tw-demo/charts.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tooltips\" src=\"https://mdbootstrap.com/img/tw-demo/tooltips-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Carousel\" src=\"https://mdbootstrap.com/img/tw-demo/carousel.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eCharts (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTooltips (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eCarousel (coming soon)\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/accordion/\"\u003e\n            \u003cimg alt=\"Accordion\" src=\"https://mdbootstrap.com/img/tw-demo/accordion.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/navigation/tabs/\"\u003e\n            \u003cimg alt=\"Tabs\" src=\"https://mdbootstrap.com/img/tw-demo/tabs.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Stepper\" src=\"https://mdbootstrap.com/img/tw-demo/stepper.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eAccordion\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTabs\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eStepper (coming soon)\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbootstrap.com/img/tw-demo/timepicker.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/navigation/footer/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/img/tw-demo/footer.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbootstrap.com/img/tw-demo/navbar.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTimepicker (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eFooter\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eNavbar (coming soon)\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n    \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/alert-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/avatar/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/avatar.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/badges/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/badge-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eAlerts (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eAvatar\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eBadges\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/button-group/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/button-group-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/buttons/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/button-2.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/cards/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/card-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eButton group\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eButtons\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eCards\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg 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\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/collapse/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/collapse-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg 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\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eChips (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eCollapse\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eGallery (coming soon)\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/header-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/link/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/link.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/listgroup/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/list-group-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eJumbotron (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eLink\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eList group\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/notification.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/paragraphs/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/paragraphs.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/placeholders/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/placeholder-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eNotifications (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eParagraphs\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003ePlaceholders\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/popover-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/progress/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/progress-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/rating/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/rating-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003ePopover (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eProgress\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eRating\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/scroll-back-to-top-button/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/scroll-back-to-top.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/social-buttons/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/social-media.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/spinners/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/spinner-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eScroll to top\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eSocial buttons\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eSpinners\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/components/timeline/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/timeline.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/toast-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/tooltip-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTimeline\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eToast (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTooltip (coming soon)\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/video.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/video-carousel.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/forms/checkbox/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/checkbox-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eVideo (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eVideo carousel (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eCheckbox\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/forms/file-input/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/file-upload.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/input-group.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/forms/login-form/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/login-form.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eFile input\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eInput group (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eLogin form\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e  \n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/forms/radio/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/radio-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/forms/range/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/range-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/forms/registration-form/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/registration-form.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eRadio\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eRange\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eRegistration form\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/forms/search/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/search-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/select-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/forms/switch/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/switch.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eSearch\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eSelect (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eSwitch\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/textarea.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/data/tables/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/table-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/methods/ripple/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/ripple.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTextarea (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTables\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eRipple\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"#\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/animations2.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/content-styles/mask/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/mask-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/react/content-styles/shadows/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/shadow-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eAnimations (coming soon)\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eMasks\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eShadows\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n\u003c/table\u003e\n\n---\n\n## Installation\n\n##### NPM\n\n1. Before starting the project make sure to install [Node.js (LTS)](https://nodejs.org/en/ \"Node.js (LTS)\") version 14+, 16+ and [TailwindCSS](https://tailwindcss.com/ \"TailwindCSS\").\n\n2. Run the following command to install the package via NPM:\n\n```\nnpm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/twe-react/prd/twe-react-pro-essential\n```\n\n3. Add the TW Elements React css file to your main js/tsx file\n\n```javascript\nimport \"tw-elements-react/dist/css/tw-elements-react.min.css\";\n```\n\n4. 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:\n\n```javascript\nmodule.exports = {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n    \"./node_modules/tw-elements-react/dist/js/**/*.js\",\n  ],\n  theme: {\n    extend: {},\n  },\n  darkMode: \"class\",\n  plugins: [require(\"tw-elements-react/dist/plugin.cjs\")],\n};\n```\n\n5.  Components will work after importing the package:\n\n```javascript\nimport { TECollapse } from \"tw-elements-react\";\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Ftw-elements-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Ftw-elements-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Ftw-elements-react/lists"}