Changelog

Explore the latest Tabler release notes, product updates, new features, improvements, and bug fixes across Tabler UI, Icons, and Illustrations.

admin panel
v1.6.0
Published

Tabler v1.6

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

Datepicker
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

Sparkline
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

Legend
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

Signal
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

Password strength
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

OTP input
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

Clipboard
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

Confetti
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! 🚀

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

icons
v3.48.0
Published

Tabler Icons v3.48.0

18 new icons:

  • outline/duplicate
  • outline/folder-ai
  • outline/folder-sparkle
  • outline/git-branch-check
  • outline/git-branch-x
  • outline/git-merge-queue
  • outline/git-pull-request-locked
  • outline/git-pull-request-unlisted
  • outline/message-2-ai
  • outline/message-2-sparkle
  • outline/message-ai
  • outline/message-sparkle
  • outline/model-ai
  • outline/pencil-ai
  • outline/stack-check
  • outline/stack-minus
  • outline/stack-plus
  • outline/stack-x
Browse 6220 icons
icons
v3.47.0
Published

Tabler Icons v3.47.0

18 new icons:

  • outline/airpods-l
  • outline/airpods-r
  • outline/cash-coin
  • outline/edit-bulk
  • outline/folder-stats
  • outline/folder-user
  • outline/gpu-2
  • outline/gpu
  • outline/map-pinned
  • outline/orbit-vertical
  • outline/orbit
  • outline/orbits
  • outline/reduce-motion
  • outline/reference-image
  • outline/secret-phrases
  • outline/sticker-smile
  • outline/voice-2
  • outline/voice

Fixed icon: outline/align-right-2

