Tabler v1.6

Tabler 1.6 is out. It brings eight new components, a datepicker that doesn’t depend on Litepicker any more, a neutral gray scale, colors defined in oklch() and a focus ring that’s finally an outline. The CSS also got smaller: about 110 kB came off tabler.min.css. On top of that there are more than a hundred smaller changes across the framework, the demo pages and the docs.

Datepicker

A calendar popup for a text input or a button, or an inline calendar on the page. It handles a single date, several dates and a range. It’s built on Vanilla Calendar Pro, so Litepicker is deprecated, and the docs have a section on moving over from it.

Sparkline

Tiny line, bar and circle charts drawn inline with text, for a trend in a table cell or next to a number. The chart is an SVG rendered from data-bs-values, so no chart library is needed. It takes its color from text utilities and its size from classes.

Legend

A colored marker, a label and an optional value for the series of a chart or a progress bar. Group items with .legend-list, and turn on the interactive mode to toggle a series on click. The large variant .legend-lg shows a big value with a unit.

Signal

A small row of stepped bars that shows a level, such as priority, strength or coverage. It sits next to a label, and the number of bars, the color and the size are all adjustable.

Password strength

A segmented meter that rates the password as the user types, so a weak password is visible before the form is sent. The scoring and the labels are configurable, and every change fires change.bs.strength.

OTP input

A one-time code field shown as separate character slots. It’s still one real input underneath, so autofill, password managers, SMS codes and screen readers work. Slots can be grouped and masked, and there are validation states.

Clipboard

A copy button for the text of a field, an element or a literal string, with a short copied state. It’s built on the browser clipboard API and fires events, so dist/libs/clipboard is deprecated.

Confetti

A short shower of colored pieces over the page, for a finished setup, a first order or a signup. Put data-bs-toggle="confetti" on a button or call it from JavaScript, and set the amount, length, speed and colors with data attributes.

---

Plugins are components now

Autosize, CountUp, InputMask, Sortable and SwitchIcon are real components with instances, methods and events. Autosize and CountUp are written from scratch and don’t need the dist/libs scripts any more, so those are deprecated. CountUp respects prefers-reduced-motion.

Switch icon got a switch-icon-loading state. Pass a promise to event.wait() in the toggle.bs.switch-icon event and the button shows a spinner until it settles.

Sortable got drag styles for the ghost, the chosen and the dragged item, and the demo shows a drag handle, table rows, a kanban board, clone, multi-drag and swap.

tabler.js also no longer stops on page load when one element has an invalid data-* config. The error is logged and every other component is still created.

Neutral gray and oklch colors

The default gray scale is neutral now. In 1.5 it had a slight blue tint, so backgrounds, borders and muted text look a little different. To keep the 1.5 look, load tabler-themes.css and set data-bs-theme-base="gray" on <html>.

The palette is defined in oklch(), and tints, shades and hover states are mixed with color-mix(in oklab) instead of rgba(). Mixed colors are a touch cleaner, mostly noticeable in the lighter backgrounds. The --tblr-*-rgb variables are deprecated and stay until 2.0.

The focus indicator is a solid 2px outline instead of a box-shadow halo, stronger in dark mode. You can tune it per component with --tblr-focus-ring-width and --tblr-focus-ring-color.

Floating navbar and offcanvas

.navbar-floating detaches the navbar and the sidebar from the edge of the screen with a 0.5rem gap, and .offcanvas-floating does the same for an offcanvas. The theme settings data-bs-navbar-style="floating" and data-bs-offcanvas-style="floating" on <html> switch the whole page.

A native <dialog> opened with showModal() gets the same backdrop as a modal, and .modal-blur on it blurs the page behind. Scrolling to the end of a modal, an offcanvas or a scrollable dropdown no longer scrolls the page behind it.

Smaller CSS

tabler.min.css lost about 110 kB. The button, list group, bg-pattern-* and color utility styles are generated once instead of per variant, and the vertical navbar is generated once instead of per breakpoint. The flag, payment and social SVGs in dist/img are minified, and only the images the CSS uses are copied.

If you ship your own build, $enable-deprecated: false leaves the deprecated aliases and the --tblr-*-rgb variables out of the CSS entirely.

Demo and docs

The demo has a new billing page, a system status panel with 60-day uptime bars, gauge cards on the widgets page and a reworked charts page with sections and legends. The hardcoded Google Maps and Mapbox keys are gone; the map demos read them from the environment.

