We are thrilled to announce the stable release of Tailwind Elements v1.0.0! In this release we fixed few issues and made sure that the components are working as expected. We hope you will enjoy the Tailwind Elements!

Docs

• #1906: Fixed modal examples that had input in them - by @juujisai

Fixed & improved

• #1913: Fixed issues with dismissing components - by @juujisai
• #1902: Updated Tailwind Elements starter content - by @juujisai
• #1893: The initTE method now allows users to specify additional options - by @juujisai

We're excited to introduce the Release Candidate version of Tailwind Elements, bringing us just a step away from the v1.0.0 release.

In this release, we were working on few new components and fixing some minor bugs. Let us know what you think about the new validation component and what we can further improve!

New features

• #1569: Added Extended animations - by @iprzybysz
• #1599: Added non-invasive modal and new modal examples - by @juujisai

New components

• #1561: Clipboard - by @iprzybysz
• #1562: Infinite scroll - by @iprzybysz
• #1563: Lazy loading - by @iprzybysz
• #1564: Loading management - by @iprzybysz
• #1566: Smooth scroll - by @iprzybysz
• #1567: Sticky - by @iprzybysz
• #1568: Touch - by @iprzybysz
• #1132: Validation - by @juujisai
• #1558: Datetimepicker - by @juujisai

Docs

• #1840: Added technology switcher to the main navbar - by @juujisai
• #1867: Added border and border radius to videos on Quick Start page - by @juujisai
• #1570: Added Privacy and GDPR Policy page - by @juujisai
• #1852: Fixed init via JS snippet for Animations - by @iprzybysz
• #1870: Fixed Select with CSS classes snippet - by @iprzybysz

Fixed & improved

• #1573: Fixed Animations issues on smaller screens - by @iprzybysz
• #1571: Improved styling for footer elements - by @iprzybysz
• #1572: Fixed Placeholders issues on smaller screens - by @iprzybysz
• #1844: Fixed colors of change time buttons in inline timepicker - by @iprzybysz
• #1845: Fixed issues with changing time by arrows in inline timepicker - by @iprzybysz
• #1877: Fixed issues with dropdowns inside navbar examples going off-viewport - by @iprzybysz
• #1869: Fixed issues with css sourcemaps - by @juujisai

In this release, we're introducing several new components and implementing numerous improvements and bug fixes. Notably, we've included a detailed guide on working with Legacy documentation and informative tutorials on effectively utilizing Internationalization (i18n) with Tailwind Elements. Additionally, we've also updated the look of some of our components and the layout of our documentation.

New features

• #1341: CLA signing bot - by @smolenski-mikolaj, @juujisai
• #1372: Added local installation guide for Legacy docs - by @iprzybysz
• #1555: Added Charts advanced page - by @juujisai
• #1635: Added new examples of navbars in documentation - by @iprzybysz
• #1664: Added new design blocks landing pages - by @martussky
• #1665: Added new design blocks demo landing pages - by @martussky
• #1700: Added autoinits for Tooltips and Popover - by @iprzybysz
• #1554: Created a new Internationalization guide - by @iprzybysz
• #1610: Added new Card examples - by @iprzybysz

New components

• #1556: Datatables - by @iprzybysz
• #1557: Lightbox - by @iprzybysz
• #1560: Rating - by @juujisai
• #1565: Scrollbar - by @juujisai
• #1559: Popconfirm - by @iprzybysz

Docs

• #1519: Update next integration tutorials to fix issues with incompatibility - by @juujisai
• #1550: Update the integration tutorials for the latest TE version - by @Trochonovitz
• #1629: Update the look of the main sidenav - by @juujisai
• #1626: Added Note About Using Hover With Animation - by @Yarob50
• #1633: Added offset to scrollspy in documentation - by @iprzybysz
• #1632: Updated footer - by @marveluck
• #1645: Updated the dark mode design in Prism - by @juujisai
• #1692: Added necessary module types to script tags - by @juujisai
• #1735: Updated info about React Tailwind Elements in React integration tutorial - by @filipkappa
• #1770: Updated notes about required node version after latest vite release - by @juujisai
• #1766: Fixed code indentation in integration tutorial snippets - by @iprzybysz
• #1805: Fixed typo in breadcrumbs file structure - by @juujisai

Optimization & refactor

• #1345: Scroll to top button - code update, new preview - by @juujisai
• #1506: Update the initialization of Carousel component and fix the autoplay issues - by @iprzybysz
• #1538: Unify and change the Chips init - by @juujisai
• #1543: Added possibility to change the input options and classes of the select component - by @iprzybysz
• #1565: Added Scrollbar component to Sidenav - by @juujisai
• #1623: Changed default line-height for paragraphs - by @iprzybysz
• #1686: Removed h1 & code hardcoded styles from TE - by @juujisai

Fixed & improved

