Tabler v1.5 is here, and it's our biggest release yet
Tabler 1.5 is out. It's the biggest release we've done, with more than 250 changes across the framework, the demo and the docs. The sidebar can fold, cards can have gradients, backgrounds can have patterns, there are seven new chart types and the demo has two new dashboards.
Since Tabler 1.0, every release has added new pieces. 1.5 goes further than that and changes how you build with Tabler.
The navigation can fold out of the way. Layout, color scheme and sidebar behavior are all in one Customize panel. Charts, cards and backgrounds can do a lot more. And Bootstrap 5.3.8 now ships inside @tabler/core, so the framework is one package instead of two.
The full changelog lists every commit. This post goes through the main changes.
Folded sidebar
Dashboards often need a wide canvas more than they need a wide menu. So the vertical sidebar can now collapse to a narrow strip of icons with navbar-folded.
If you add navbar-folded-hover, it stays folded until you move the mouse over it. Submenus open as flyouts next to the icon. And there’s a pin toggle for when you want the full labels back.
There are two details that help the folded state feel finished instead of cramped. First, section titles (nav-section-title) turn into short separators, so the groups don’t disappear. Second, there’s a new navbar-footer for the user block. The menu scrolls between the brand pinned at the top and the footer pinned at the bottom.
The sidebar is also light and 16rem wide by default now.
Layout settings, not just light and dark
The theme panel used to switch between color schemes. Now it switches the layout too. It does that through a few attributes, which you can also set on <html> yourself:
data-bs-layoutsets the container width:default,fluidorboxed.data-bs-navbar-positionswitches between vertical and horizontal navigation.data-bs-navbarmakes the top bar sticky.data-bs-navbar-themecolors the navigationdarkorprimary.data-bs-sidebarcontrols how the folded sidebar behaves.
The panel itself was rebuilt around these options. It has an illustrated intro, color scheme presets and thumbnail tiles for most settings. You can open it from the Customize entry in the sidebar footer or in the navbar. That way every demo page can try a different layout without needing its own layout page.
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 if you want the gradient to move.
The gradient stops are plain utilities, so you can use them outside cards as well. .bg-gradient-from-*, -via-* and -to-* now also accept transparent and -inverted. The demo has a new Card gradients page with all the combinations.
A few related things came in the same batch. There’s .btn-ghost, a transparent button that fills in on hover. There’s Progress Steps for step-by-step flows, bigger .progress-lg and .progress-xl sizes, and bg-blur for a frosted-glass surface.
Background patterns
Empty surfaces can stay empty, or they can get a pattern. Dots, grids, stripes and a few others ship as .bg-pattern-* utilities.
You can adjust the opacity in two places. --tblr-pattern-opacity-factor scales it for the whole page, and .bg-pattern-opacity-* sets it for a single element. For example, you could put a light grid behind a dashboard and a denser texture on a hero section, without any extra image files.
Seven new chart types
Radar, polar area, treemap, timeline, box plot, bubble and funnel charts are now in the charts preview and in the docs. There’s also an Advanced charts page for the trickier cases, like two y-axes, annotations, a zoom brush and synced chart groups.
Chart colors aren’t hardcoded per chart anymore. There’s a --tblr-chart-1 to --tblr-chart-5 palette, and it’s connected to the ApexCharts theme tokens. So charts follow the current color mode on their own. ApexCharts itself went from 3.54.1 to 7.0.0.
New dashboards and pages
There are two new dashboards in the demo. One is a CRM dashboard built from reusable cards. The other is a crypto dashboard with a portfolio overview, market data and order history.
Around them there’s an onboarding page, a task list, a pay page and four new modals: change password, confirm delete, edit profile and new task. There’s also a Tour page that uses Driver.js, a language selector in the navbar, and an All Elements page that puts every UI piece on one screen.
A sturdier core
A lot of the smaller changes in 1.5 come from moving Bootstrap into Tabler. Bootstrap 5.3.8 now lives in the source tree as Sass modules and TypeScript components, so @tabler/core doesn’t depend on the Bootstrap package anymore.
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, so it follows the system setting. - Tabler doesn’t bundle a web font anymore. The default is the system font stack, so there’s nothing extra to download.
- Components accept
data-tblr-*attributes next todata-bs-*. - The build moved from Rollup to Vite, with the same UMD and ESM output.
- RTL works with plain
tabler.css, thanks to logical properties. - 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, and so are the unused Sass variables.
The preview and docs sites are now built with Astro instead of Eleventy. The docs also got framework guides for Laravel, React, Next.js, Vue, Angular, Nuxt, Symfony, Django, Rails, SvelteKit and Astro. Every UI page has an accessibility section now. And there are llms.txt and Markdown versions of the docs, for people (and tools) that want them as plain text.
Upgrading from 1.4
1.5 has breaking changes. Some class names changed, for example .badges-list and .tags-list are now .badge-list and .tag-list. The old names still work as deprecated aliases. Sass now uses the module system (@use and @forward), and the $prefix variable is gone. Fonts, the default theme and the Bootstrap dependency changed too.
The Upgrade to 1.5 guide lists every breaking change, with a before and after example for each one. If you want to see everything that changed, the changelog has the full list of commits.
You can install it with:
npm install @tabler/core@latest
Get started with Tabler v1.5
If you want to try it, open the preview, read the upgrade guide or download the package.
We’d love to see what you build with it.