Component docs pages got a CSS variables section generated from the source, so it can’t go stale. Markdown tables and the class reference table sit in a bordered, scrollable box. The CDN snippets carry integrity and crossorigin attributes. There’s a Sortable page, an agent skill under /.well-known/agent-skills/, and the upgrade guides moved to /ui/getting-started/upgrade/ with one page per release.

Upgrading

Nothing in 1.6 requires a change to your markup. Two things can trip a build:

• 69 Sass variables that were plain colors are color-mix() strings now, so they follow --tblr-* overrides in the browser. That’s the *-bg-subtle, *-text-emphasis and *-border-subtle families, $body-secondary-color, $input-focus-border-color and a few navbar, dropdown and switch colors. Overriding them still works, but a Sass color function such as darken() or rgba() on their default value fails. Build from the base color instead: shade-color(tint-color($primary, 80%), 5%).
• The component port is compiled with strict TypeScript and every config is typed. A TypeScript project that passes a loosely typed options object to a component may get new type errors. Nothing changes at runtime.

A few things are deprecated and keep working:

• .form-hint is .form-text now, matching Bootstrap. The old class is an alias.
• An empty .legend still renders as a dot, but .legend-dot is the class for it.
• The $*-focus-box-shadow variables, theme-color-lighter(), url-svg(), varify() and a few other Sass helpers warn when used.
• The tabler.tabler JS namespace with getColor() and hexToRgba() is deprecated. Read the variable yourself.

Every change, with a before and after example for each one, is in the Upgrade to 1.6 guide.

Core changes

