Changelog

30 new icons:

Fixes and improvements

• Redraw shopping-cart-copy, which was identical to shopping-cart-check (#1692)
• Webfont: Refresh cached webfont icons when their source SVGs change. (#1651)
• Webfont: Add U+20 to the unicode-range of the core chunk so that browsers take the line metrics from Tabler Icons and not from the system fallback font. Since 3.50.0 icons rendered taller than 1em and sat too high in their line box. (#1716)
• Vue: size, color, stroke, strokeWidth and title are declared as props, so they are no longer rendered as DOM attributes on the <svg>, and strokeWidth maps to stroke-width (#1688)
• Sprite: The invisible 24×24 background path is no longer repeated in every <symbol> (#1691)
• SolidJS: The CommonJS bundle is published as .cjs, so Node no longer parses it as an ES module (#1689)
• React Native: The types entries in package.json point at files that exist: CommonJS consumers get .d.cts declarations and per-icon subpath imports are typed (#1690)

A patch release for Tabler 1.7 with four fixes. Autosize no longer moves the scroll position of a scrolled ancestor when the textarea grows, .card-table keeps its rounded corners inside the responsive table wrappers, a wrapped .modal-title gets proper vertical padding in .modal-header, and Tom Select chips, optgroup dividers and dropdown corners read the right --tblr-* variables instead of undefined --bs-* ones.

Core changes

• 62faccc: Fixed Autosize moving the scroll position of a scrolled ancestor when the textarea is resized.
• 21dc7f5: Fixed .card-table losing its rounded corners inside .table-responsive-sm to .table-responsive-xxl wrappers.
• ec4b184: Fixed .modal-header vertical padding so multiline and wrapped .modal-title text no longer touches the header edges.
• 8dec6f4: Fixed Tom Select chip border-radius, optgroup dividers and dropdown corners that read undefined --bs-* variables.

Get Started with Tabler

Ready to explore the latest features? Download Tabler today and start building with the most advanced version of Tabler yet! 🚀

• View Documentation
• View Preview
• Download Tabler v1.7.3

We’d love to hear your thoughts and see what you build with this release. Share your feedback and creations with us!

A small patch release for Tabler 1.7. It fixes the Datepicker crash when the start of a range is clicked again, lets data-bs-dismiss="offcanvas" close a responsive offcanvas without a data-bs-target, and gives .table-primary, .table-warning and the other table variants proper backgrounds in dark mode. The demo charts no longer crash when an axis formatter gets an empty value.

Core changes

• f251b2f: Fixed Datepicker throwing on a click when the start of a range is clicked again to clear it.
• 3dba8bc: Let data-bs-dismiss="offcanvas" close a responsive offcanvas (.offcanvas-lg etc.) without data-bs-target.
• 19fc71a: Fixed .table-primary, .table-warning and other table variants showing light backgrounds in dark mode.

Demo changes

• 40a1a91: Fixed a chart tooltip crash when the thousands or suffix-k axis formatter gets an empty value.

Get Started with Tabler

Ready to explore the latest features? Download Tabler today and start building with the most advanced version of Tabler yet! 🚀

• View Documentation
• View Preview
• Download Tabler v1.7.2

We’d love to hear your thoughts and see what you build with this release. Share your feedback and creations with us!

18 new icons:

New features

• Webfont: Split the webfont into chunks loaded with unicode-range: one with the 300 most popular icons and one per icon category (for the filled font: the popular icons and the rest). A page now downloads only the chunks with the icons it shows, e.g. about 40 KB instead of about 500 KB when it uses only popular icons. Set $ti-font-split: false in SCSS to load the single font file as before. (#1654)

Fixes and improvements

• React Native: Fix color being ignored by the icon nodes that fill with currentColor (e.g. IconSquareRoundedCheckFilled, the dot of IconAccessible): the root Svg now gets color, which react-native-svg resolves currentColor to (#1668)

A patch release for Tabler 1.7. It fixes the issues that surfaced right after the 1.7 release: the flag size classes inside flex containers, the small and large select arrow, .modal-lg and .modal-xl below their breakpoints, a checkbox label that stretched across the whole row and a round of Tom Select focus ring and dark theme glitches. Modals and offcanvases return focus to the element that opened them, .text-muted has better contrast in dark mode, and the demo pages got a pass on accessible names, heading order and reduced motion.

Core changes

• 50c15e7: Fixed .breadcrumb link styles applying to the items of a dropdown placed inside it.
• 2bdbab3: Fixed dark mode contrast of .text-muted and other muted theme color utilities with a lighter --tblr-muted value.
• 1745d1f: Fixed the .flag size classes, which were stretched to one height inside flex containers because the height came from aspect-ratio.
• db649f4: Fixed .form-check-label stretching the clickable area of a checkbox or radio across the whole row.
• f076113: Fixed the arrow position and the room kept for it in .form-select-sm and .form-select-lg.
• 0d2e253: Fixed .modal-lg and .modal-xl falling back to the default width in viewports below the lg and xl breakpoints.
• 5d5186e: Fixed Modal and Offcanvas not returning focus to the element that opened them when closed.
• e069052: Fixed .page-text in pagination using the body font size instead of --tblr-pagination-font-size, including pagination-sm and pagination-lg.
• ac8eb82: Fixed ApexCharts demos and Dropzone previews to respect prefers-reduced-motion, with a shared prefersReducedMotion() helper.
• 8336b33: Added a focus ring to .card-body-scrollable and .table-responsive so a scrollable region that is focused with the keyboard is visible.
• cf3ceaa: Fixed the native clear button missing from .form-control search inputs in Chrome and Safari.
• 73392da: Fixed .sortable-drag tilting the dragged element itself in native drag mode, which broke the drag.
• c9e9b9b: Fixed the uneven .table-bordered grid in the dark theme by using the opaque border color.
• f1a49aa: Fixed .text-bg-* and .progress-bar hard-coding white text instead of reading the --tblr-*-fg tokens.
• 3eaeb74: Fixed the Tom Select focus ring leaving the wrapper border visible at the corners.
• 0df5946: Fixed the Tom Select focus ring flashing black before it fades in.
• 7ee278f: Fixed the square start corners of a Tom Select that opens an .input-group.
• 01f6a6c: Fixed the Tom Select dropdown text growing to the mobile font size on phones.
• fa4c175: Fixed the bright dividers before the remove button of Tom Select chips in the dark theme.

Demo changes

• 76b309f: Fixed the unnamed search input in the AdvancedTable demo by adding an aria-label.
• 74f6193: Fixed the heading order on the dashboard and other preview pages so no heading level is skipped.
• 041d4e9: Added an accessible name to the split dropdown toggle and the icon-only button demos.
• 1dfe93d: Fixed the missing accessible name on the invalid state input in the form elements demo by adding aria-label.
• 2225064: Fixed the select all checkbox in the Invoices table on the tables preview page.
• ae7cd30: Added aria-label to the row checkboxes in the invoices, tasks and advanced table demos and the input group checkbox and radio.
• ac6615c: Fixed the page header in DefaultLayout so it sits inside the <main> landmark.
• fcf5276: Added an ariaLabel prop to Pagination and gave each pagination on a page its own name.
• 276c904: Added an ariaLabel prop to Range and named the noUiSlider handles on the form elements pages.
• 6acc5c5: Fixed unlabeled <select> elements on the form demo pages and added an ariaLabel prop to the Select component.
• c15dac2: Added hidden text to empty <th> cells in the Table, AdvancedTable, TopDeals and Invoices demos and the tour page.
• 9beef3a: Updated the demo Toast to use role="status" and aria-live="polite" by default, with an urgent prop for alert.
• c3ae0ed: Fixed the height of the Traffic summary chart on the dashboard page.

Get Started with Tabler

Ready to explore the latest features? Download Tabler today and start building with the most advanced version of Tabler yet! 🚀

• View Documentation
• View Preview
• Download Tabler v1.7.1

We’d love to hear your thoughts and see what you build with this release. Share your feedback and creations with us!