• #1380: Fixed typos in Colors - by @martussky
• #1440: Fixed placeholder showing only for multiselect - by @juujisai
• #1536: Fixed issues with Scrollspy misalignment when loading page with anchor - by @juujisai
• #1578: Removed fixed width classes from code snippets - by @Trochonovitz
• #1594: Fixed mask color on hover for a card - by @martussky
• #1595: Fixed color class in the color docs - by @martussky
• #1596: Fixed hover effects color in the docs - by @martussky
• #1628: Charts - fixed issue with formatter when darkmode is on - by @juujisai
• #1630: Added darker background for examples in Cards and Navbars - by @iprzybysz
• #1643: Updated error message design in Timepicker - by @iprzybysz
• #1644: Form templates - update code in snippets - by @iprzybysz
• #1659: Fixed issues with clicking on Sidenav on iPhones - by @juujisai
• #1687: Fixed description in Paragraph documentation - by @iprzybysz
• #1667: Fixed issues with custom containers in inline Datepicker - by @iprzybysz
• #1689: Fixed "xs" breakpoint in plugin.cjs - by @juujisai
• #1701: Fixed issues with multiple initializations via initTE method - by @juujisai
• #1729: Fixed typos in scrollspy documentation - by @juujisai
• #1731: Fixed snippet for datepicker with translations - by @juujisai
• #1779: Update the dark mode background for Select inside the input group page - by @iprzybysz
• #1777: Fixed issues with clearing the select when default selected value was set - by @iprzybysz
• #1793: Fixed the position in vertical steppers - by @juujisai
• #1798: Ripple - fixed class customization - by @juujisai
• #1619: Fixed dispose method for Select component - by @vadim-pavlov
• #1680: Fixed typos in colors and tabs pages - by @whamtet
• #1807: Fixed issues with autoinits added to body element - by @juujisai
• #1815: Fixed issues with dismissing Alert component - by @juujisai
• #1738: Update scrollspy position calculation - by @AngeloKarugo

Dark mode integration

• #1179: Range - by @martussky
• #1582: Improved dark mode integration for charts - by @juujisai, @iprzybysz

This release brings huge improvements to the optimization of JS files. We decided to migrate from Webpack to Vite and add support for ES modules. This gives a significant weight reduction of the files built with our components, but requires their individual import and initialization. In addition, we implemented a system option for the dark theme in docs, checked many reports regarding integration with external tools and prepared dedicated guides.

New features

• #1279: ES modules support - by @juujisai
• #1461: External tools and frameworks integrations - by @trochonovitz

New components

• #1457: Chart - by @juujisai

Docs

• #1548: Dark mode - system option support - by @smolenski-mikolaj
• #1470: Add comments for nested elements in HTML code - by @trochonovitz
• #1484: Remove wrapper elements from all code snippets - by @trochonovitz
• #1412: Contribution guide updates - by @trochonovitz
• #1397: Add fixed buttons example - by @trochonovitz
• #1393: Getting started step by step tutorial for Vite - by @juujisai
• #1371: Scrollspy - add smooth scroll - by @trochonovitz
• #1370: Prism design update - by @iprzybysz
• #1459: Tutorials refactor - by @juujisai
• #1369: Search - first item should be active after typing anything - by @juujisai
• #1356: New newsletter page - by @trochonovitz
• #1361: Scrollspy - fix active item highlight on large screens - by @trochonovitz
• #1362: Prism - add terminal integration with $ sign - by @juujisai

Optimization & refactor

• #1549: Datepicker, Timepicker, Select - inputs unification and icons updates - by @juujisai
• #1549: Datepicker new features - by @juujisai

Fixed & improved

• #1384: Design system updates - by @martussky
• #1363: Dark mode integration and fix button issue in TE-STARTER (ZIP), CDN and MDB GO Starter - by @smolenski-mikolaj
• #1376: Modal - delayed dialog animation fix - by @trochonovitz
• #1373: Multiselect - double clicking on input crashes border - by @juujisai
• #1372: Animations - update init animations to run smooth - by @trochonovitz
• #1469: Timepicker fix for working with frameworks - by @trochonovitz
• #1381: Timepicker - custom icons without focus & disabled past issue - by @juujisai
• #1455: Add Tailwind-Elements version to disclaimer - by @juujisai

Dependencies

• #1532: Tailwind update from v3.2.4 to v3.3.0 - by @trochonovitz
• #1279: Migration from Webpack to Vite - by @juujisai

Dark mode integration

• #1404: Forms - by @martussky
• #1450: Charts - by @juujisai

In this breakthrough version we focused our attention on removing all custom classes from the UI KIT in favor of a Tailwind CSS system. Each component has been integrated with the dark theme. We added the option to customize classes in all components, even those with a complex structure. We migrated icons to SVG format, also giving full freedom to personalize them.

Our set has been extended with new complex Sidenav and Select components. Design system was improved to match the Material Minimal guidelines. The website got a new layout, as well as new functionalities such as API tab or modes switcher.

New features