• a13ebc3: Added Autosize component to tabler.js, with update() and dispose() methods.
• 038000f: Added the --tblr-btn-input-* control scale on :root (padding, font size, line height, radius, min height per size).
• 0e2faa0: Added a Clipboard copy button built on the browser API; dist/libs/clipboard is deprecated.
• e63fe34: Added a Confetti component with data-bs-toggle="confetti", a demo page and docs.
• 118380d: Added Datepicker plugin built on Vanilla Calendar Pro with a datepicker preview page; Litepicker is deprecated.
• 0905918: Updated the default gray scale ($gray-50…$gray-950) to neutral; data-bs-theme-base="gray" keeps the 1.5 look.
• 2b44251: Added the .flag-country-yt flag for Mayotte.
• 744a09c: Updated the focus indicator from a box-shadow to an outline; the $*-focus-box-shadow variables and tokens are deprecated.
• c1373d7: Added --tblr-hover-bg variable and used it for the hover background of buttons, nav links, dropdown items and list groups.
• be30919: Updated .legend into a legend item with .legend-dot, .legend-value, .legend-off and .legend-list, plus a Legend component.
• a984752: Added .legend-lg, .legend-unit and .legend-list-divided for large legend items with a big value and a unit.
• c1786b5: Added dialog::backdrop styling so a native <dialog> uses the same backdrop as modals.
• 7e7b2ce: Added .navbar-floating and the data-bs-navbar-style="floating" theme setting for a navbar and sidebar with a 0.5rem gap.
• 7e7b2ce: Added .offcanvas-floating and the data-bs-offcanvas-style="floating" theme setting for an offcanvas with a 0.5rem gap.
• 0fe02b3: Updated color mixing to color-mix(in oklab); the --tblr-*-rgb variables are deprecated and stay until 2.0.
• a744b84: Added the OtpInput component with grouped slots, masking, and validation states.
• a984752: Added .page-section-title and .page-section-description classes for section headings inside the page body.
• 107e493: Updated the palette to oklch() and masked the check, switch, toggler and carousel icons; tabler JS namespace is deprecated.
• a9efcc2: Added the Signal component (.signal): stepped bars that show a level such as priority, with a Signal.astro wrapper.
• bd60d5f: Added SortableJS drag styles; set forceFallback to true on a data-sortable list to drag a styled, tilted copy.
• 5d5be36: Added Sparkline component: inline SVG line, bar and circle charts from data-bs-values, with size classes and signed bars.
• 9669c0a: Added a Strength password meter with a segmented bar, configurable scoring and change.bs.strength.
• 0776b88: Added a switch-icon-loading state and a cancelable toggle.bs.switch-icon event with event.wait(promise) for async toggles.
• bd5c010: Added SwitchIcon, CountUp, InputMask and Sortable components to tabler.js.
• da79879: Updated .accordion-button line height to 1.25rem via the --tblr-accordion-btn-line-height variable.
• b295d84: Fixed .accordion-button-toggle-plus with sprite icons by rotating the plus into a close icon instead of hiding a path.
• 72a95d8: Fixed .alert layout so headings, descriptions, lists and buttons align and stack correctly.
• 62408b8: Added a dependency-free Autosize component that fires resized.bs.autosize; dist/libs/autosize is deprecated.
• 3b8bf55: Updated the button, list group, bg-pattern-* and color utility styles to cut 72 kB from tabler.min.css.
• 58e03a9: Fixed CountUp rejecting numbers and booleans written as strings in data-countup, which countUp.js accepted.
• ea10f0e: Added a dependency-free CountUp component that respects prefers-reduced-motion; dist/libs/countup.js is deprecated.
• 58e03a9: Updated theme-color-lighter(), url-svg(), varify() and five more Sass helpers to deprecated; they warn when used.
• 18a8a49: Fixed .dropdown-menu-arrow border rendering on Firefox by trimming the clipped edges.
• 58e03a9: Added $enable-deprecated; set it to false to leave the deprecated aliases and --tblr-*-rgb variables out of the CSS.
• f778fcf: Removed the js/tests and scss/tests folders from the published @tabler/core package.
• 7bfeb12: Fixed .alert-link changing color on hover.
• cac3179: Fixed the ApexCharts tooltip arrow staying white in Safari by painting .apexcharts-tooltip-arrow directly.
• 7bfeb12: Fixed .card-options being taken out of the .card-header flow by position: absolute.
• 79796ab: Fixed .card-progress to overlay the card like .card-status, so its rounded corners match the card’s radius exactly.
• db903c3: Fixed .card-status-* strip corners not matching the card’s border-radius.
• 7bfeb12: Fixed Datepicker reopening on a second trigger click, its show and hide events, and its color scheme on light pages.
• 7bfeb12: Fixed --tblr-focus-ring-width and --tblr-focus-ring-color overrides having no effect when set on a component.
• ce52364: Fixed the default browser border and padding on .form-help when it is a <button>.
• 7bfeb12: Fixed the .form-switch knob not moving in RTL and its size in .form-switch-lg.
• 7bfeb12: Fixed tabler.js stopping on page load when one element has an invalid data-* config; the error is logged instead.
• 67a3795: Fixed .input-group-flat so .input-group-text follows the .is-valid and .is-invalid border and focus colors.
• 531529a: Fixed jQuery .on() listeners not receiving Bootstrap events like show.bs.dropdown in all components.
• 127c56b: Fixed the empty gutter to the right of the navbar on non-scrolling pages by dropping scrollbar-gutter: stable from html.
• 7e7b2ce: Fixed the menu row of the two-row navbar staying light with data-bs-navbar-theme set to dark or primary.
• 7bfeb12: Fixed missing IMaskInstance and SortableInstance in dist/types; vanilla-calendar-pro is an optional peer dependency.
• 64dd529: Fixed the .form-selectgroup-label icon-only margin applying to icons nested deeper inside the label.
• 9268348: Fixed .stretched-link on a .btn so the link covers its whole container instead of only the button.
• 61b492e: Fixed .table-striped and .table-striped-columns repainting rows and cells that set a .bg-*, .table-* or inline background.
• fa70c03: Fixed missing border between .card-table and .card-footer when wrapped in .table-responsive.
• a9efcc2: Fixed Tom Select growing taller on focus when the selected item has an indicator (avatar, flag, badge).
• c99a436: Fixed .is-valid and .is-invalid border colors and focus ring on Tom Select .form-select fields.
• 57e213b: Updated .form-hint to Bootstrap’s .form-text, with .form-hint kept as a deprecated alias.
• cc7afaf: Fixed a disabled off .form-switch looking the same as an enabled one by filling its track and darkening the knob.
• 03985e3: Fixed text badges in navbar .nav-link overlapping the title and causing horizontal scroll in the stacked menu.
• 0460291: Updated the .navbar-vertical styles to be generated once instead of per breakpoint, cutting 36 kB from tabler.min.css.
• 2b44251: Updated the flag, payment and social SVGs in dist/img to be minified with svgo, and copied only the images the CSS uses.
• 41e2dc7: Updated pre font size to 13px with a new $pre-font-size variable, and $markdown-pre-font-size for .markdown.
• 2b99ed5: Fixed invisible text selection inside pre blocks in light mode.
• c1786b5: Added overscroll-behavior: contain to .modal, .modal-body, .offcanvas-body and .dropdown-menu-scrollable.
• 3e60b18: Fixed .navbar-expand, .btn-link:hover, --*-darken, .ribbon fold colors, .avatar-brand z-index and dark mode literals.
• 1ffbeec: Updated the Bootstrap component port to strict TypeScript with typed ComponentConfig types and added eventActionOnPlugin.
• 3e60b18: Fixed light theme islands losing data-bs-theme-primary and radius, and added .theme-dark to the dark mode selectors.
• 8db40cd: Fixed Tom Select controls being shorter than .form-control by using Tabler input metrics in all sizes.

