Releases · tabler/tabler

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.

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

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

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

.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

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

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

Enhance button and hover animations

Improved button and hover animations for a more interactive experience. Icons inside buttons now support smooth animations on hover, adding subtle motion that enhances visual feedback and usability without overwhelming the interface.

Update Bootstrap to v5.3.7

Updated Bootstrap to version 5.3.7, bringing the latest security patches, performance improvements, and compatibility with modern browser standards.

What's Changed

9951fe9: Enhance button and hover animations
a200d30: Improve breadcrumb styles
49ab9ea: Add new Tabler Illustrations
6c4dd36: Update class names from *-left, *-right to *-start, *-end
6fec73a: Fix relative line heights in buttons
db6200a: Remove license_key option from HugeRTE init object
e96f055: Add different favicon to development environment
6c38a48: Update Bootstrap to v5.3.7
2a12f72: Update CSS calculations to use calc()
666a296: Fix list group item hoverable only with .list-group-hoverable class
cfd4cb6: Fix .pagination-link hover styles to non-active items

What's Changed

a1af801: Add FullCalendar integration
b9d434d: Add new charts to dashboard pages
79bd867: Add new form layout page
cac5d92: Update illustrations to v1.7
f94b153: Add SRI hashes to scripts and styles
c127d65: Fix colour picker preview page not displaying correctly
b6e9b18: Update icons to v3.31.0
8850f61: Enhance pagination component with new styles
9910dd0: Add "text features" menu item
638f36c: Refactor SCSS variable names for shadows
0d501e9: Correct aria-label of app menu link
3a02ef9: Fix some marketing site rows overflowing on mobile
fd0fd47: Improve card footer layout and enhance entry display format in invoices
74e5d26: Fix color badge in navbar menu
72a1d67: Add clipboard functionality to Tabler documentation
bb617b8: Fix colour swatches on small screens
d73d78e: Add missing tw entry in flags.json
19a3d20: Delete missing demo RTL style
b5e2f54: Enhance dropdown components for better accessibility
a41c956: Remove unnecessary !important from body padding
e675389: Fix missing border-radius to .card-header-tabs
9007e73: Fix FAQ accordion structure

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!

We’ve been hard at work making Tabler more powerful, more customizable, and just plain better to use. In this update, we’re focusing on features that boost your productivity and polish your UI—without adding complexity. From a guided theme setup to slick gradient utilities and a smarter navbar, here’s what’s new:

Theme Settings Wizard

Easily personalize your app’s appearance with our new Theme Settings Wizard. Whether you're adjusting colors, toggling dark mode, or picking layouts, this guided setup makes customizing your UI faster and more intuitive than ever—no code required.

Gradient Background Utilities

Bring your UI to life with new gradient background utilities. These ready-to-use classes let you quickly add vibrant gradient effects to your components, giving your design that extra bit of visual flair.

New Apps Card with Brand Icons in Navbar

We’ve added a modern apps card to the navbar, complete with brand icons for a polished, professional look. It’s a great way to offer users quick access to third-party tools or internal features—all neatly organized and easy to reach.

Alongside the main features, this release includes several technical upgrades and visual refinements. We’ve replaced TinyMCE with HugeRTE to ensure license compliance while keeping the editor experience powerful. The framework now runs on Bootstrap 5.3.5, offering greater performance and stability. We’ve also added light color variants for steps, perfect for subtler UI designs, and integrated the Turbo library for snappier navigation and a smoother user experience.

What's Changed

