tabler / tabler

Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap

A premium and open source dashboard template with a responsive and high-quality UI.

🔎 Preview

Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern and user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful! Show me a demo

🚀 Features

We've created this admin panel for everyone who wants to create templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel that can be used by both simple websites and sophisticated systems. The only requirement is basic HTML and CSS (and some Liquid) knowledge — as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!

• Responsive: With the support for mobile, tablet and desktop displays, it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
• Cross Browser: Our theme works perfectly with the latest Chrome, Firefox+, Safari, Opera, Edge and mobile browsers. We work hard to provide continuous support for them.
• HTML5 & CSS3: We use only modern web technologies, such as HTML5 and CSS3. Our theme includes some subtle CSS3 animations, which will help you attract attention.
• Clean Code: We followed Bootstrap’s guidelines carefully to make your integration as easy as possible. All code is handwritten and W3C valid.
• Demo pages: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
• Single Page Application versions: Tabler React has React components for Tabler.

📖 Documentation

Documentation is available as a part of Tabler preview: https://tabler.io/docs/

To run the documentation site locally, follow instructions in the Documentation README.

🪴 Project Activity

💕 Sponsor Tabler

Sponsors

Support this project by becoming a sponsor. Your logo will show up in this README with a link to your website. Become a sponsor!

📦 Setup environment

To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:

1. Install Node.js, which we use to manage our dependencies.
2. Navigate to the root /tabler directory and run pnpm install to install our local dependencies listed in package.json.
3. Install Ruby - the recommended version is 2.7.6.
4. Install Bundler with gem install bundler and finally run bundle install. It will install all Ruby dependencies, such as Jekyll and plugins.

OSX users:

1. NPM pnpm install
2. install Ruby (2.5.* recommended) brew install ruby @2.5
3. install bundler gem install bundler
4. install bundle install

• if bundler get any errors try

sudo rm -rf /Library/Developer/CommandLineTools
sudo xcode-select --install

5. Run NPM npm run start

Windows users:

1. Install Git in C:\Program Files\git\bin directory and run npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe" to change the default shell.
2. Install Ruby+Devkit - the recommended version is 2.7.6.
3. Read guide to get Jekyll up and running without problems.

Once you complete the setup, you'll be able to run the various commands provided from the command line.

Build locally

You need to have pnpm and bundler installed.

1. From the root /tabler directory, run installation in the command line:

• pnpm install
• bundler install

2. Then execute pnpm run start-plugins to start up the application stack.
3. Open http://localhost:3000 in your browser, and voilà.
4. Any change in the /src directory will build the application and refresh the page.

Note: Run pnpm run build for reforms a one off build application without refresh. Open http://localhost:3001 to configure the Web server.

Installation

Tabler is distributed via npm.

npm install --save @tabler/core

Running with Docker

If you don't want to install node/npm/ruby and the dependencies on your local environment, you can use the provided Dockerfile to build a docker image. This Dockerfile is provided as an example to spin-up a container running Tabler.

Example of how to use this image:

1. Build the tabler image : docker build -t tabler .
2. Run the tabler image while mounting the src directory as well as the _config.yml file into the container.

Don't forget to expose the port 3000 so you can browse the website locally. You can also expose the port 3001 to have access to BrowserSync

docker run -p 3000:3000 -p 3001:3001 -v $(pwd)/src:/app/src -v $(pwd)/_config.yml:/app/_config.yml tabler

Now open your browser to http://localhost:3000. Edit anything in the src/ folder and watch your browser refresh the page after it has been rebuilt.

CDN support

All files included in @tabler/core npm package are available over a CDN.

Javascript

<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>

Styles

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css">

Feature requests

https://tabler.canny.io/feature-requests

Bugs and feature requests

Found a bug or have a feature request? Please open a new issue.

🤓 Creators

Paweł Kuna

• https://twitter.com/codecalm
• https://github.com/codecalm
• https://codecalm.net

👨‍🚀 Contributors

This project exists thanks to all the people who contribute.