Demo changes

• 64dd529: Added new billing page with plan usage, payment method, and invoices layout.
• a984752: Updated the charts page with sections, card subtitles, Legend lists above charts and a semantic colors chart.
• bd60d5f: Added grouped Sortable demos: drag handle, table rows, kanban board, clone, multi-drag and swap.
• 3f767ee: Added a System status panel with 60-day uptime history bars to the Uptime preview page.
• 3f767ee: Added ApexCharts gauge cards to the Widgets preview page.
• eda6503: Updated the preview navbar Sponsor button and the docs sidebar Illustrations card to an All Package link and card.
• 4676d12: Fixed CardTitle text color on CardBackgroundIcon for readability.
• 7bfeb12: Added a Sortable docs page covering data-sortable, the drag styles and the Sortable component.
• 364ccf8: Fixed keyboard access and accessible names across preview pages, Alert, Avatar, Rating, Tag and Wysiwyg components.
• 3f767ee: Fixed the “Card with code” widget rendering its code as plain text instead of a pre block.
• 084d202: Fixed docs breadcrumbs, unresolved site expressions in the .md mirrors and the missing play and rss icons.
• 084d202: Fixed robots.txt, minified assets in BaseLayout, the marketing menu link and the markdown.html redirect in the preview.
• 0d39308: Fixed heading order, form autocomplete and accessible names on preview pages, Alert, Button, Dropzone and Avatar.
• 8636174: Fixed Trending signs, ApexCharts 7 legend markers, marketing asset paths, pageLibs checks and the notifications close button.
• 9268348: Fixed the actions dropdown in the tables and invoices demos being cut off by .table-responsive.
• 4cfa9f3: Removed the hardcoded Google Maps and Mapbox keys; map demos now read GOOGLE_MAPS_KEY and MAPBOX_KEY from the environment.
• bf576f1: Fixed page modals leaking between pages and made the change-password and confirm-delete modal scripts plain inline JS.
• 1dbabb5: Fixed a dev-server ENOENT race: preview’s watch:css now writes to tmp-assets/css and copy-assets syncs it into public/.
• add68b2: Fixed the missing promo top banner on docs.tabler.io and preview.tabler.io by restoring the banner.js script.
• f06de8a: Updated Tabler Icons to v3.48.0.

Docs changes

• 8ceb56b: Added an agent skill under /.well-known/agent-skills/ and an ai-catalog.json manifest to the docs.
• 8ae47ae: Added a CSS variables section to component docs pages, replacing the hand-written SCSS variables sections.
• 6bd3fff: Added the upgrade guide for Tabler 1.6 and moved the upgrade guides to /ui/getting-started/upgrade/ with one page per release.
• 2129b0b: Added a check:open-source gate and the five missing attributions, including Popper, which ships inside tabler.js.
• da79879: Updated accordion docs examples to use .bg-surface on each .accordion-item.
• 7bfeb12: Added relative colors, oklch(from …), to the features that set the minimum browser versions on the browser support page.
• bcf5991: Added integrity and crossorigin attributes to the CDN snippets on the installation and plugin pages.
• bab8f24: Updated the class reference table in the docs to use the bordered .docs-table box.
• c28e848: Updated the confetti amount example to use plain .btn buttons instead of .btn-outline-primary.
• 41e2dc7: Updated markdown tables in the docs with a bordered, scrollable .docs-table box and a tighter header row.
• 5a735bc: Added a note to the installation docs that tabler.js already includes Bootstrap and must not be loaded next to it.
• 7bfeb12: Added a note to the 1.5 upgrade guide that .text-gray-* classes, a no-op in 1.4, now set the text color.
• 7bfeb12: Added Litepicker, .legend and neutral gray sections to the 1.6 upgrade guide; fixed the jsVectorMap CDN link.
• e052821: Added --tblr-status-color-rgb, pre size, .card-options, .page-section-title and .theme-dark to the 1.6 upgrade guide.
• 9268348: Fixed the missing icon spacing in the “Alerts with icons” example on the alert docs page.
• 86ac4f1: Fixed the unreadable “5” badge in the avatar status docs example by adding text-gray-100.
• 6f96282: Fixed the “Card on a background pattern” docs example so the preview shows the .bg-pattern-diagonal background.

---

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.6.0

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