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

- Published: September 8, 2026
- Author: Bartłomiej Gawęda
- URL: https://tabler.io/blog/tabler-1.5

Since [Tabler 1.0](https://tabler.io/blog/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](https://tabler.io/changelog) lists every commit. This post goes through the main changes.

![Folded sidebar](https://tabler.io/img/blog/tabler-1.5.0-folded-sidebar.png)

## 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](https://tabler.io/img/blog/tabler-1.5.0-layout-settings.png)

## 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-layout` sets the container width: `default`, `fluid` or `boxed`.
- `data-bs-navbar-position` switches between vertical and horizontal navigation.
- `data-bs-navbar` makes the top bar sticky.
- `data-bs-navbar-theme` colors the navigation `dark` or `primary`.
- `data-bs-sidebar` controls 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](https://tabler.io/img/blog/tabler-1.5.0-gradient-cards.png)

## 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](https://tabler.io/img/blog/tabler-1.5.0-background-patterns.png)

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

![New chart types](https://tabler.io/img/blog/tabler-1.5.0-charts.png)

## 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 to `data-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](https://docs.tabler.io/ui/getting-started/upgrade/) guide lists every breaking change, with a before and after example for each one. If you want to see everything that changed, the [changelog](https://tabler.io/changelog) has the full list of commits.

You can install it with:

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

- [View documentation](https://docs.tabler.io)
- [View preview](https://preview.tabler.io)
- [Upgrade to 1.5](https://docs.tabler.io/ui/getting-started/upgrade/)
- [Get the Tabler Pro](https://r.tabler.io/buy-ui)
- [GitHub release](https://github.com/tabler/tabler/releases/tag/@tabler/core@1.5.0)

We'd love to see what you build with it.