c59bc9d: Add gradient background utilities
f9e4da2: Add new apps card with brand icons in navbar
92a3afe: Replaced TinyMCE with HugeRTE to address license violation
199f39a: Update Bootstrap to version 5.3.5
9bbcb99: Add theme settings wizard
b17b488: Add steps light colors
215eaa4: Add Turbo library integration
aea3b0a: Rollback accordion component structure
3fc7b84: Add space between page numbers in pagination
2f8a372: Add Bootstrap components to Tabler JS
9fceadd: Fix tooltip colors in vector maps
44250db: Update avatar size variable to support list size configuration
be1f3d1: Fix broken shape in South Korea flag
c20d076: Refactor border-radius in components to use CSS variables
042e50f: Update disabled color variables in navbars
473fa38: Apply border radius to tom-select on focus
8646192: Add avatars page with various demos of avatars
922bb03: Minor spelling and grammar improvements to emails docs
44250db: Update avatar size variable to support list size configuration
ddcd3a7: Refactor SCSS for alerts and close button styles
e3d68d6: Fix autosize and input mask plugins to use window scope
4846828: Fix scrollbar color mixin to use body color variable
6b6617a: Improve README
94bea00: Make scrollbar track transparent
e14e492: Fix scrollbar jumps when content is higher than screen
6d6d1bd: Add responsive font size for form controls on mobile devices
6c566cf: Add new advanced table example

@carlosmintfan

We’ve been working hard to bring you a new version packed with exciting new features and improvements. This update introduces new components — Signature Pad, text mentions and Segmented Control, giving you even more flexibility to build intuitive and user-friendly interfaces. We’ve also made several UI enhancements to improve the overall experience. Thank you for your support and all your valuable suggestions — they help us keep moving forward!

Segmented control

Segmented Control is a new component that allows users to quickly switch between predefined options within a compact, button-like interface. It’s perfect for selecting between views, filters, or settings, offering a clear visual representation of the current choice. Designed to fit seamlessly into modern interfaces, Segmented Control combines clarity and ease of use.

Signature Pad

Signature Pad is a new component that allows users to easily sign directly within the application. It supports both mobile and desktop devices, offering smooth drawing and the ability to clear and re-sign if needed. Perfect for forms, contracts, and confirmations.

Mentions in text blocks

Text Mentions is a new simple components designed to visually highlight mentions within static text content. It allows you to display mentions, such as usernames, tags, or references, with custom styling to make them stand out. This component is perfect for rendering already-processed content, like comments, posts, or messages, where mentions need to be visually distinguished.

What's Changed

a2640e2: Add Playwright configuration and visual regression tests
d3ae77c: Enable scrollSpy in countup module
bd3d959: Refactor SCSS files to replace divide function with calc
cb278c7: Add Segmented Control component
b47725d: Add new text features page with mentions: user, color and app.
b4b4d1a: Add Scroll Spy page
9cd5327: Update border radius variables for consistency across components
4376968: Add Signature Pad feature and signatures page
f95f250: Update color utility classes and replace background colors in pricing table
eaa7f81: Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.
ea14462: Add documentation for segmented control component
1edaff4: Add new payment provider (Troy)
edbaa1e: Add selectable table functionality with active background color
378fba8: Refactor badge styles, remove Bootstrap styles
f3c409f: Refactor alert component styles and markup, remove Bootstrap styles
c240b5a: Refactor accordion component styles and markup, remove Bootstrap styles

New Contributors

@carlosmintfan made their first contribution in #2076
@FahadAlsulaiman made their first contribution in #2133
@lucaSabato made their first contribution in #2156
@oksuzgil made their first contribution in #2146

Full Changelog: v1.0.0...v1.1.0

We did it! After 24 pre-releases and over a few years of work, Tabler 1.0 is now available. Packed with new components, significant updates, and enhancements, this release brings you closer to building stunning web applications effortlessly. You can try it out now on your project using:

npm i @tabler/core@latest

🌟 New Components and Pages

Tag Component: Introducing a versatile tag component for labeling and categorization needs.
Star Ratings: Fully customizable star rating system powered by the star-rating.js library.
Color Picker: A sleek, intuitive color picker using the coloris.js library.
Chat Component (chat.html): A modern chat interface, ready to integrate into your applications.
Alerts Page (alerts.html): A dedicated page showcasing a variety of alert styles and examples.
Flags Page (flags.html): A comprehensive list of flag assets for global audiences.
Payment Providers Page (payment-providers.html): Support for 40+ new payment providers, including Apple Pay, Google Pay, Binance USD, and many more.