🌸 Backers

Thank you to all our backers! 🙏 Become a backer

License

See the LICENSE file.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

tabler's Issues

eventmachine issue while "npm run serve"

`F:\tabler>jekyll -v
jekyll 3.7.3

F:\tabler>npm run serve

[email protected] serve F:\tabler
gulp build && npm-run-all --parallel gulp-watch jekyll-serve

[14:46:30] Using gulpfile F:\tabler\gulpfile.js
[14:46:30] Starting 'styles'...
[14:46:30] Starting 'styles-plugins'...
[14:46:31] Finished 'styles-plugins' after 378 ms
[14:46:31] Finished 'styles' after 902 ms
[14:46:31] Starting 'build'...
[14:46:31] Finished 'build' after 80 μs

[email protected] gulp-watch F:\tabler
gulp watch

[email protected] jekyll-serve F:\tabler
jekyll serve --livereload

[14:46:33] Using gulpfile F:\tabler\gulpfile.js
[14:46:33] Starting 'styles'...
[14:46:33] Starting 'styles-plugins'...
[14:46:34] Finished 'styles-plugins' after 518 ms
[14:46:34] Finished 'styles' after 1.11 s
[14:46:34] Starting 'watch'...
[14:46:35] Finished 'watch' after 359 ms
Configuration file: F:/tabler/_config.yml
Source: src
Destination: F:/tabler/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 3.565 seconds.
Please add the following to your Gemfile to avoid polling for changes:
gem 'wdm', '>= 0.1.0' if Gem.win_platform?
Auto-regeneration: enabled for 'src'
Unable to load the EventMachine C extension; To use the pure-ruby reactor, require 'em/pure_ruby'
Traceback (most recent call last):
22: from d:/Ruby25-x64/bin/jekyll:23:in <main>' 21: from d:/Ruby25-x64/bin/jekyll:23:in load'
20: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/jekyll-3.7.3/exe/jekyll:15:in <top (required)>' 19: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/mercenary-0.3.6/lib/mercenary.rb:19:in program'
18: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/mercenary-0.3.6/lib/mercenary/program.rb:42:in go' 17: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in execute'
16: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in each' 15: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in block in execute'
14: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/jekyll-3.7.3/lib/jekyll/commands/serve.rb:75:in block (2 levels) in init_with_program' 13: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/jekyll-3.7.3/lib/jekyll/commands/serve.rb:93:in start'
12: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/jekyll-3.7.3/lib/jekyll/commands/serve.rb:93:in each' 11: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/jekyll-3.7.3/lib/jekyll/commands/serve.rb:93:in block in start'
10: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/jekyll-3.7.3/lib/jekyll/commands/serve.rb:101:in process' 9: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/jekyll-3.7.3/lib/jekyll/commands/serve.rb:147:in register_reload_hooks'
8: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/jekyll-3.7.3/lib/jekyll/commands/serve.rb:147:in require_relative' 7: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/jekyll-3.7.3/lib/jekyll/commands/serve/live_reload_reactor.rb:4:in <top (required)>'
6: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/jekyll-3.7.3/lib/jekyll/commands/serve/live_reload_reactor.rb:4:in require' 5: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/em-websocket-0.5.1/lib/em-websocket.rb:3:in <top (required)>'
4: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/em-websocket-0.5.1/lib/em-websocket.rb:3:in require' 3: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/eventmachine-1.2.5-x64-mingw32/lib/eventmachine.rb:8:in <top (required)>'
2: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/eventmachine-1.2.5-x64-mingw32/lib/eventmachine.rb:8:in require' 1: from D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/eventmachine-1.2.5-x64-mingw32/lib/rubyeventmachine.rb:2:in <top (required)>'
D:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/eventmachine-1.2.5-x64-mingw32/lib/rubyeventmachine.rb:2:in require': cannot load such file -- 2.5/rubyeventmachine (LoadError) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] jekyll-serve: jekyll serve --livereload`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] jekyll-serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! D:\nodejs\node_cache_logs\2018-04-10T06_46_39_226Z-debug.log
ERROR: "jekyll-serve" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve: gulp build && npm-run-all --parallel gulp-watch jekyll-serve
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! D:\nodejs\node_cache_logs\2018-04-10T06_46_39_474Z-debug.log`

How we should distribute new versions of tabler?

Hi community!
For few days we repaired many fixes and added a lot of new code.

Many questions were born after this week:

1. People want .scss, .css and .js files inside npm and composer packages.
2. People want one package, instead using require.js.
3. How often we should distribute new versions?
4. How we can add tabler to services like https://cdnjs.com, https://www.bootstrapcdn.com etc?

My dream is publish packages with structure like:

css
|- tabler.css
|- tabler.min.css
|- tabler.rtl.css
|- tabler.rtl.min.css
|- etc.
scss
|- scss files
assets
|- important assets
js
|- tabler.js
|- tabler.min.js
|- tabler.slim.js (only most important modules, without plugins, etc)

I don't have much knowledge about that, but I would like to have it done well. Every help is appreciated! @beeman

.card break-word can make numeric figures look odd

Opened up dev tools to look at the demo and immediately noticed the Today Profit box wraps oddly ($652 becomes $65\n2)

[Feature request] Left and right sidebar

First, I must thank you all team members and contributors for the great work!

Here I have a feature request, there are many management systems, using left sidebar as navigation and right sidebar for some information show or navigation for the page, and they can be collapse, I think this is good for maximize space utilization of the page, especially for complex system.

Here are some samples.

https://gitlab.com/gitlab-org/gitlab-ce/issues/45337

https://bootstrap-themes.github.io/dashboard/icon-nav/index.html

Microsoft Developer Dashboard

I don't know whether it fits Tabler's design.

Remove scroll from login and similar pages

Hi @codecalm just reviewed the css.
found two body tag in dashboard.css.
But anyways for now, can you please change
overflow-y:scroll
to
overflow:auto
in dashboard.css body tag line number 9518.

Thanks and regards
Sushant Kumar

Jekyll dependency

Hey,

the Jekyll dependency makes this project very hard to actually use in a real project.

Are there any plans to make this CSS and HTML available as a standalone version?

How to integrate into Ruby on Rails Asset Pipeline

Can you give any direction on how to integrate Tabler with the Rails Asset Pipeline? Tabler is using requirejs which i ran into some issues with the asset pipeline in rails.

What js file are absolutely required? I think anyone integrating tabler with any web framework will have the same question actually.

Inline radios & Checkboxes not clickable/working

Win/Chrome

https://tabler.github.io/tabler/form-elements.html

Trying to click Option 2 or Option 3 and it doesn't work.

Edit: Clicking the checkboxes does not work either.

SVG Donut, Pie Charts and Line Charts without javascript dependency

Hi @codecalm 👋

For rendering the satisfaction donut chart and all other charts a 3rd party js library is needed.
SVG Donut and also Pie Charts or Line charts could be easily rendered without javascript.

🍩 https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72
📈 https://codepen.io/team/css-tricks/pen/Zbervy
📊 https://css-tricks.com/how-to-make-charts-with-svg/

What do you think? 🌻

401 demo page

Hi,
New issue to notify that the 401 demo page is linked to https://tabler.github.io/tabler/104.html and shows the 404 page.

Floating point bug on Store page

The floating point is not getting rendered correctly: https://tabler.github.io/tabler/store.html

Consider declaring the variables inside _variables.scss with !default

This allows the developer to create a custom variables file to tweak some of the basic properties.

Example: $font-family-base: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default;

The custom file would be included before the bundle.scss file.

If there is a better / different way of doing it, let me know
Cheers

Undocumented components which deviate from Bootstrap

In the demo there are fundamental classes like .page, .page-main and .header-nav which seems crucial for tabler but are not mentioned anywhere in the documentation. Is there a reason or has it just not been done yet?

Since tabler is based on bootstrap, i was under the impression that anything not specifically documented just works with default bootstrap classes.

angular version

Hi,
since this is a very nice UI dashboard, I want to know do you have any plan for greate frameworks like angular (version > 2), react and etc?

[Request] Publish as ruby gem

It would be great to have it as a gem to easily add it to any Rails app. I think it would help adoption a lot.

There are more than two genders

Only two binary genders are presented as options:

Here is the relevant code:

tabler/src/_includes/cards/form-all-elements.html

Lines 175 to 184 in 568950f

	<div class="selectgroup selectgroup-pills">
	<label class="selectgroup-item">
	<input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
	<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-male"></i></span>
	</label>
	<label class="selectgroup-item">
	<input type="radio" name="icon-input" value="2" class="selectgroup-input">
	<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-female"></i></span>
	</label>
	</div>

Allowing a third option along with a input would be more inclusive:

Note: I used the fe fe-more-horizontal icon

This tends to be represented in data as:

{
  gender: 'male' | 'female' | 'unspecified',
  genderTitle: string | null,
}

Which can be presented as:

let genderStr = user.genderTitle || user.gender

If you are using pronouns in your content, a good way to handle it is:

const PRONOUNS = {
  male: 'he',
  female: 'she',
  unspecified: 'they',
};

let pronoun = PRONOUNS[user.gender];

By making this change, you set a good example for the community

Docs link to 401 page demo links to 104 page instead

https://tabler.github.io/tabler/104.html should be https://tabler.github.io/tabler/401.html

Feature needed: Sidebar

Hi @codecalm , Can you add a sidebar on this template

Sidebar menu overlaps main nav dropdown on email page

Laravel Version

Hi,

does anybody has a working Laravel Version with Laravel Mix?

Thanks!

Hover tooltips hide in edges of charts

The tooltip which appears when you hover over a chart hides when it hits the edges of the chart.

I went through the code and figured out it was due the parent div having overflow: hidden which came from the .c3 class.

I checked with the C3 Library and it doesn't have this line of code.

tabler/src/assets/plugins/charts-c3/scss/_c3.scss

Lines 2 to 4 in e7f8726

	.c3 {
	overflow: hidden;
	}

Would submit a PR but I'm sure that line was added for a specific purpose.

Support composer

#46

Add RTL Support

Publish SCSS file to npm

Hi @codecalm - Great work on Tabler! I really love the look and feel!

I was wondering if you could publish the SCSS on NPM. That will make it easy to integrate with projects that are using SCSS, while allowing those projects to override certain things.

Thanks for considering!

Unable to view site remote?

Followed all steps, all the way to npm run serve and when entering the server IP address and port i get my connection refused by the server.

Profile page avatar-md issue

Hello, when I was browsing through your demo website today. On the profile-page I found this crunched-looking avatar.

I tried to look for the problem. But need to invest more time to get the right solution. What I have found right now is, .media-class is applying/affecting some class properties to the .avatar and .avatar-md.

Overflow at map demo page on mobile

On note 8 screen size, this container's content seems to be overflowing

Any plans to integrate with React/Vue?

I am really impressed with UI's beauty. Awesome! 👍

Do you have any plans to integrate this with SPA libraries, such as, React, Vue, etc?

npm repository

could you please create one npm repository for this project itself? this way we can reach last version easier

Template not work in IE 11

How can I fix that ..? Thank you :)

P.S.
This templete are awesome!

Button's style different from Bootstrap 4 one.

I'm new to Tabler and Bootstrap. Maybe I'm writing nonsense.

In Bootstrap 4 site (http://getbootstrap.com/docs/4.1/components/buttons/) I have this button's style:

Why in the Tabler site (https://tabler.github.io/tabler/docs/buttons.html) I have another button's style?

What I think is changing is the font, right?

Why this change? The Bootstrap 4 font-family is amazing... doesn't it?

Fields disappear

To and Subject fields disappear after clicking body text area.
Page : https://tabler.github.io/tabler/email.html

List of deprecated tools

Just forked and installed it and saw the following issues.
Any road map for an update?
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].

Profile message icon

Great work Paweł!

On the profile page https://tabler.github.io/tabler/profile.html there is a missing icon next to message input. There is element with classes si si-camera. Probably it should be fa fa-camera or fe fe-camera. Maybe better will be use here a fe fe-plus or something similar.

Top menu when on responsive

Hi - this looks great. Evaluating right now.

The top menu, when in small width mode, disappears and there is no alternative way of accessing the same functionality / menu links.

Any thoughts on making the top menu have a thin width alternative?

Thanks. Alex

Readme is confusing

The readme file could definitely use some rewording in order to make it easier to understand and be more correct. I could do it if you would like.

JS error: Actions dropdown in Invoices table on demo doesn't work

Screenshot - https://cl.ly/202Q1S3Q0z0V

Pricing cards are not responsive

The pricing cards are not breaking on smaller screen sizes.

run tabler on other interface then localhost

I cant find a way to make tabler listen on 0.0.0.0
Is this possible? If not, I would like to see it implemented

Horizontal scrollbar in mobile view

Hi,

While testing the demo on my mobile phone (iPhone 7+ with the latest iOS - used safari browser) I see a horizontal scrollbar.

Can I integrate tabler into bootstrap-vue?

Tabler is a nice bootstrap style. I would like to use a tabler in my recent projects, but I find that the tabler cannot be well compatible with bootstrap-vue. I would like to know when I can use the bootstrap-vue-tabler. Thank you

Inherit color when using buttons for card-options

Hello,

When using buttons for card-options, can I suggest using the inherited color for the buttons? Since currently if I was to use a btn-primary class on my button the color is overwritten here;

https://github.com/tabler/tabler/blob/dev/src/assets/scss/dashboard/_cards.scss#L242

Meaning my primary button which should have white text, currently has grey.

Thanks!

Add basic backend functionality

Loving this, is there any plans to add backend functionality?

If not I'd love to to this for a school project.

Failed at the [email protected] serve script.

Got message. This is probably not a problem with npm. There is likely additional logging output above.

Header navbar dropdown not right-aligned to parent

Even though you're using dropdown-menu-right it's not right-aligning:

It's more apparent when you remove the user's name and make some inner text longer:

The reason is BS4 has .dropdown-menu-right nested and only works within the .navbar-nav class:

.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    &#{$infix} {
      @include media-breakpoint-up($next) {
          .dropdown-menu-right {
            right: 0;
            left: auto; // Reset the default from `.dropdown-menu`
          }

However, adding it in breaks the flow:

Solution could be something like adding:

.nav {
  .dropdown-menu-right {
    right: 0;
    left: auto;
  }
}

But that does not fix the inner text going beyond dropdown width:

Solution to that would be removing this line:

https://github.com/tabler/tabler/blob/master/src/assets/scss/dashboard/_dropdown.scss#L8

or adding:

.nav {
    .dropdown-menu-right {
        right: 0;
        left: auto;
    }

    .dropdown-item {
        white-space: normal;
    }
}

Colour input on form page bleeds into middle column

On this page
https://tabler.github.io/tabler/form-elements.html when in slightly thin screen layout, the colour input bleeds into the middle column

[Mac chrome]

Thanks! Alex

Mobile notifications

Thank you for this great theme!
I would be really happy of you could also provide mobile notifications (currently hidden in mobile and visible next to the profile avatar in the top menu). I imagine something like facebook layout: full width container. The same like the hamburger menu dropdown container, just for notifications 💚

See in action: https://touch.facebook.com/?soft=notifications

Add datepicker, timepicker, datetimepicker, datatables

All the above libraries are must and basic requirements for an admin template.
Thanks for contributing such a beautiful template, I loved it :)

[Request] Please, add Tabs component

Hi...
Can you guys add a Tab Component to the template?
Tnks in advance!

Documentation

Hi,

it would be awesome if you could write a documentation how to install this template.

Thanks