* Fix overflow of label in a floating-input
Temporary fix for the bug in twbs/bootstrap v5.3.3.
* Create dry-rice-march.md
---------
Co-authored-by: codecalm <codecalm@gmail.com>
* Add documentation for segmented control component
* Enhance documentation for segmented control component with additional examples and usage guidelines
* Create stale-pianos-crash.md
* Add changeset for @tabler/core minor update
* Update _nav.scss
### Issue: Dash (`-`) causing W3C validator error and CSS issues
**Problem**:
The use of a dash (`-`) in certain areas is triggering errors in the W3C validator and affecting the proper functioning of CSS.
1. **HTML Issue**: The dash might be incorrectly placed in attribute names or element IDs, causing validation errors.
- Example: `data-name` is fine, but ensure it's used correctly and within the valid context.
2. **CSS Issue**: If the dash is used improperly in class or ID names, it can cause selector issues in CSS.
- Example: `.my-class-name` is correct, but make sure that the class is correctly applied to the element and styled properly in CSS.
**Proposed Fix**:
- Ensure that any attribute or class names are formatted correctly. For example, `data-name` is valid, but check for any spelling mistakes or misplaced dashes.
- In CSS, ensure proper selector syntax like:
```css
.my-class-name {
/* Styles here */
}
* Fix margin calculation for nav links in _nav.scss
* Create red-pens-punch.md
---------
Co-authored-by: codecalm <codecalm@gmail.com>
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
* Add segmented control component and update related files
* Implement segmented navigation component and update related styles
* Create grumpy-flowers-act.md
* Refactor .gitignore and move playground pages to preview directory
* Enhance segmented navigation with hover state and class support
* Refactor segmented control layout for improved responsiveness and alignment
* Fix background-image of buttons with avatars
* Remove duplicated code blocks in buttons docs
+ Fix links to tabler.io/icons.
+ Replace Twitter with X on icon button.
* Create silly-lobsters-move.md
* Refactor dark mode SCSS variables to use color.adjust for improved color manipulation
* Refactor dark mode SCSS variables to remove unnecessary color space parameter for cleaner code
* Update sass dependency to version 1.78.0
* Create sour-dragons-eat.md
* marketing site init
* classname fix
* marketing images
* homepage components
* gradient bg
* Optimised images with calibre/image-actions
* generate utilities for marketing pages, negative utilities, new filters, browser component
* list separate fixes
* marketing pages components
* build fix
* new marketing pages elements
* add typd.js library to animate text
* about page, markdown page
* testimonials, new components, new marketing pages
* unity avatar sizes
* fix shape sizes
* avatars unify
* shape fixes
* real estate page
* Optimised images with calibre/image-actions
* fix small rebase error
* Fix mobile designs of features, faq and testimonials
* Add marketing pages to the extra's menu
* fix hero header design and include as app example design
* Fix buttons nog centering on hero
* Slightly increase bundlewatch size
---------
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Robert-Jan de Dreu <160743+rjd22@users.noreply.github.com>
* - add osx support in README.md
* - add settings.html page
* Make sure mobile view for settings works properly
Co-authored-by: nejcdev <nejc.cotic@kitio.com>
Co-authored-by: Robert-Jan de Dreu <160743+rjd22@users.noreply.github.com>
* Move optional dependencies to peerDependencies
* Add peerDependencies to dev dependencies
To make local builds and tests work properly it seems it's common to add optional
peerDependencies to the devDependencies to make sure they are installed for testing
* Fix missing comma breaking package.json validity
* Add documentation of installing peer dependencies
* Add tom select to build & peer dependencies
Alerts always looked a bit off with dark mode. This applies dark mode to
alerts making them look less out of place. This also fixes text that has no
style like text-muted applied to be visible.
Getting a warning
WARNING: You probably don't mean to use the color value white in interpolation here.
It may end up represented as white, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "white").
If you really want to use the color value here, use '"" + $color'.
<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/logo.svg" alt="A premium and open source dashboard template with a responsive and high-quality UI." width="300"></a><br><br>
<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/refs/heads/dev/preview/static/logo.svg" alt="A premium and open source dashboard template with a responsive and high-quality UI." width="300"></a><br><br>
A premium and open source dashboard template with a responsive and high-quality UI.
</p>
@@ -10,87 +9,85 @@ A premium and open source dashboard template with a responsive and high-quality
**If you want to support our project and help us grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm) or just [donate on PayPal](https://paypal.me/codecalm) :)**
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, 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! <a href="https://preview.tabler.io">Show me demo</a>
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](https://github.com/Shopify/liquid/wiki)) knowledge — as a reward, you'll be able to manage and visualise different types of data in the easiest possible way!
## 🔎 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! <a href="https://preview.tabler.io">Show me a demo</a>
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](https://github.com/Shopify/liquid/wiki)) 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+, latest Safari, Opera, Edge and mobile browsers. We work hard to to provide continuous support for them.
* **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](https://github.com/tabler/tabler-react) has React components for Tabler.
The documentation is available at https://tabler.io/docs/
## 🪴 Project Activity
### 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!](https://opencollective.com/tabler#sponsor)
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](https://nodejs.org/download/), which we use to manage our dependencies.
2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
4. [Install Bundler](https://bundler.io) with `gem install bundler` and finally run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
**Windows users**:
1. [Install Git](https://git-scm.com/download/win) 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](https://rubyinstaller.org/downloads/) - the recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
3. [Read guide](https://jekyllrb.com/docs/installation/windows/) 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
1. From the root `/tabler` directory, run `npm run start` in the command line.
2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
3. Any change in the `/src` directory will build the application and refresh the page.
**Note**:
Run `npm run build` for reforms a one off build application without refresh.
Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
To build a copy of Tabler locally, you have two options. You can either set up your device directly with the development tools required to build Tabler, or if you would prefer not to install all the development dependencies directly onto your device, you can use a Dockerfile that Tabler provides to build a docker image. Instructions follow below.
### First steps: Downloading the Tabler source files
With either method, the first thing you'll want to do is download a copy of the Tabler source files to your device.
#### From the Tabler GitHub releases page
If you don't want to edit the source code once you've downloaded it, and aren't interested in merging future project updates into your copy, you can just download the source files straight from the [Tabler releases on GitHub](https://github.com/tabler/tabler/releases) and extract the contents to a directory called `tabler`.
#### Cloning with Git
If you **do** wish to edit the source code after downloading it, for example to contribute changes back to the Tabler project, you'll want to do this by cloning it with Git:
1. If you don't have Git installed on your device, download and install it. You can find instructions at [https://git-scm.com/downloads](https://git-scm.com/downloads).
2. (Optional) **Windows users:** you could optionally install Git in the `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.
3. Clone the Tabler project into a folder on your device. Instructions can be found at [cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).
### Installing and running development tools directly
1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
2. [Install pnpm](https://pnpm.io/installation) (We recommend either by [Using Corepack](https://pnpm.io/installation#using-corepack) or by [Using npm](https://pnpm.io/installation#using-npm))
3. From the root `/tabler` directory where you downloaded the Tabler source files, run installation on the command line:
```sh
pnpm install
```
4. Then execute the following to start up the application stack:
```sh
pnpm run start
```
5. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
Any change in the `/src` directory will rebuild the application and refresh the page.
**Note**:
If you wish to perform a one-off build without auto-refresh on any changes, you can run:
```sh
pnpm run build
```
You can open [http://localhost:3001](http://localhost:3001) to configure the Web server.
### Installing and running development tools with Docker
**Plain Docker**
Here is an example of how to use this image:
1. From the root `/tabler` directory where you downloaded the Tabler source files, build the tabler image:
```sh
docker build -t tabler .
```
2. Run the tabler image. The following command mounts the `src` directory into the container, exposes port 3000 to browse the website locally, and exposes port 3001 to automatically sync changes:
```sh
docker run -p 3000:3000 -p 3001:3001 -v $(pwd)/src:/app/src tabler
```
3. Open your browser to [http://localhost:3000](http://localhost:3000). Edit anything in the `src/` folder and watch your browser refresh the page after it has been rebuilt.
**Docker Compose**
You can also use the docker compose config from this repo. From the root `/tabler` directory where you downloaded the Tabler source files, use `docker compose build && docker compose up` or `docker compose up --build` to build and start the container. Edit anything in the `src/` folder the same way as with plain docker and access the same URLs and ports in your browser.
## Bugs and feature requests
Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
## Creators
## 🤓 Creators
**Paweł Kuna**
- <https://twitter.com/codecalm>
- <https://x.com/codecalm>
- <https://github.com/codecalm>
- <https://codecalm.net>
**Bartłomiej Gawęda**
### Contributors
- <https://x.com/B_Gaweda>
- <https://github.com/BG-Software-BG>
## 👨🚀 Contributors
This project exists thanks to all the people who contribute.
seoTitle: Tabler Emails - How to use the compiled HTML email templates
description: Learn how to use the compiled HTML email templates from the Tabler Emails package.
summary: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
seoDescription: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
---
## Compiled version of the template
If you only want to change content (text or images) of the email template, you can just use the compiled HTML files - `compiled.html`. They are ready to use, and you need only a basic knowledge of HTML to modify them.
## How to modify the compiled HTML files
1. Open the `compiled.html` file in your favorite code editor.
2. Find the content you want to change inside the `<body>` element.
3. Modify the content as needed:
* Change the text, which is mostly placed inside the `<p>` or `<h1>` tags.
* Change the images by replacing the `src` attribute of the `<img>` tag.
* Change the links by replacing the `href` attribute of the `<a>` tag.
* Remove the HTML elements you don't need, but only if you're sure that they are not necessary for the email template to work correctly.
4. If you changed the images, make sure to replace them in the `assets/` folder.
5. Remove all the images you don't use from `assets/` to reduce the size of the email template.
## How to use the compiled HTML files
After changing the templates as needed, you can use them in your email campaigns.
The `compiled.html` file with the `assets/` folder should be sent to your email marketing tool, like Mailchimp, SendGrid, or any other.
description: Content of the Tabler Emails package.
summary: The Tabler Emails package contains files which can be used by everyone, even without great knowledge of HTML.
seoDescription: todo
---
## Folder structure
Once you unzip the downloaded file, you will see the following structure:
```
tabler-emails/
├── emails/
| ├── absence/
| | ├── assets/
| | ├── compiled.html
| | ├── compiled-dark.html
| | ├── source.html
| | ├── source-dark.html
| | ├── screenshot.jpg
| | ├── screenshot-dark.jpg
| | ├── screenshot-mobile.jpg
| | └── screenshot-mobile-dark.jpg
| ├── access-token/
| ├── account-deleted/
| ├── .../
| ├── welcome/
| └── whishlist/
├── images/
| ├── chart-donuts/
| ├── icons/
| ├── illustrations/
| └── overlays/
├── license.txt
└── readme.html
```
## Understanding the file structure in Tabler Emails
The **Tabler Emails** package is organized into a clear and efficient folder structure to streamline the use of its assets. Below is a breakdown of its key directories:
### 1. Email Templates: `emails/`
This folder contains <EmailsCount /> email subfolders, each with a specific template. Each email folder contains the following files:
* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/docs/emails/compiled-html) section.
* Source HTML files for light and dark themes. Find more information in the [Source HTML](/docs/emails/source-html) section.
* Screenshot images for desktop and mobile views.
* Assets folder with images used in the email template and the CSS file with styles.
### 2. Images: `images/`
It contains 4 subfolders with images used across the different email templates:
* `chart-donuts/`: Images of donut charts with different fills.
* `icons/`: [Tabler Icons](/icons) used in the email templates, in PNG version.
* `illustrations/`: PNG versions of [Tabler Illustrations](/illustrations) for light and dark themes.
* `overlays/`: Overlay images used in the email templates.
### 3. License: `license.txt`
This file contains the license information for the Tabler Emails package.
### 4. Readme: `readme.html`
This file with the main information about the Tabler Emails package. It contains a brief description of the package and instructions on how to use it.
seoTitle: Tabler Emails - How to use the source HTML email templates
description: Learn how to use the source HTML email templates from the Tabler Emails package.
summary: The source HTML files from the Tabler Emails package need a bit more work than the compiled ones. Learn how to use them.
seoDescription: The source HTML files from the Tabler Emails package need a bit more work than the compiled ones. Learn how to use them.
---
## Source version of the template
If you want to make more advanced changes to the email template, you can use the source HTML files - `source.html` combined with the `theme.css` file. They are ready to use, but you need a basic knowledge of HTML and CSS to modify them.
## How to modify the source HTML files
1. Open the `source.html` file in your favorite code editor.
2. Open the `theme.css` file from the `assets/`* directory in the same editor.
3. Change all the content and styles as needed.
4. Use a selected tool to inline the CSS styles into the HTML file. There are a lot of options, such as:
* Online tools like [Juice](https://automattic.github.io/juice/) or [Mailchimp CSS Inliner Tool](https://templates.mailchimp.com/resources/inline-css/).
* NPM tools like [juice](https://www.npmjs.com/package/juice) or [inline-css](https://www.npmjs.com/package/inline-css).
5. Save the output HTML file.
## How to use the source HTML files
To use the modified HTML template send the output file with the `assets/` folder to your email marketing tool.
summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
order: 2
description: Over 5000 pixel-perfect icons for web design and development
---
## Browse icons
Tabler Icons is a comprehensive icon library that features over <IconsCount rounded /> high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
To use Tabler Icons, you can visit their website at https://tabler-icons.io. From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.
summary: The libraries section offers various integrations of Tabler Icons for popular frameworks and technologies, making it easy to incorporate icons into any project.
description: Tabler Icons library for Preact framework.
summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects.
---

## Installation
<TabsPackage name="@tabler/icons-preact" />
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
## How to use
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
```js
import { IconArrowDown } from '@tabler/icons-preact';
description: Tabler Icons library for React framework.
summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics.
---

## Installation
<TabsPackage name="@tabler/icons-react" />
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
## How to use
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
```jsx
import { IconArrowLeft } from '@tabler/icons-react';
description: Tabler Icons library for SolidJS framework.
summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces.
---

## Installation
<TabsPackage name="@tabler/icons-solidjs" />
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
## How to use
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
```js
import { IconArrowRight } from '@tabler/icons-solidjs';
description: Tabler Icons library for Svelte framework.
summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs.
---

## Installation
<TabsPackage name="@tabler/icons-svelte" />
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
## How to use
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
description: Tabler Icons library for Vue framework.
summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces.
---

## Installation
<TabsPackage name="@tabler/icons-vue" />
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
## How to use
All icons are Vue components that contain SVG elements, so any icon can be imported and used as a component. It also helps to use treeshaking, so you only import the icons you use.
summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development.
---

## Installation
```
yarn add @tabler/icons-webfont
```
or
```
npm install @tabler/icons-webfont
```
or
```
pnpm install @tabler/icons-webfont
```
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow.
The Tabler Icons Figma plugin is an essential tool for designers looking to enhance their workflow. It provides seamless access to a comprehensive library of high-quality, customizable icons directly within Figma. Whether you're designing dashboards, websites, or mobile apps, this plugin allows you to quickly search, preview, and integrate Tabler Icons into your projects, saving time and ensuring a consistent, modern aesthetic.
## Usage
Using the plugin is simple: install it from the Figma community, launch it within your design file, and search for the desired icon by keyword. Once you’ve found the perfect icon, click to insert it into your design. You can easily customize the icon’s size, color, and stroke weight to fit your specific needs, making it a versatile addition to your design toolkit.
description: Download static file formats of icons.
summary: Static files provide multiple formats of Tabler Icons, including EPS, PDF, PNG, and SVG, offering flexibility for different design and development workflows.
description: Customizable illustrations for modern web and mobile designs.
summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
---
The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.
## Folder Structure
Once downloaded, unzip the compressed folder and you’ll see something like this:
```
tabler-illustrations/
├── eps/
| ├── dark/
| └── light/
├── figma/
├── pdf/
| ├── dark/
| └── light/
├── png/
| ├── dark/
| └── light/
├── png-background/
| ├── dark/
| └── light/
├── svg/
| ├── dark/
| └── light/
├── svg-css-autodark/
└── svg-css-variables/
├── dark/
└── light/
```
## Understanding the File Structure in Tabler Illustrations
The **Tabler Illustrations** package is organized into a clear and efficient folder structure to streamline the use of its high-quality assets. Below is a breakdown of its key directories:
### 1. Vector Files: `eps/`
This folder contains EPS files for scalable vector illustrations.
- `dark/`: Dark-themed illustrations.
- `light/`: Light-themed illustrations.
### 2. Design File: `figma/`
This folder contains a Figma file, perfect for designers who work directly in Figma.
### 3. Document Files: `pdf/`
This folder contains PDF files, ideal for print or presentation use.
- `dark/`: Dark-themed illustrations.
- `light/`: Light-themed illustrations.
### 4. Transparent Images: `png/`
This folder stores PNG files with transparent backgrounds at 1600×1200px resolution.
- `dark/`: Dark-themed illustrations.
- `light/`: Light-themed illustrations.
### 5. Background Images: `png-background/`
This folder contains PNG files with a dark background for enhanced contrast.
- `dark/`: Dark-themed illustrations.
- `light/`: Light-themed illustrations.
### 6. Scalable Vector Graphics: `svg/`
This folder includes SVG files for scalable and customizable vector graphics.
- `dark/`: Dark-themed illustrations.
- `light/`: Light-themed illustrations.
### 7. Adaptive Graphics: `svg-css-autodark/`
This folder contains SVG files prepared to automatically adjust their colors based on user settings, providing a dynamic and adaptive visual experience.
### 8. Themed Graphics: `svg-css-variables/`
This folder contains SVG files using CSS variables for flexible theming.
- `dark/`: Dark-themed illustrations.
- `light/`: Light-themed illustrations.
This structure ensures easy access to various formats and themes, making Tabler Illustrations a versatile tool for developers and designers alike.
description: Introduction to Tabler Illustrations and their key features.
summary: Tabler Illustrations is a collection of high-quality, customizable illustrations designed to enhance the visual appeal of your projects. These illustrations align seamlessly with the Tabler design system, making it easy to create engaging and cohesive designs for websites, apps, and presentations
By purchasing Tabler Illustrations, you are granted an ongoing, non-exclusive license by codecalm.net to use Tabler Illustrations.
The license grants permission to one individual (the Licensee) to access and use the Tabler Illustrations.
You **can**:
* Use the Tabler Illustrations to create unlimited End Products.
* Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
* Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
* Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
You **cannot**:
* Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product, neither in code nor as design assets.
* Share your access to the Tabler Illustrations with any other individuals. You need a Team License for that to be allowed.
* Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
* Use the Tabler Illustrations to produce anything that may be deemed by codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of codecalm.net
#### Example usage
Examples of usage **allowed** by the license:* Creating a personal website by yourself.
* Creating a website or web application for a client that will be owned by that client.
* Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
* Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
Examples of usage **not allowed** by the license:
* Creating a repository of your favorite Tabler Illustrations (or derivatives based on Tabler Illustrations) and publishing it publicly.
* Creating a UI library using Tabler Illustrations and making it available either for sale or for free.
* Converting a Tabler Illustrations to another framework and making it available either for sale or for free.
* Creating a Figma or Sketch file based on the Tabler Illustrations.
* Creating a "website builder" project where end users can build their own websites using illustrations included with or derived from Tabler Illustrations.
* Creating a theme, template, or project starter kit using the illustrations and making it available either for sale or for free.
* Creating a web application where the primary purpose is clearly not to simply re-distribute the illustrations (like a conference organization app that uses the illustrations for its UI for example) that is free and open source, where the source code is publicly available.
In simple terms, use Tabler Illustrations for anything you like as long as it doesn't compete with Tabler Illustrations.
### Team License
By purchasing Tabler Illustrations, you are granted an ongoing, non-exclusive license by codecalm.net to use Tabler Illustrations.
The license grants permission for up to 10 Employees and Contractors of the Licensee to access and use the Tabler Illustrations.
You **can**:
* Use the Tabler Illustrations to create unlimited End Products.
* Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
* Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
* Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
You **cannot**:
* Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product.
* Use the Tabler Illustrations to create End Products that are the property of any individual or entity other than the Licensee or Clients of the Licensee.
* Grant access to the Tabler Illustrations to individuals who are not an Employee or Contractor of the Licensee.
* Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
* Use the Tabler Illustrations to produce anything that may be deemed by codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of codecalm.net
#### Example usage
Examples of usage **allowed** by the license:
* Creating a website for your company.
* Creating a website or web application for a client that will be owned by that client.
* Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
* Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
Examples of use **not allowed** by the license:
* Creating a repository of your favorite Tabler Illustrations (or derivatives based on Tabler Illustrations) and publishing it publicly.
* Creating a UI library using Tabler Illustrations and making it available either for sale or for free.
* Converting a Tabler Illustrations to another framework and making it available either for sale or for free.
* Creating a "website builder" project where end users can build their own websites using illustrations included with or derived from Tabler Illustrations.
* Creating a theme or template using the illustrations and making it available either for sale or for free.
* Creating any End Product that is not the sole property of either your company or a client of your company. For example your employees/contractors can't use your company Tabler Illustrations license to build their own websites or side projects.
* Giving someone access to Tabler Illustrations when they purchase a product from you. For example, you can't use a Team License as a way to give someone access to Tabler Illustrations when they purchase an online course from you.
* Selling access to your team account to people who don't work for you company.
---
In case of differences between above license agreements and the license agreements provided with the product, the license agreement provided with the product shall prevail.
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.