🎨 Design Enhancements

Updated Primary Color: Revamped to align with the latest Tabler branding.
Dark Mode Improvements: Unified dark mode elements with the latest Bootstrap API for better consistency and usability.
Bootstrap Compatibility: Updated CSS class text-muted to text-secondary for seamless integration.
Improved Mobile UX: Adjusted form element sizes for enhanced compatibility on mobile devices.

🚀 Feature Updates

Tabler Icons Update: Upgraded to v2.23 and v3.29.0, adding a total of 18 new icons.
Tabler Illustrations Update: Upgraded to v1.5, introducing enhanced visuals for modern applications.
Dependencies Update: Refreshed dependencies for better performance and security.
Docker Compose Support: Simplified local development with a new Docker Compose configuration.

🛠️ Fixes and Improvements

Brand Update: Rebranded Twitter to X for consistency with the latest naming conventions.
Documentation Enhancements: Added clarity and detail to existing docs, including alerts, icons, and illustrations.
Bug Fixes:
- Resolved color inconsistencies in dark mode components.
- Fixed navbar text and dropdown menu issues in dark mode.
- Improved layout of search results on smaller screens.
Performance Upgrades:
- Removed unused dependencies for a leaner build.
- Refactored SCSS variables to utilize color.adjust for better color manipulation.

🔧 Developer Tools

Visual Studio Code Config: Pre-configured settings for a seamless development experience.
Changelog Automation: Automatically retrieve and display changelogs directly from CHANGELOG.md.
Node.js Upgrade: Minimum required Node.js version updated to 20.
Switch to pnpm: Faster and more efficient package installations.
Replaced Jekyll with Eleventy: We’ve transitioned from Jekyll to Eleventy, a modern, streamlined static site generator for faster builds and more flexible customization.

⚙️ Minor Tweaks

Improved horizontal rule alignment.
Enhanced base font-family loading for faster rendering.
Added support for border-opacity variable for better color utilities.

This version is a major step forward in usability, performance, and design. The migration to Eleventy opens the door to faster builds and better flexibility, ensuring Tabler remains a cutting-edge tool for developers.

We can't wait to see what you build with Tabler v1.0.0! 🚀

Check out the full changelog and updates on our official documentation.