• #1090, #1129: Migrate UI KIT class system to Tailwind and refactor Datepicker, Timepicker, Stepper, Ripple, Collapse, Accordion, Buttons, Carousel, Close, Dropdown, Modal, Navbar, Offcanvas, Popover, Spinners, Tooltip, Transitions, Animations, Alert, Toast, Tabs, Pills, Chips, MegaMenu, Pagination, Scrollspy, Forms - by @juujisai, @trochonovitz, @r-jacko, @martussky
• #1116: Dark mode switcher - by @smolenski-mikolaj
• #1228: Class attributes customization - by @smolenski-mikolaj
• #1127: Ripple effect by default - by @iprzybysz
• #1126: New modal positions - by @trochonovitz
• #1119: Extend color palette with custom theme colors - by @martussky

New components

• #1173: Select & Multiselect - by @juujisai
• #1172: Sidenav - by @juujisai
• #1130: Outline input - by @juujisai
• #1108: Placeholders - by @martussky
• #1109: Dividers - by @martussky
• #1110: Figures - by @martussky
• #1111: Images - by @martussky
• #1112: Masks - by @martussky
• #1113: Shadows - by @martussky

Docs

• #1170: Dark mode integration - by @smolenski-mikolaj
• #1105: API tab - by @trochonovitz
• #1274: Theming tutorial - by @trochonovitz
• #1275: Dark mode tutorial - by @trochonovitz
• #1262: Code snippets - dark mode & design update - by @r-jacko
• #1306: Scrollspy and Javascript file names unification - by @juujisai
• #1314: Shortcut shift + D for switching between modes - by @juujisai

Optimization & refactor

• #1125: Update compile config to deploy js components as te library - by @smolenski-mikolaj
• #1294: Manipulator utility update - by @juujisai
• #1285: Tidy up files structure - by @juujisai
• #1287: Focus trap utility fix - by @juujisai
• #1145: Add class ordering plugin - by @smolenski-mikolaj

Fixed & improved

• #1122: Video docs page layout fix - by @martussky
• #1060: Toast dismissing - by @juujisai
• #1223: Modals - fix positions offsets, backdrop outside click and fullscreen example - by @trochonovitz
• #1264: Tabs & Pills - prevent animating while clicking on active item - by @trochonovitz
• #1259: Timepicker - fix focus after closing via keyboard - by @trochonovitz
• #1064: Modal hidden class remaining active - by @trochonovitz

Dependencies

• #1096: Tailwind update from v3.0.7 to v3.2.4 - by @juujisai
• #1298: Icons - enable customization & migrate to Heroicons from Font Awesome - by @trochonovitz
• #1094: Migrate from Inter to Roboto font - by @juujisai
• #1059: Popper.js migrate to v2.x.x - by @trochonovitz

Dark mode integration

• #1175: Timepicker - by @r-jacko
• #1176: Textarea - by @juujisai
• #1177: Switch - by @martussky
• #1178: Search - by @martussky
• #1179: Range - by @martussky
• #1180: Radio - by @martussky
• #1183: File input - by @martussky
• #1185: Checkbox - by @martussky
• #1181: Inputs - by @juujisai
• #1184: Datepicker - by @juujisai
• #1186: Scrollspy - by @trochonovitz
• #1187: Navbar - by @trochonovitz
• #1189: Cards - by @iprzybysz
• #1190: Mega menu - by @shigure92
• #1191: Footer - by @trochonovitz
• #1192: Breadcrumb - by @trochonovitz
• #1193: Animations - by @trochonovitz
• #1194: Toasts - by @trochonovitz
• #1195: Timeline - by @shigure92
• #1196: Testimonials - by @shigure92
• #1197: Tables - by @shigure92
• #1198: Stepper - by @trochonovitz
• #1199: Social buttons - by @shigure92
• #1200: Shadows - by @shigure92
• #1201: Progress - by @shigure92
• #1202: Popover - by @shigure92
• #1203: Offcanvas - by @shigure92
• #1205: Modal - by @trochonovitz
• #1206: Login form - by @shigure92
• #1207: List group - by @shigure92
• #1208: Jumbotron - by @shigure92
• #1209: Hover effects - by @shigure92
• #1210: Headers - by @shigure92
• #1211: Dropdown - by @juujisai
• #1212: Collapse - by @iprzybysz
• #1213: Chips - by @iprzybysz
• #1214: Charts - by @iprzybysz
• #1241: Accordion - by @iprzybysz

Class customization

• #1229: Alert, Toast, Collapse, Accordion, Dropdown, Offcanvas, Ripple - by @juujisai
• #1230: Carousel - by @iprzybysz
• #1231: Datepicker - by @juujisai
• #1232, #1302: Timepicker - by @iprzybysz, @juujisai
• #1233: Modal, Scrollspy - by @trochonovitz
• #1234: Popover, Tooltip, Tabs, Pills - by @juujisai
• #1303: Chips - by @juujisai

API tab integration

• #1249: Popover, Tooltip, Tabs, Pills - by @trochonovitz
• #1250: Modal, Scrollspy - by @trochonovitz
• #1252: Button, Animate, Stepper - by @trochonovitz
• #1253: Datepicker - by @juujisai
• #1254: Carousel - by @iprzybysz
• #1251: Timepicker - by @iprzybysz
• #1255: Alert, Toast, Collapse, Accordion, Dropdown, Offcanvas, Ripple - by @iprzybysz