Fixes and improvements

  • Webfont: the stroke-to-outline pipeline now uses unstroke. Every glyph is a single unioned path, TTF files are ~36% smaller, and glyphs that lost their filled areas (e.g. the percentage-* family) render correctly. Native canvas is no longer built on install (#1602)
  • Webfont: align-right-2 rendered as blank because it was assigned the U+FEFF (BOM) codepoint – it now uses 1028e (#1583, thanks @Bartosz-Do)
  • All framework packages: removed the trailing space from the icon class attribute, which caused React hydration mismatches in server-rendered markup (#1582, thanks @giaBaoJS)
  • React: IconNode compiles again against @types/react 19 (removed ReactSVG type); added type and RSC guards (#1579)
  • SolidJS: the solid export condition now points to a .jsx source entry, fixing the react/jsx-runtime resolution error in Vite SSR (#1590, thanks @Tiancheng-Xu)

Maintenance

  • Test suites now run in CI; fixed stale snapshots across React, Vue, Preact and Svelte packages (#1579)
  • Preview site migrated from Eleventy to Astro (#1580)
  • Refreshed main README and package READMEs: fixed wrong props, broken links and outdated sections (#1588, #1589)
  • Sponsors image is loaded from GitHub instead of jsDelivr (#1581)
  • Dependency updates: svgo 4.1.0, astro 7.2.8, vitest 4.1.11, adm-zip 0.6.1, Angular 21.2.20
Browse 6220 icons
admin panel
v1.5.1
Published

Tabler v1.5.1

A patch release for Tabler 1.5. It fixes the issues that surfaced right after the 1.5 release: invisible shadows in dark mode, the form switch knob in light mode, the folded sidebar flashing a flyout on reload, and a handful of smaller problems in the demo and the docs.

Core changes

  • f311287: Fixed .card-code so the code block follows the card corners instead of drawing its own border-radius.
  • 718fdd7: Fixed invisible box-shadows in dark mode with a new global --tblr-shadow-color light-dark() token.
  • 6f64f33: Fixed the .dropdown-menu-arrow border color and replaced the deprecated clip with clip-path.
  • b8e61db: Fixed the folded sidebar flashing the active submenu as a flyout on reload before tabler.js closed it.
  • 692a3a2: Fixed the invisible .form-switch knob in light mode by restoring a gray $form-switch-color.
  • d4c5be6: Fixed unreadable counter digit on not-yet-reached steps by giving .step-item ::before the --tblr-disabled-color.

Demo changes

  • 4ddc9e9: Updated the avatar list and brand card descriptions on the avatars preview page.
  • ac001f8: Updated astro to 7.3.1 and @astrojs/vercel to 11.0.10, and stopped installing optional peers such as next.
  • 2f37632: Removed the playground and playground-* scratch pages from the preview build and the repository.
  • d9ed942: Fixed the unstyled message list on the email-inbox page: a hoverable list group with label dots, dates and row actions.
  • 9efa76a: Fixed the footer on preview.tabler.io to show the version link instead of the Generated build stamp.
  • b4b10f9: Fixed the preview icons page to render all icons in production builds, keeping the 20-icon limit only for the dev server.
  • 99b318c: Updated the preview card descriptions to name CSS classes and markup instead of Astro component props.

Docs changes

  • 8fc079d: Added the color palette, flags, payments and social icons tables to the docs .md mirrors via a new MarkdownSource component.
  • 57a29eb: Fixed the docs “On this page” list running past the viewport; the sticky rail now scrolls on its own.

Get Started with Tabler

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

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

admin panel
v1.5.0
Published

Tabler v1.5

Tabler v1.5

Tabler 1.5 is out. It’s the biggest release we’ve done, with more than 250 changes across the framework, the demo pages and the docs. The sidebar folds now. Cards can have gradients, backgrounds can have patterns, charts got seven new types, and the demo comes with two new dashboards. Bootstrap also moved into the Tabler source tree, and that’s where a lot of the smaller changes in this release come from.

Folded sidebar

Folded sidebar
Folded sidebar

The vertical sidebar can fold down to a narrow strip of icons with navbar-folded. With navbar-folded-hover it stays folded and opens when you hover over it. Submenus open as flyouts next to the icon, and there’s a pin toggle if you want to keep the sidebar open.

Two smaller things came with it. Section titles in the sidebar (nav-section-title) turn into short separators while it’s folded, so you don’t lose the grouping. And there’s a new navbar-footer zone for the user block at the bottom. The navigation scrolls between the pinned brand and the pinned footer.

The sidebar is also light and 16rem wide by default now.

Layout settings

Layout settings
Layout settings

The theme panel does more than light and dark now. It also switches the layout, through four attributes you can set on <html> yourself: data-bs-layout for the container width (default, fluid, boxed), data-bs-navbar-position for whether the page shows the vertical or the horizontal navigation, data-bs-navbar for a sticky top bar, and data-bs-navbar-theme for coloring the navigation dark or primary. The folded sidebar has its own data-bs-sidebar.

The panel itself was redesigned around them, with an illustrated intro, color scheme presets and thumbnail tiles for most settings. A Customize entry in the sidebar footer and in the navbar opens it.

Gradient cards

Gradient cards
Gradient cards

.card-gradient gives a card a gradient background. There are variants for each theme color, modifiers for the direction, and an animated version.

The gradient stops are plain utilities, so you can use them anywhere else too. .bg-gradient-from-*, -via-* and -to-* now also take transparent and -inverted.

There’s a new Card gradients page in the demo with all the combinations.

Background patterns

Background patterns
Background patterns

Backgrounds can have a pattern now. Dots, grids, stripes and a few more, through a set of .bg-pattern-* utilities.

You can also control how strong the pattern is. --tblr-pattern-opacity-factor scales the opacity globally, and .bg-pattern-opacity-* sets it per element.

New chart types

New chart types
New chart types

Seven chart types joined the demo and the docs: radar, polar area, treemap, timeline, box plot, bubble and funnel. There’s also a new Advanced charts page for the harder cases, with two y-axes, annotations, a zoom brush and synced chart groups.

Chart colors aren’t hardcoded per chart any more. There’s a --tblr-chart-1 through --tblr-chart-5 palette wired into the ApexCharts theme tokens, so charts generally follow the current color mode on their own. ApexCharts itself went from 3.54.1 to 7.0.0.

New dashboard pages

Two dashboards joined the demo. One is a CRM dashboard built from reusable cards, the other a crypto dashboard with a portfolio overview, market data and order history.

There’s also an onboarding page, a task list and a pay page, plus four new modals: change password, confirm delete, edit profile and new task.

Upgrading

Bootstrap 5.3.8 now lives in the Tabler source tree as Sass modules and TypeScript components, so Tabler doesn’t depend on the Bootstrap package any more. A few other things changed along the way:

  • The npm package ships TypeScript declarations, so import { Modal } from "@tabler/core" is typed.
  • The default color mode is auto and follows the system setting.
  • Tabler doesn’t bundle a web font any more. The default stack is the system one, so nothing gets downloaded.
  • Components accept data-tblr-* attributes next to data-bs-*.
  • The supported browsers are now Chrome 123, Firefox 128 and Safari 17.5, which is what the CSS actually needs.
  • The Turbo integration is gone, along with a number of unused Sass variables.

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

Core changes

  • 9ea657b: Added .text-gray-50 through .text-gray-950 utility classes alongside the existing .bg-gray-* utilities.
  • 100a37b: Added background pattern utilities and documentation, including updated preview demos.
  • 9d5c83f: Added Bootstrap 5.3.8 to the core source tree, with SCSS as modules and components converted to TypeScript.
  • e1ecd39: Updated the supported browser baseline to what the CSS needs: Chrome 123, Firefox 128, Safari 17.5.
  • 9c5d729: Added .btn-ghost button variant with transparent background and hover effects.
  • ec94693: Added .card-gradient component with gradient variants, direction modifiers, and animated backgrounds.
  • 324b0fb: Added --tblr-card-header-bg and --tblr-card-footer-bg variables so both backgrounds can be overridden independently.
  • 09d419a: Added a --tblr-chart-1 … --tblr-chart-5 palette and wired ApexCharts theme tokens, so every chart follows the color mode.
  • d2c1271: Added TypeScript declarations to the npm package, so import { Modal } from "@tabler/core" is typed.
  • 9d5c83f: Added support for data-tblr-* attributes alongside data-bs-* for dropdown and other components.
  • bf9e7ad: Added Driver.js to libs.json and dist/libs for product tours.
  • bf9e7ad: Added --tblr-dropdown-item-gap, --tblr-dropdown-item-icon-size and --tblr-dropdown-item-icon-color to .dropdown-menu.
  • 4f6e99b: Added a folded sidebar (navbar-folded, navbar-folded-hover) with flyout submenus, a pin toggle and a light 16rem sidebar by default.
  • 70f996b: Added the .font-sans-serif, .font-serif and .font-comic utilities next to .font-monospace.
  • d2c1271: Added .bg-gradient-{from,via,to}-transparent and -inverted gradient stops, which the gradient docs already described.
  • 5baf073: Added 74 new payment provider icons imported from tabler-payments and removed 12 outdated providers like dotpay and solo.
  • 5e119d4: Added bg-blur utility and increased container-tight width for layout flexibility.
  • 70f996b: Added the data-bs-layout, data-bs-navbar-position, data-bs-navbar and data-bs-navbar-theme layout settings.
  • 0c79963: Added media-print mixin and print styles to hide interactive components during printing.
  • 48dbd1e: Updated the core build system from Rollup to Vite, with identical UMD and ESM output.
  • 4ce08ca: Updated the navbar-side component and reorganized its apps, language, notifications and user sections.
  • 70f996b: Added .navbar-side support in the vertical navbar: a wrapper for a trailing .navbar-nav group pinned to the bottom of the menu.
  • f11ece4: Added --tblr-pattern-opacity-factor and .bg-pattern-opacity-* utilities for background patterns.
  • cad8eb8: Removed the $prefix Sass variable; the --tblr- prefix is now applied at build time by PostCSS.
  • 9c5d729: Added Progress Background component with text labels and value display.
  • 9c5d729: Added .progress-lg and .progress-xl size variants for the progress component.
  • 9c5d729: Added Progress Steps component for step-by-step navigation indicators.
  • bea97f8: Removed @hotwired/turbo integration, including .turbo-progress-bar styles and the Turbo loader preview demo.
  • 8962710: Removed unused SCSS !default variables, which now raise a Sass error when set via @use ... with (...).
  • 9820d11: Updated core SCSS to the Sass module system with @use and @forward.
  • 4f6e99b: Added nav-section-title group labels to the vertical sidebar, shown as short separators in the folded state.
  • 4f6e99b: Added a navbar-footer sidebar zone with a user block; the sidebar nav scrolls between the pinned brand and footer.
  • ff24af9: Updated the default $font-family-sans-serif and $font-family-monospace to the system font stacks. Tabler no longer bundles a web font, so no font files are downloaded.
  • 9dd26fd: Changed the default theme of tabler-theme.js to auto, following the system color scheme.
  • 7556ae2: Added an auto color mode to theme settings with system prefers-color-scheme support.
  • e3d86c5: Updated apexcharts from 3.54.1 to 7.0.0 and added --chart-{id}-color-{index} variables.
  • 1effe22: Fixed invisible keyboard focus indicators and added prefers-reduced-motion and forced-colors support.
  • 09d419a: Documented the ApexCharts dual license, which applies to the copy shipped in dist/libs, in the readme and chart docs.
  • 080d3aa: Fixed the ApexCharts tooltip arrow staying white on the dark tooltip by setting the --apx-tt-bg and --apx-tt-border tokens.
  • ffe3489: Updated .badges-list to .badge-list and .tags-list to .tag-list, keeping the old names as deprecated aliases.
  • 059bae1: Updated Bootstrap exports to a single source of truth in bootstrap.js and removed the duplicates from tabler.js.
  • 4f6e99b: Moved btn-floating to the end side of the screen, so it does not cover the sidebar.
  • 5018aa9: Fixed .btn-icon to be square by aligning min-width calculation with base .btn formula.
  • a508bb6: Updated hardcoded rem and px values to SCSS variables across core components for easier theming.
  • c71a321: Updated the @tabler/core README with package usage, optional stylesheets, Sass setup and browser support.
  • a0d84f6: Updated the npm package README with badges, quick links, CDN usage, documentation and changelog links.
  • c860288: Fixed icon alignment for .btn-sm and .btn-xl sizes.
  • 1adb710: Fixed .alert-action and .alert-link colors inside .alert-important so links stay readable.
  • 2dc7eda: Updated $border-color-translucent-dark to rgba(128, 150, 172, 0.2) for better dark mode visibility.
  • 09ab0bc: Fixed disabled buttons falling back to currentColor for the border and to a transparent background.
  • febfa9f: Fixed the missing focus ring on buttons and btn-check button groups by using the shared focus ring token.
  • 8324701: Fixed .card-header background being overridden by a background: transparent shorthand.
  • 0187b26: Fixed the card-status-* strips leaving a thin line over the card border and a mismatched corner radius.
  • 70ec683: Fixed card corner radius in tab layouts when tabs sit above or below tab content.
  • c1e1fdf: Fixed the corner radius and the double bottom border on the first and last rows of a table inside a .card.
  • de44d61: Fixed .card-tabs .nav-tabs sharing z-index with .dropdown-menu, which hid dropdowns behind card tabs.
  • 6414238: Fixed barely visible checkbox and radio borders in dark theme by using $input-border-color.
  • b1d49e9: Fixed CountUp to parse formatted number targets and avoid double-start when enableScrollSpy is enabled.
  • 09d419a: Fixed chart colors in dark mode: axis lines and ticks, marker and treemap outlines, and the tooltip title.
  • 070248d: Fixed dark mode link contrast: --tblr-link-color is now a lighter tint of --tblr-primary on dark surfaces.
  • 601e950: Fixed dark mode text selection contrast with a new $selection-bg Sass variable.
  • d0a793c: Fixed the disabled form control background in dark theme with a new --tblr-bg-forms-disabled variable.
  • b1d49e9: Fixed dropdown data-bs-boundary="viewport" to use document.documentElement instead of the first .btn element.
  • c527135: Fixed .input-icon inline-start padding for .form-select.
  • 70f069c: Fixed .form-select keeping its default box-shadow inside .input-group.
  • 9c78cf6: Fixed .bg-gradient conflicts that broke from/via/to rendering and updated the gradient docs.
  • bc24b3a: Fixed --tblr-gray-*-fg tokens to map directly to --tblr-gray-* instead of contrast-based fallbacks.
  • c8b8b24: Fixed gray theme custom properties output using SCSS interpolation and updated default $body-color to $gray-500.
  • 70193fe: Fixed .icon-pulse, .icon-tada and .icon-rotate not animating webfont icons.
  • f0b909d: Fixed the sm and lg size mismatch between form controls, buttons and input groups.
  • 6e656ad: Fixed .input-icon-addon z-index issue with form validation feedback and added default height.
  • b1d49e9: Fixed input mask lazy option to read data-mask-visible via dataset.maskVisible.
  • fc16b6a: Defined --tblr-body-text-align, --tblr-nav-link-font-size and --tblr-nav-link-active-color, which the css already read.
  • a883531: Fixed .list-group-item-{color}: the palette colors had no styling at all and no variant had its background.
  • 9dd26fd: Fixed the markdown table header keeping its surface background instead of going transparent.
  • 9d04e14: Fixed the marketing hero, browser and shape components reading custom properties nothing defined.
  • 9dd26fd: Fixed offcanvas-narrow, which had no effect on the width of the panel.
  • f5f75d4: Fixed print styles: hidden navbar/sidebar, forced light color-scheme, and avoided breaking .card/table rows.
  • 1da70a7: Fixed ScrollSpy throwing on target ids that start with a digit, such as headings like 1. Setup.
  • 464a522: Fixed oversized and mismatched validation icons on .form-select and Tom Select selects.
  • 8bc6fa7: Fixed status color classes to use CSS variables and to include the social colors.
  • c527135: Fixed .steps horizontal overflow on small screens by enabling scrollable overflow below the sm breakpoint.
  • cd0b210: Fixed the typographic .steps rule leaking its guideline and spacing onto the .steps component.
  • 90c42f2: Fixed Tom Select’s .ts-dropdown losing its z-index, background, and colors to the bootstrap5 preset CSS.
  • 6849337: Fixed Tom Select styles to use --tblr-* variables instead of undefined --bs-* references.
  • e206d7a: Fixed white space next to the scrollbar by using scrollbar-gutter: stable on html.
  • bf9e7ad: Updated .flag to size by width with $border-radius-xs on xs, and narrowed tooltip padding-x to spacer-2.
  • b8b63d7: Fixed Sass mixed-declaration warnings in the navbar, card, nav and table styles.
  • 9432835: Updated SCSS files to use the border-radius mixin.
  • 9c5d729: Updated stroke-width for .icon-sm from 1 to 1.5 for better visibility.
  • bf9e7ad: Updated .input-group-flat addons to drop the inner border and sit above the control.
  • fa678a7: Updated root color tokens to use CSS light-dark() so paired values live in one :root declaration.
  • 7ae422f: Updated core SCSS to logical properties and a --tblr-dir multiplier, so RTL works with plain tabler.css.
  • 301e778: Updated rgba() calls to the modern color-mix() and color-transparent() functions.
  • 9dd26fd: Fixed the avatar corner radius inside .form-imagecheck-image and set .nav font size to the body font size.
  • 4f6e99b: Fixed the navbar-toggler icon: the middle bar was flex-squeezed, breaking the open-state X and shortening the hamburger.
  • 9c5d729: Added smooth transitions for progress bar width and background-color changes.
  • 1489b13: Added .prose alias for markdown content and updated preview/docs references and redirects.
  • f35aab3: Added the same border and radius to figure images as plain images in .prose and .markdown content.
  • 66dc336: Fixed the caret() mixin by restoring $caret-width to 0.36em.
  • 70f996b: Fixed the sidebar marking two items as selected: a group holding the current page is now emphasized, not filled.
  • 70f996b: Fixed the vertical navbar brand sitting at the far edge on small screens when nothing follows it in the top bar.
  • 9c5d729: Updated skip-link to use visually-hidden for improved accessibility.
  • 346e091: Fixed oversized dist/libs by copying only the runtime files each library declares in libs.json.
  • d2c1271: Fixed tabler-theme.js replacing a server-rendered data-bs-theme when the visitor has no stored choice.
  • 736e604: Updated deprecated global Sass functions to module equivalents (map.merge, string.slice, math.percentage, etc.).
  • b8b63d7: Updated Bootstrap to v5.3.8.
  • 9c5d729: Updated trending component to use arrow-up/arrow-down instead of trending-up/trending-down.
  • 70ec683: Updated $card-status-size default from $border-width-wide to 3px.
  • 666ccd6: Updated shadow tokens (--tblr-shadow-*) to use the new xs–2xl and overlay values.

Demo changes

  • 09d419a: Added a charts-advanced page and docs for two y-axes, chart annotations, a zoom brush and synced chart groups.
  • 5e119d4: Added Pay page with dedicated layout, navigation link, and card/PayPal payment form.
  • d8956a0: Updated the preview and docs packages to build with Astro instead of Eleventy.
  • ec94693: Added new card-gradients page showcasing various gradient card styles and components.
  • b0fa655: Added Change Password modal with a strength indicator, confirm validation and show/hide toggles.
  • ad22d04: Added a color palette to the signature pad component for selecting the pen color.
  • b0fa655: Added Confirm Delete modal with a warning icon and a checkbox that enables the delete button.
  • 62178f8: Added new dashboard-crm page with reusable CRM cards.
  • 4ce08ca: Added new Crypto Dashboard page with cryptocurrency portfolio overview, market data, and order history.
  • 118ca4b: Updated the demo pages to show their title and description in the page header, with pageHeader falling back to title.
  • b0fa655: Added Edit Profile modal with avatar upload, personal information fields, social links, and date of birth.
  • 8d8727f: Added language selector dropdown to navbar with flag indicators for multilingual support.
  • 70f996b: Added layout options to the theme settings panel and removed the dead demo script and the layout-combo page.
  • 4ce08ca: Updated the page-menu structure for dashboards and reorganized the navigation menu.
  • 09d419a: Added radar, polar area, treemap, timeline, box plot, bubble and funnel chart types to the charts preview and docs.
  • b0fa655: Added New Task modal with fields for task name, description, assigned user, priority, due date, and category tags.
  • 9c5d729: Added new onboarding page with progress indicator and navigation layout.
  • 118ca4b: Removed the actions preset prop from DefaultLayout; pages now fill a page-header-actions slot instead.
  • cc298a6: Added a PageTitle component and used it with CardSubtitle in place of raw .page-title and .card-subtitle markup.
  • 5363668: Added the missing Prose demo page, linked from the menu but not previously built.
  • 83ec6f8: Added Tour demo page using Driver.js for product tours and onboarding guides.
  • d7cbe87: Added color and vertical props to the Steps component and used it on the steps preview page.
  • 09d419a: Added a straight line chart demo and set stroke-curve to straight on the line and area demos, so the spline ones differ.
  • 99b9ea4: Added a Task List page with tasks grouped by status and a modal for adding new tasks.
  • 1effe22: Fixed keyboard access by turning JavaScript-only <a href="#"> controls into real <button> elements.
  • 1effe22: Added missing ARIA roles and states to Pagination, NavSegmented, Accordion, Steps, tabs, Modal, Offcanvas and CarouselCard.
  • 1effe22: Added aria-label to the Datepicker navigation buttons and made the Dropzone upload area keyboard-operable.
  • 1effe22: Added <fieldset> and <legend> around radio and checkbox groups so screen readers announce the group purpose.
  • 1effe22: Fixed form accessibility with matching for/id labels, aria-invalid, aria-describedby and autocomplete tokens.
  • 1effe22: Fixed the skip link to appear on focus and added missing <main> and labelled <nav> landmarks.
  • 1effe22: Added a label prop to Flag, Payment, StatusDot, Trending and Avatar status badges for screen readers.
  • 0fd35c3: Updated the active-users-2 card chart to use chart-id="active-users-2" with height="11" for a more compact layout.
  • 1adb710: Added action and link examples to the important alerts in the alerts preview and docs pages.
  • 8704725: Fixed root-absolute Button hrefs in demos, so error-page links work in the downloadable package.
  • da11f08: Added a short description and a docs link to each card on the Buttons demo page, grouped into Styles and Colors.
  • 118ca4b: Fixed heading order by making CardTitle and CardHeader render h2, so cards no longer skip a level under the page h1.
  • 632b69f: Updated the changelog page to redirect to tabler.io/changelog instead of rendering CHANGELOG.md.
  • 09d419a: Removed dead chart options (groups, spline, fill, debug, remove-padding, show-labels) from charts.json.
  • 4ce08ca: Added crypto-markets.json and crypto-orders.json data files for the crypto dashboard.
  • 70f996b: Unified the Customize entry: the navbar and the sidebar use the same .navbar-side button with the brush icon.
  • b3e873a: Fixed the value key in selects.json not preselecting options in the demo selects on the modals and form elements pages.
  • 8704725: Updated preview and docs examples to the unified demo component props: variant, color, size, ariaLabel.
  • 0f8dcb0: Updated preview and docs to use the shared date-format, string-format and pseudo-random helpers.
  • 09d419a: Fixed the combination chart demo so it mixes columns and lines instead of drawing plain bars.
  • 3cca8bf: Fixed task cards not showing their due date and removed dead props and classes such as fluidSearch and text-*-lt-fg.
  • 3f1ad9d: Fixed the navbar not highlighting the active page for nested, RTL and settings pages.
  • f2004da: Fixed payment icons on the all-elements page by rendering separate light and dark variants.
  • 9dd26fd: Removed the non-existent mt class from the placeholder card.
  • 1da70a7: Fixed the marketing footer layout, timeline social icons, missing alt and aria-label attributes and invalid nesting in demos.
  • f2004da: Fixed the ribbon example background on the all-elements page to use var(--tblr-bg-surface-secondary).
  • 1adb710: Fixed the sign-in cover page in dark mode by replacing bg-white with bg-surface.
  • c7e895b: Updated the footer to show the version link everywhere and the Generated timestamp only on preview builds.
  • ac87b76: Updated preview templates to replace deprecated font-weight-* classes with Bootstrap-compatible fw-* utility classes.
  • 8704725: Fixed icon-only demo buttons rendering a generic aria-label="Button" instead of a real label.
  • 25f466b: Updated the icon count on the icons pages to read from icons-info.json, so it follows the installed version.
  • 8f86f1f: Restored the import-icons and import-illustrations scripts.
  • 5363668: Made Interface demo pages consistent with the Buttons page: card subtitles, one docs link, responsive grids.
  • 8704725: Updated the marketing CTA Learn more button to the .btn-ghost style.
  • 70f996b: Removed aria-current="page" from menu groups, so only the link to the current page carries it.
  • 7cadbb8: Updated New badges in menu.json to mark only pages added since 1.4, and dropped them from older pages.
  • 8947d7c: Updated the activity feed messages in activity.json and the activity preview page.
  • 863884e: Added DocsLink to the header of 20 more demo pages, including Cards, Charts, Tables and Typography.
  • b90554b: Moved the import:icons and import:illustrations scripts to the repository root, next to import:payments.
  • f35aab3: Added a Tabler Payments docs section with @tabler/payments-* package pages for React, Vue, Preact and Astro.
  • 38df58d: Added the 500 illustration to the preview 500 error page.
  • d2c1271: Removed classes that no stylesheet defines from demo markup and added the onboarding and settings plan pages to the menu.
  • 118ca4b: Added a meta description tag, filled from the page description prop.
  • 7305d84: Fixed Vercel deployment to serve error-404.html as the custom 404 page.
  • 43eee38: Added Progress Step component documentation and cleaned up the progress steps preview markup for cleaner rendered output.
  • 09d419a: Replaced the placeholder chart data on the charts page and in the chart docs with realistic series, and titled every demo card.
  • da11f08: Replaced lorem ipsum with unique placeholder text on the Scroll spy demo page and fixed its menu highlight.
  • 70f996b: Added a Customize entry to the sidebar footer that opens the theme settings panel.
  • 70f996b: The sidebar now always renders the user block, so the vertical layout keeps the profile menu on every page.
  • 552cf1f: Removed the <lastmod> element from sitemap.xml, which carried the build time instead of a content date.
  • da11f08: Reorganized the Star Ratings demo page into Basic/Icons/Sizes and Colors cards with short descriptions.
  • 70f996b: Redesigned the theme settings panel with an illustrated intro, color scheme presets and thumbnail tiles for most settings.
  • bd35fd3: Fixed responsive layouts on the Form Elements page.
  • 53f5244: Updated the Illustration and Empty components to accept only the bundled illustration names, checked at build time.
  • ee4c88f: Updated @tabler/icons to v3.46.0.
  • 369322a: Updated Tabler Illustrations to v1.17.0 with 25 new illustrations.
  • c707018: Added an All Elements page showing every UI component and Bootstrap element.

Docs changes

  • 4a97921: Added Accordion documentation page with usage variants and Bootstrap collapse behavior examples.
  • f5f75d4: Added a Printing docs page covering d-print-* utilities and the media-print mixin.
  • 3277fa0: Added Astro icons library documentation page for the new @tabler/icons-astro package.
  • 73f7c2a: Added Accept: text/markdown content negotiation for docs pages, with q-value parsing and 406 responses.
  • 9dd26fd: Added an Accessibility section to every UI documentation page.
  • d2c1271: Added a Background blur page, gray utilities on the colors page and a language selector section on the navbars page.
  • 135f38d: Added Info, Tip, Warning, Danger and Note callouts, usable in any MDX page, with a reference page under Resources.
  • 9dd26fd: Added installation and usage sections to the chart and countup pages, covering the .chart-* size classes and sparklines.
  • 9dd26fd: Added a class reference table to every component page, from the new classnames front matter.
  • 6e6084a: Added docs pages for the Datepicker and Tom Select form plugins, form-datepicker and form-select-tomselect.
  • 9dd26fd: Updated the docs layout: elevated article panel, rounded sidebar navigation, “On this page” rail and restyled prev/next links.
  • 9dd26fd: Listed every component class in llms.txt, from the classnames front matter.
  • 73f7c2a: Added a llms-full.txt page with all docs in one file, Content-Signal in robots.txt and markdown Link alternate headers.
  • 9dd26fd: Added a source link and a copy-as-markdown button, and moved the class reference to the end of the page.
  • 9dd26fd: Added classnames to the social icons and flags pages.
  • 9dd26fd: Rewrote the autosize, range slider, WYSIWYG and dropzone plugin pages with installation, usage and accessibility sections.
  • 9dd26fd: Expanded the social icons, payments, vector map, inline player, PDF, EPS, illustrations preview and references pages.
  • 9dd26fd: Documented avatar-square, mention, offcanvas-narrow, btn-floating, card-cover, td-truncate and other variants.
  • 416ca63: Added framework integration guides for Laravel, React, Next.js, Vue, Angular, Nuxt, Symfony, Django, Rails, SvelteKit, and Astro.
  • 1adeb68: Added a Docs for LLMs page explaining llms.txt and the .md page mirrors, with a sidebar link.
  • 9dd26fd: Removed the EPS icons page, since @tabler/icons-eps is no longer maintained.
  • fb3d7dc: Added an RTL support docs page covering the dir="rtl" attribute, the published *.rtl.css builds, how rtlcss generates them, and which utility classes are direction-aware.
  • bd4e381: Added Star Rating documentation page with static and interactive rating examples based on existing classes.
  • 8af57f9: Added Tag documentation page with examples for icon, media, badge, checkbox, and list usage.
  • 7b64726: Added a Theme base colors page documenting the five data-bs-theme-base gray palettes in tabler-themes.css.
  • f4c514a: Added an Upgrade to 1.5 page with the breaking changes, renamed classes and Sass updates from 1.4.
  • 2a06640: Added added-in badges to Card gradient, Progress steps and new getting-started guides; fixed background patterns’ version.
  • 46da1f7: Updated background patterns documentation with missing pattern variants, transparent utility usage, and size coverage.
  • 1ec82d0: Updated the contributing guide, README and Docker setup for the Astro-based development toolchain.
  • 38df58d: Added the not-found illustration and a search button to the docs 404 page.
  • 9dd26fd: Documented card status, progress, actions, subtitle, surfaces, scrollable body, tables, links and overlays.
  • 9dd26fd: Fixed highlighted code blocks using hardcoded colors instead of the Tabler surface tokens.
  • 9dd26fd: Fixed the copy button in docs examples to be a button with an accessible name.
  • 684f40e: Updated the documentation to explain font sizing and system color CSS variables.
  • 9dd26fd: Fixed docs example code blocks gluing inline elements like <label> and <input> onto one line.
  • 9dd26fd: Added a dark background option to the docs <Example> component.
  • 9dd26fd: Updated docs examples to use the <Icon /> component and consistent Prettier formatting.
  • d2c1271: Fixed duplicate ids and missing targets in the modal, offcanvas, page headers and page layouts examples.
  • 9dd26fd: Fixed keyboard access in docs examples for carousel controls, disabled links, btn-loading and progress bars.
  • 9dd26fd: Fixed install snippets pointing at urls that do not resolve on the vector map, inline player and icon pages.
  • 9dd26fd: Fixed docs examples using classes that do not exist, such as alert-facebook, btn-close-white, bg-gray, btn-xs, alert-title and hr-text-center.
  • 9dd26fd: Added tooltips and accessible names to the footer icon links.
  • 9dd26fd: Stacked form docs examples in a column and tightened the sidebar nested menu indent.
  • 9dd26fd: Moved the form pages backed by a third-party library into the Plugins section.
  • 9dd26fd: Renamed form docs pages without the form- prefix and flattened the Illustrations and Emails sections.
  • a0d84f6: Updated the How to Contribute guide with starter issues, Codespaces setup, commands and PR conventions.
  • f35aab3: Added Introduction pages with quick starts and cover images to the Icons, Illustrations, Emails and Payments docs sections.
  • 1ec82d0: Fixed documentation formatting issues: heading hierarchy, missing image alt texts and broken list structure across docs pages.
  • 9dd26fd: Split the getting started menu group into Getting started and Resources.
  • 9dd26fd: Updated the docs navbar to use container-lg.
  • 4afc2ea: Updated the prose on 75 docs pages to plain English, shortened the page summaries and merged duplicate sections on the button and card pages.
  • 9dd26fd: Moved components that need a third-party library into the Plugins section.
  • 9dd26fd: Moved the Website, Preview and Support links from the docs sidebar to the top navbar.
  • 9dd26fd: Restyled the related and prev/next cards, and moved prev/next below the article panel.
  • 9dd26fd: Restored the docs.scss source for the docs styles, compiled with Sass instead of a checked-in docs.css.
  • 9dd26fd: Fixed the search modal using the Algolia palette instead of Tabler colors, including an unreadable selected result.
  • 9dd26fd: Darkened the docs sidebar links, kept rows to one line and added a visible focus ring.
  • c430cfe: Updated UI component docs to singular file names and frontmatter, with redirects from plural routes.
  • 826a073: Added sitemap.xml and robots.txt endpoints for the docs site and fixed docs layout title rendering outside production.
  • 2f8f495: Fixed the docs header not staying sticky, and the table of contents sliding under it.
  • 9dd26fd: Documented sortable headers, selectable rows, stacked mobile tables, and outline, dot and icon-only badges.
  • 9dd26fd: Rewrote the timeline and datagrid pages with markup, variants and accessibility notes.
  • 9dd26fd: Fixed plugin demos showing their stock styles, because library CSS loaded after tabler-vendors.css.
  • ee4c88f: Updated @docsearch/js and @docsearch/css to v5 and kept the docs search on the keyword-only entry point.
  • 1adeb68: Fixed html comments in docs code examples running into the closing tag of the element before them.
  • 09d419a: Fixed the small chart example on the chart docs page, which shared an element id with the line chart example and stayed empty.
  • c547329: Fixed the Plugins card on the docs homepage linking to a 404 /plugins route instead of /ui/plugins.
  • 1da70a7: Fixed the docs logo link name, dead example links in the navbar and offcanvas pages, and the vector map error on its plugin page.
  • ee4c88f: Fixed docs pages with callouts falling back to their MDX source in llms.txt instead of the rendered examples.
  • c71a321: Fixed the Sass import in the framework guides to use @use instead of the deprecated @import.
  • 70f996b: Documented the layout theme settings on the color modes and page layouts pages.
  • 1adeb68: Fixed the .md docs mirrors showing component tags like <Icon /> instead of the rendered html.
  • 08cad98: Updated the Progress Bar documentation with new variants and full-width stacked previews.
  • 4d04c10: Removed the unused bootstrapLink front matter field from DocsLayout, DocsMdxLayout, and all docs pages.

Get Started with Tabler

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

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

emails banner imageemails banner image dark
NEW VERSION!
80 eye-catching, customizable email templates