Update page-layouts.mdx to correct installation guideline link and enhance layout code snippets (06036f9)
Update CHANGELOG.md for version 1.0.0-beta23 with documentation improvements and various bug fixes (093aff1)
Enhance documentation (#2048) (b0b07b9)
Update illustrations and enhance SVG handling in HTML (#2051) (5cca710)
Marketing pages plugin (#1332) (844d66f)
Enhance countup documentation with additional examples and explanations (ef3b0b5)

Documentation improvements (#2042) (c510fdf)
Merge branch 'dev' of https://github.com/tabler/tabler into dev (35da0ff)
Add countup functionality and update documentation example (ebca62f)
Do not display empty (#2045) (df46ee7)
Set font-size of webfont icon inside a button (#2046) (bc1d1a3)
Order menu items alphabetically (#2047) (041f4e4)
Mark value of $font-family-monospace !default (#2044) (2f622c9)
Fix unpkg links to static-files icons (5625adc)
Fix description of alerts with a description (#2039) (e91884e)
Fix layout of search results for small and medium screens (#2037) (5dc45aa)
Remove invalid z-index setting for dropdown (#2036) (17327dc)
Fix ids of custom size star ratings (#2038) (3a4f10f)
Remove text-decoration on hovering a element with child having an icon class (#2041) (4ae0358)
Fix link to webfont icons (#2040) (54c5ad0)
Update color reference links in UI component documentation to point to the correct base colors section (95c1130)
Fix typo in browser support documentation summary (3f65120)
Enhance Figma plugin documentation with detailed usage instructions and improved descriptions (aef54b8)
Add documentation for Tabler Illustrations and update index to include link (d4a317b)
Enhance documentation with descriptions and summaries for various UI and icon sections (c02b6d1)
Add new documentation files for icons and UI components; restructure existing files (96cc4ce)
Update documentation structure and content for icons and UI components (630552d)
Remove outdated menu.json and add index.mdx files for UI documentation structure (a99f2b4)
Docs update (#2034) (17ebdf4)
Increase contrast of active dropdown-item in vertical layout (#2033) (4a9e40d)
Remove duplicated setting of color in th (#2032) (87bf2f5)
Increase z-index of ts-dropdown (#2031) (82cf257)
Add social icons plugin (#2035) (9015472)
Describe variables for datagrid in docs (3a04567)
docs fixes (3d18600)
docs fixes (bded6a4)
remove unused cofig from code (9be6ea2)
docs update (7ebb863)
Merge branch 'dev' of https://github.com/tabler/tabler into dev (e6f2f23)
docs update (ce3e016)
Fix links to Tabler Icons (76708e0)
dark iamge (7b056f9)
update screenshot (1ef711a)
icon fix (7d45f50)
update docs (3e25c49)
url fix (0377c80)

Fix @charset CSS declaration in bundle. (#2028) (c293a66)
Update docs structure (0ac8e33)
Fix cells with inline icons (#2022) (507df7b)
Update Tabler Emails to v2.0 (#2025) (867c8dd)
Update Tabler Icons to v3.26.0 (#2024) (34d124d)
Fix padding in code blocks (#2023) (f45b697)
Make horizontal rule direction aware (#2021) (7ba7717)
New payment providers (#2019) (5488c50)
Base font family improvements (#2020) (faee63c)
Fix colors in date range datepicker (#2018) (c51ff28)
Replace .page-center with .my-auto in single page layouts (#2009) (f6e885b)
Fix icon display issues in the Star Ratings component (#2007) (88eb413)
Read changelog from CHANGELOG.md file (#2004) (20cad01)
Update node to version 20 (#2005) (f83e36c)
Fix the z-index value of the nav-tab inside card-tab #1933 (#1953) (65c1300)
Fix wrong CDN url in webfont.mdx (2b916dd)
Fix ensure border color works in dark mode (#1995) (4e66e54)
Fix #1909 - Wrong gray colors (#1957) (06584bd)
Init VS Code config (#1959) (34f3efc)
Update download.mdx (#1914) (8d984e5)

Uh oh!

Releases: tabler/tabler

Release list

Tabler v1.5.1

Core changes

Demo changes

Docs changes

Uh oh!

Tabler v1.5.0

Folded sidebar

Layout settings

Gradient cards

Background patterns

New chart types

New dashboard pages

Upgrading

Core changes

Uh oh!

Tabler v1.4.0

Enhance button and hover animations

Update Bootstrap to v5.3.7

What's Changed

Uh oh!

Tabler v1.3.0

What's Changed

Get Started with Tabler

Uh oh!

Tabler v1.2.0

Theme Settings Wizard

Gradient Background Utilities

New Apps Card with Brand Icons in Navbar

What's Changed

Uh oh!

Tabler v1.1

Segmented control

Signature Pad

Mentions in text blocks

What's Changed

New Contributors

Contributors

Uh oh!

Tabler v1.0.0 ❤️🚀

🌟 New Components and Pages

🎨 Design Enhancements

🚀 Feature Updates

🛠️ Fixes and Improvements

🔧 Developer Tools

⚙️ Minor Tweaks

Uh oh!

Release 1.0.0-beta24

Uh oh!

Release 1.0.0-beta23

Uh oh!

Release 1.0.0-beta22

Uh oh!