From c71a32170112251025758bb389feda6fdbc9ee34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Thu, 3 Sep 2026 01:35:02 +0200 Subject: [PATCH] Rewrite the README files and switch the framework guides to `@use` (#2946) --- .changeset/core-readme-package-guide.md | 5 + .changeset/framework-guides-sass-use.md | 5 + CONTRIBUTING.md | 17 ++ README.md | 286 +++++++++--------- core/README.md | 153 ++++++---- .../ui/getting-started/frameworks/angular.mdx | 2 +- .../ui/getting-started/frameworks/astro.mdx | 2 +- .../ui/getting-started/frameworks/django.mdx | 2 +- .../ui/getting-started/frameworks/laravel.mdx | 2 +- .../ui/getting-started/frameworks/nextjs.mdx | 2 +- .../ui/getting-started/frameworks/nuxt.mdx | 2 +- .../ui/getting-started/frameworks/rails.mdx | 2 +- .../ui/getting-started/frameworks/react.mdx | 2 +- .../getting-started/frameworks/sveltekit.mdx | 2 +- .../ui/getting-started/frameworks/symfony.mdx | 2 +- .../ui/getting-started/frameworks/vue.mdx | 2 +- 16 files changed, 281 insertions(+), 207 deletions(-) create mode 100644 .changeset/core-readme-package-guide.md create mode 100644 .changeset/framework-guides-sass-use.md diff --git a/.changeset/core-readme-package-guide.md b/.changeset/core-readme-package-guide.md new file mode 100644 index 000000000..38a1a4f21 --- /dev/null +++ b/.changeset/core-readme-package-guide.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Updated the `@tabler/core` README with package usage, optional stylesheets, Sass setup and browser support. diff --git a/.changeset/framework-guides-sass-use.md b/.changeset/framework-guides-sass-use.md new file mode 100644 index 000000000..fee97356a --- /dev/null +++ b/.changeset/framework-guides-sass-use.md @@ -0,0 +1,5 @@ +--- +"@tabler/docs": patch +--- + +Fixed the Sass import in the framework guides to use `@use` instead of the deprecated `@import`. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d841e627a..890b078c7 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -24,6 +24,23 @@ This starts the preview website at [http://localhost:3000](http://localhost:3000 You can also skip the local setup entirely: open the repository in [GitHub Codespaces](https://codespaces.new/tabler/tabler) or a VS Code Dev Container — the configuration in `.devcontainer/` installs Node.js, pnpm and all dependencies for you. +### Docker + +If you prefer not to install Node.js, build and run the provided image from the repository root: + +```sh +docker build -t tabler . +docker run -p 3000:3000 -p 3010:3010 -v $(pwd)/core:/app/core -v $(pwd)/preview:/app/preview -v $(pwd)/docs:/app/docs -v $(pwd)/shared:/app/shared tabler +``` + +This mounts the source directories into the container and exposes the preview on port 3000 and the documentation on port 3010. Edit anything in `core/`, `preview/`, `docs/` or `shared/` and the browser refreshes after the rebuild. + +Or use Docker Compose, which applies the same mounts and ports: + +```sh +docker compose up --build +``` + ## Where things live - `core/` — the framework: SCSS (`core/scss/`) and JavaScript (`core/js/`) diff --git a/README.md b/README.md index de4a4fc25..2bc0ca7f6 100644 --- a/README.md +++ b/README.md @@ -1,87 +1,67 @@

-Tabler + + + +Tabler + +

-A premium and open source dashboard template with a responsive and high-quality UI. +Free and open source HTML dashboard UI kit built on Bootstrap 5.

-NPM version -NPM Downloads -Tabler preview -License -Test build -GitHub stars +NPM version +NPM Downloads +jsDelivr hits +Build +License +GitHub stars

Live demo · Documentation · Releases · Discussions

-## 💛 Sponsors +## Table of contents -**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 sponsors - -

+- [Preview](#-preview) +- [Quick start](#-quick-start) +- [What's included](#-whats-included) +- [Frameworks](#-frameworks) +- [Ecosystem](#-ecosystem) +- [Documentation](#-documentation) +- [Browser support](#-browser-support) +- [Contributing](#-contributing) +- [Sponsors](#-sponsors) +- [Creators](#-creators) +- [Contributors](#-contributors) +- [License](#-license) ## 🔎 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](https://preview.tabler.io) +Tabler is a set of ready-made layouts, components and demo pages for admin panels, dashboards and web apps. Every component is built on Bootstrap 5, works in light and dark mode, and can be customized with Sass or CSS custom properties.

- - Tabler Preview - + + + +Tabler preview + +

-## 🚀 Features +- **Built on Bootstrap 5.** Bootstrap ships inside the package, so you only need one CSS and one JS file. +- **120+ demo pages.** Dashboards, forms, tables, auth screens, error pages, marketing layouts and more, all in the [live demo](https://preview.tabler.io). +- **Dark mode and RTL.** Every component has a dark color scheme, and every stylesheet ships in an RTL version. +- **Over 6,000 icons.** [Tabler Icons](https://tabler.io/icons) are drawn on a 24×24 grid and match the UI kit. +- **20+ plugins included.** Charts, date pickers, selects, sliders, editors, drag and drop and other libraries are bundled in `dist/libs`. +- **Sass sources and TypeScript types.** Customize the theme with `@use … with ()` and use typed JavaScript components. -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 knowledge — as a reward, you'll be able to manage and visualize different types of data in the easiest possible way! +## 🚀 Quick start -- **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! - -## 📦 Installation - -### Package managers - -Tabler is distributed via npm. You can install it with npm or your preferred JavaScript package manager: - -```sh -npm install --save @tabler/core -``` - -### CDN - -All files included in the `@tabler/core` npm package are also available over a CDN. - -JavaScript: - -```html - -``` - -Styles: - -```html - -``` - -### Download - -If you don't use a package manager, you can [download the latest release](https://github.com/tabler/tabler/releases) as a ZIP archive. - -### Quick start - -Create an HTML file with Tabler's CSS and JavaScript loaded from the CDN and start building: +Load Tabler from the CDN and start building: ```html @@ -100,112 +80,140 @@ Create an HTML file with Tabler's CSS and JavaScript loaded from the CDN and sta ``` -Or try it without installing anything: open the [tabler-starter](https://github.com/tabler/tabler-starter) template on [StackBlitz](https://stackblitz.com/github/tabler/tabler-starter), [CodeSandbox](https://codesandbox.io/s/github/tabler/tabler-starter) or [GitHub Codespaces](https://codespaces.new/tabler/tabler-starter). +Or install the package with npm or your preferred JavaScript package manager: + +```sh +npm install @tabler/core +``` + +Then import the styles and scripts in your entry file: + +```js +import '@tabler/core/dist/css/tabler.min.css' +import '@tabler/core/dist/js/tabler.min.js' +``` + +You can also [download the latest release](https://github.com/tabler/tabler/releases) as a ZIP archive, or try Tabler without installing anything: open the [tabler-starter](https://github.com/tabler/tabler-starter) template on [StackBlitz](https://stackblitz.com/github/tabler/tabler-starter), +[CodeSandbox](https://codesandbox.io/s/github/tabler/tabler-starter) or [GitHub Codespaces](https://codespaces.new/tabler/tabler-starter). + +See the [installation guide](https://docs.tabler.io/ui/getting-started/installation/) for more options. + +## 📦 What's included + +The `@tabler/core` package contains compiled and minified CSS and JavaScript, the Sass and TypeScript sources, and the third-party plugins used by the demo pages: + +```text +@tabler/core/ +├── dist/ +│ ├── css/ tabler.css and the optional stylesheets (flags, marketing, payments, socials, +│ │ themes, vendors), each with .min and .rtl versions +│ ├── js/ tabler.js and tabler.esm.js, plus the standalone tabler-theme.js +│ ├── libs/ bundled plugins: ApexCharts, Tom Select, Litepicker, FullCalendar and others +│ ├── types/ TypeScript declarations +│ ├── fonts/ +│ └── img/ +├── scss/ Sass sources +└── js/ TypeScript sources +``` + +The stylesheets are split so that you load only what you use. `tabler.css` is enough for most projects; the other files add country flags, payment provider logos, social icons, marketing layouts or alternative gray palettes. + +## 🧩 Frameworks + +Tabler is plain HTML and CSS, so it works with any framework. The documentation has a setup guide for each of these: + +[React](https://docs.tabler.io/ui/getting-started/frameworks/react/) · [Vue](https://docs.tabler.io/ui/getting-started/frameworks/vue/) · [Angular](https://docs.tabler.io/ui/getting-started/frameworks/angular/) · [Next.js](https://docs.tabler.io/ui/getting-started/frameworks/nextjs/) · +[Nuxt](https://docs.tabler.io/ui/getting-started/frameworks/nuxt/) · [SvelteKit](https://docs.tabler.io/ui/getting-started/frameworks/sveltekit/) · [Astro](https://docs.tabler.io/ui/getting-started/frameworks/astro/) · [Laravel](https://docs.tabler.io/ui/getting-started/frameworks/laravel/) · +[Django](https://docs.tabler.io/ui/getting-started/frameworks/django/) · [Rails](https://docs.tabler.io/ui/getting-started/frameworks/rails/) · [Symfony](https://docs.tabler.io/ui/getting-started/frameworks/symfony/) + +## 🌍 Ecosystem + +Tabler is more than the UI kit. These projects share the same design language: + +| Project | What it is | +| ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | +| [Tabler Icons](https://github.com/tabler/tabler-icons) | Over 6,000 free MIT-licensed SVG icons, with packages for React, Vue, Svelte and Angular | +| [Tabler Illustrations](https://tabler.io/illustrations) | Customizable SVG illustrations in light and dark variants | +| [Tabler Emails](https://tabler.io/emails) | Responsive HTML email templates tested in more than 90 clients | +| [Tabler Avatars](https://tabler.io/avatars) | Avatar illustrations for user profiles and placeholders | +| [Tabler Flags](https://github.com/tabler/tabler-flags) | Over 250 optimized SVG country flags, shipped in `tabler-flags.css` | +| [Tabler Payments](https://docs.tabler.io/payments/) | Payment provider logos in light and dark versions, shipped in `tabler-payments.css` | +| [tabler-starter](https://github.com/tabler/tabler-starter) | Minimal starter template, ready to open in StackBlitz, CodeSandbox or Codespaces | +| [Tabler Icons for Figma](https://github.com/tabler/tabler-icons-figma) | Figma plugin for inserting Tabler Icons into your designs | ## 📖 Documentation -The full documentation is available at [docs.tabler.io](https://docs.tabler.io/). To see what changed in each release, check the [changelog](core/CHANGELOG.md) and [GitHub releases](https://github.com/tabler/tabler/releases). +The full documentation is available at [docs.tabler.io](https://docs.tabler.io/). It covers installation, customization, color modes, RTL, every component and plugin, and the [frequently asked questions](https://docs.tabler.io/ui/getting-started/faq/). -### Upgrading to 1.5 +To see what changed in each release, check the [changelog](core/CHANGELOG.md) and [GitHub releases](https://github.com/tabler/tabler/releases). Updating from an older version? Read the [upgrade guide](https://docs.tabler.io/ui/getting-started/upgrade/) first, it lists every breaking change with a before-and-after +example. -Tabler 1.5 ships Bootstrap inside the package, moves the Sass sources to the module system, and drops a few unused variables. Read the [upgrade guide](https://docs.tabler.io/ui/getting-started/upgrade/) before updating from 1.4 — it lists every breaking change with a before-and-after example. +Tabler follows [Semantic Versioning](https://semver.org/). Breaking changes only land in major releases, and every release ships a changeset-based changelog. -## 🛠️ Development +## 🌐 Browser support -To build a copy of Tabler locally, you have two options: set up the development tools directly on your device, or use the provided Docker setup. You can also start right away in the cloud with [GitHub Codespaces](https://codespaces.new/tabler/tabler) — the dev container installs everything for you. +Tabler runs in every current browser. The minimum versions below come from the CSS features it relies on without a fallback: `light-dark()`, `color-mix()`, `:has()` and `@property`. -### Local setup +| Browser | Minimum version | +| ---------------- | --------------- | +| Chrome, Edge | 123 | +| Firefox | 128 | +| Safari | 17.5 | +| Opera | 109 | +| iOS Safari | 17.5 | +| Samsung Internet | 27 | -1. Install [Node.js](https://nodejs.org/download/) (version 22.12 or newer) and [pnpm](https://pnpm.io/installation) (we recommend [Corepack](https://pnpm.io/installation#using-corepack)). -2. Clone the repository: - - ```sh - git clone https://github.com/tabler/tabler.git - cd tabler - ``` - -3. Install dependencies: - - ```sh - pnpm install - ``` - -4. Start the development servers: - - ```sh - pnpm run dev - ``` - -5. Open [http://localhost:3000](http://localhost:3000) to view the preview website, or [http://localhost:3010](http://localhost:3010) to view the documentation website. Changes to most source files of Tabler core, preview and docs will rebuild the application and refresh the page. - -To perform a one-off production build without a dev server, run: - -```sh -pnpm run build -``` - -### Docker - -1. From the root `tabler` directory, build the image: - - ```sh - docker build -t tabler . - ``` - -2. Run the image. The following command mounts the source directories into the container and exposes port 3000 (preview) and port 3010 (documentation): - - ```sh - docker run -p 3000:3000 -p 3010:3010 -v $(pwd)/core:/app/core -v $(pwd)/preview:/app/preview -v $(pwd)/docs:/app/docs -v $(pwd)/shared:/app/shared tabler - ``` - -3. Open [http://localhost:3000](http://localhost:3000) (preview) or [http://localhost:3010](http://localhost:3010) (documentation). Edit anything in the `core/`, `preview/`, `docs/` or `shared/` folders and watch your browser refresh the page after it has been rebuilt. - -Alternatively, use Docker Compose: `docker compose up --build` builds and starts the container with the same mounts, ports and URLs. +See the [browser support page](https://docs.tabler.io/ui/getting-started/browser-support/) for details. ## 🤝 Contributing -We welcome contributions of all kinds! Please read the [contributing guide](CONTRIBUTING.md) to learn about the development workflow, project structure and conventions. By participating, you agree to follow our [Code of Conduct](.github/CODE_OF_CONDUCT.md). +We welcome contributions of all kinds. The [contributing guide](CONTRIBUTING.md) explains how to run the project locally (with Node.js and pnpm, Docker, or [GitHub Codespaces](https://codespaces.new/tabler/tabler)), where things live in the repository, and what a pull request needs. By participating, you agree to +follow our [Code of Conduct](.github/CODE_OF_CONDUCT.md). + +The short version: + +```sh +git clone https://github.com/tabler/tabler.git +cd tabler +pnpm install +pnpm run dev +``` + +This starts the preview at [http://localhost:3000](http://localhost:3000) and the documentation at [http://localhost:3010](http://localhost:3010), both with live reload. - **Found a bug?** [Open a bug report](https://github.com/tabler/tabler/issues/new?template=bug_report.yml). - **Have an idea?** [Open a feature request](https://github.com/tabler/tabler/issues/new?template=feature_request.yml) or start a [discussion](https://github.com/tabler/tabler/discussions). -- **Found a security issue?** Please report it privately — see our [security policy](SECURITY.md). +- **Found a security issue?** Please report it privately, see our [security policy](SECURITY.md). + +## 💛 Sponsors + +Tabler is free to use, and its development is funded by sponsors. If it saves you time, consider [becoming a sponsor on GitHub](https://github.com/sponsors/codecalm) or [donating on PayPal](https://paypal.me/codecalm). + +

+ +Tabler sponsors + +

## 🤓 Creators -**Paweł Kuna** +- **Paweł Kuna** · [@codecalm](https://github.com/codecalm) · [codecalm.net](https://codecalm.net) +- **Bartłomiej Gawęda** · [@BG-Software-BG](https://github.com/BG-Software-BG) +- **Bartosz Dobija** · [@Bartosz-Do](https://github.com/Bartosz-Do) -- -- -- - -**Bartłomiej Gawęda** - -- -- - -**Bartosz Dobija** - -- +Follow Tabler on [X](https://x.com/tabler_io) and [Facebook](https://www.facebook.com/tabler.io) for updates. ## 👨‍🚀 Contributors This project exists thanks to all the people who contribute. - Tabler contributors +Tabler contributors -## 📣 Social media - -Stay up to date by joining our community on [X](https://x.com/tabler_io) and [Facebook](https://www.facebook.com/tabler.io). - ## 📄 License Tabler is licensed under the [MIT License](LICENSE). -Third-party libraries shipped in `dist/libs` keep their own licenses. One of them needs -attention: **ApexCharts is not MIT from version 5 on**. It is dual-licensed - free under -its Community license for organizations under $2M in annual revenue, and paid above that -threshold, with a separate OEM license for redistribution. Check the -[ApexCharts license options](https://apexcharts.com/license/) before you ship charts in a -commercial product. +Third-party libraries shipped in `dist/libs` keep their own licenses. One of them needs attention: **ApexCharts is not MIT from version 5 on**. It is dual-licensed, free under its Community license for organizations under $2M in annual revenue and paid above that threshold, with a separate OEM license for +redistribution. Check the [ApexCharts license options](https://apexcharts.com/license/) before you ship charts in a commercial product. diff --git a/core/README.md b/core/README.md index f48ebaf5a..11b296bb2 100644 --- a/core/README.md +++ b/core/README.md @@ -1,103 +1,142 @@

-Tabler +Tabler

-A premium and open source dashboard template with a responsive and high-quality UI. +Free and open source HTML dashboard UI kit built on Bootstrap 5.

NPM version NPM Downloads -License +License

Live demo · Documentation · GitHub · Changelog

-## 🔎 Preview +`@tabler/core` is the CSS and JavaScript framework behind [Tabler](https://tabler.io): layouts, components and utilities for admin panels, dashboards and web apps. Bootstrap 5 ships inside the package, every component works in light and dark mode, and every stylesheet has an RTL version. -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! +## Installation -

- - Tabler Preview - -

- -## 📦 Installation - -Install `@tabler/core` with npm or your preferred JavaScript package manager: +Install the package with npm or your preferred JavaScript package manager: ```sh -npm install --save @tabler/core +npm install @tabler/core ``` -### CDN - -All files included in the `@tabler/core` npm package are also available over a CDN. - -JavaScript: +All files in the package are also available over a CDN: ```html + ``` -Styles: +If you don't use a package manager, [download the latest release](https://github.com/tabler/tabler/releases) as a ZIP archive. -```html - +## Usage + +### Compiled CSS and JavaScript + +Import the compiled files once in your entry file. The JavaScript bundle includes Bootstrap, so you don't need to install it separately: + +```js +import '@tabler/core/dist/css/tabler.min.css' +import '@tabler/core/dist/js/tabler.min.js' ``` -### Quick start +The package also has an ES module build with named exports, useful when you create components from code: -Create an HTML file with Tabler's CSS and JavaScript loaded from the CDN and start building: +```js +import { Tooltip } from '@tabler/core' -```html - - - - - - Tabler demo - - - -

Hello, Tabler!

- - - - +new Tooltip(document.querySelector('[data-bs-toggle="tooltip"]')) ``` -Or try it without installing anything: open the [tabler-starter](https://github.com/tabler/tabler-starter) template on [StackBlitz](https://stackblitz.com/github/tabler/tabler-starter), [CodeSandbox](https://codesandbox.io/s/github/tabler/tabler-starter) or [GitHub Codespaces](https://codespaces.new/tabler/tabler-starter). +TypeScript declarations are included in `dist/types`. -## 📖 Documentation +### Optional stylesheets -The full documentation is available at [docs.tabler.io](https://docs.tabler.io/). Release notes live in the [changelog](https://github.com/tabler/tabler/blob/dev/core/CHANGELOG.md). +`tabler.css` covers the UI kit. Load the extra stylesheets only when you need them: -## 🤝 Contributing +| File | Adds | +| ---------------------- | ---------------------------------------------------- | +| `tabler-flags.css` | Country flag icons | +| `tabler-payments.css` | Payment provider logos | +| `tabler-socials.css` | Social media icons | +| `tabler-marketing.css` | Landing page and marketing layouts | +| `tabler-themes.css` | Alternative gray palettes for `data-bs-theme-base` | +| `tabler-vendors.css` | Styles for the bundled third-party plugins | +| `tabler-props.css` | Design tokens as CSS custom properties, on their own | -We welcome contributions of all kinds! See the [contributing guide](https://github.com/tabler/tabler/blob/dev/CONTRIBUTING.md) to get started. +Each file has a `.min` version and a `.rtl` version in `dist/css`. -## 💛 Sponsors +### Sass -**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) :)** +To customize the theme, compile the Sass sources and override variables with `@use … with ()`: + +```scss +@use '@tabler/core/scss/tabler' with ( + $primary: #f11d46, + $border-radius: 8px +); +``` + +The sources write custom properties without a prefix. Add [postcss-prefix-custom-properties](https://www.npmjs.com/package/postcss-prefix-custom-properties) after Sass in your pipeline to get the public `--tblr-` names. The [upgrade guide](https://docs.tabler.io/ui/getting-started/upgrade/#custom-property-prefix-moved-to-postcss) has the full setup. + +### Plugins + +The third-party libraries used by the demo pages (ApexCharts, Tom Select, Litepicker, FullCalendar, Dropzone and others) are bundled in `dist/libs`. The list of shipped files is in [libs.json](https://github.com/tabler/tabler/blob/dev/core/libs.json), and each plugin has its own page in the +[plugins documentation](https://docs.tabler.io/ui/plugins/). + +## What's included + +```text +@tabler/core/ +├── dist/ +│ ├── css/ tabler.css and the optional stylesheets, each with .min and .rtl versions +│ ├── js/ tabler.js and tabler.esm.js, plus the standalone tabler-theme.js +│ ├── libs/ bundled third-party plugins +│ ├── types/ TypeScript declarations +│ ├── fonts/ +│ └── img/ +├── scss/ Sass sources +├── js/ TypeScript sources +└── libs.json list of bundled plugin files +``` + +## Upgrading + +Updating from an older version? Read the [upgrade guide](https://docs.tabler.io/ui/getting-started/upgrade/) first. It lists every breaking change with a before-and-after example. Release notes live in the [changelog](https://github.com/tabler/tabler/blob/dev/core/CHANGELOG.md). + +## Browser support + +Tabler runs in every current browser. The CSS relies on `light-dark()`, `color-mix()`, `:has()` and `@property` without a fallback, which sets the floor at Chrome and Edge 123, Firefox 128, Safari 17.5, Opera 109, iOS 17.5 and Samsung Internet 27. See the +[browser support page](https://docs.tabler.io/ui/getting-started/browser-support/) for details. + +## Documentation + +The full documentation is available at [docs.tabler.io](https://docs.tabler.io/): installation, [framework guides](https://docs.tabler.io/ui/getting-started/frameworks/), customization, color modes, RTL, and every component and plugin. Demo pages are at [preview.tabler.io](https://preview.tabler.io). + +## Contributing + +We welcome contributions of all kinds. See the [contributing guide](https://github.com/tabler/tabler/blob/dev/CONTRIBUTING.md) to get started, [open an issue](https://github.com/tabler/tabler/issues/new/choose) to report a bug or request a feature, or join the +[discussions](https://github.com/tabler/tabler/discussions). + +## Sponsors + +Tabler is free to use, and its development is funded by sponsors. If it saves you time, consider [becoming a sponsor on GitHub](https://github.com/sponsors/codecalm) or [donating on PayPal](https://paypal.me/codecalm).

- - Tabler sponsors - + +Tabler sponsors +

-## 📄 License +## License Tabler is licensed under the [MIT License](https://github.com/tabler/tabler/blob/dev/LICENSE). -Third-party libraries shipped in `dist/libs` keep their own licenses. One of them needs -attention: **ApexCharts is not MIT from version 5 on**. It is dual-licensed - free under -its Community license for organizations under $2M in annual revenue, and paid above that -threshold, with a separate OEM license for redistribution. Check the -[ApexCharts license options](https://apexcharts.com/license/) before you ship charts in a -commercial product. +Third-party libraries shipped in `dist/libs` keep their own licenses. One of them needs attention: **ApexCharts is not MIT from version 5 on**. It is dual-licensed, free under its Community license for organizations under $2M in annual revenue and paid above that threshold, with a separate OEM license for +redistribution. Check the [ApexCharts license options](https://apexcharts.com/license/) before you ship charts in a commercial product. diff --git a/docs/content/ui/getting-started/frameworks/angular.mdx b/docs/content/ui/getting-started/frameworks/angular.mdx index 9e1be842b..1b7958fec 100644 --- a/docs/content/ui/getting-started/frameworks/angular.mdx +++ b/docs/content/ui/getting-started/frameworks/angular.mdx @@ -48,7 +48,7 @@ Alternatively, import the compiled CSS directly in `src/styles.scss`: For full theme customization, import SCSS sources in `src/styles.scss` instead: ```scss -@import '@tabler/core/scss/tabler'; +@use '@tabler/core/scss/tabler'; ``` ### Import and initialize JavaScript diff --git a/docs/content/ui/getting-started/frameworks/astro.mdx b/docs/content/ui/getting-started/frameworks/astro.mdx index 65ae883e6..997240091 100644 --- a/docs/content/ui/getting-started/frameworks/astro.mdx +++ b/docs/content/ui/getting-started/frameworks/astro.mdx @@ -40,7 +40,7 @@ import '@tabler/core/dist/css/tabler.min.css' For full theme customization, import SCSS sources instead: ```scss -@import '@tabler/core/scss/tabler'; +@use '@tabler/core/scss/tabler'; ``` ### Import and initialize JavaScript diff --git a/docs/content/ui/getting-started/frameworks/django.mdx b/docs/content/ui/getting-started/frameworks/django.mdx index 09da5a595..19c87ae65 100644 --- a/docs/content/ui/getting-started/frameworks/django.mdx +++ b/docs/content/ui/getting-started/frameworks/django.mdx @@ -54,7 +54,7 @@ Then add Tabler CSS to your base template: For full theme customization, build from SCSS sources: ```scss -@import '@tabler/core/scss/tabler'; +@use '@tabler/core/scss/tabler'; ``` ### Import and initialize JavaScript diff --git a/docs/content/ui/getting-started/frameworks/laravel.mdx b/docs/content/ui/getting-started/frameworks/laravel.mdx index 32b532f8b..1b3f6bbee 100644 --- a/docs/content/ui/getting-started/frameworks/laravel.mdx +++ b/docs/content/ui/getting-started/frameworks/laravel.mdx @@ -40,7 +40,7 @@ In a standard Laravel setup, import Tabler CSS in `resources/css/app.css`: For full theme customization, you can import SCSS sources from the package: ```scss -@import '@tabler/core/scss/tabler'; +@use '@tabler/core/scss/tabler'; ``` ### Import and initialize JavaScript diff --git a/docs/content/ui/getting-started/frameworks/nextjs.mdx b/docs/content/ui/getting-started/frameworks/nextjs.mdx index a54d6b8b4..e0295a0ec 100644 --- a/docs/content/ui/getting-started/frameworks/nextjs.mdx +++ b/docs/content/ui/getting-started/frameworks/nextjs.mdx @@ -40,7 +40,7 @@ Import Tabler CSS once in your global stylesheet (`app/globals.css`): For full theme customization, import SCSS sources: ```scss -@import '@tabler/core/scss/tabler'; +@use '@tabler/core/scss/tabler'; ``` ### Import and initialize JavaScript diff --git a/docs/content/ui/getting-started/frameworks/nuxt.mdx b/docs/content/ui/getting-started/frameworks/nuxt.mdx index 957044858..667a06974 100644 --- a/docs/content/ui/getting-started/frameworks/nuxt.mdx +++ b/docs/content/ui/getting-started/frameworks/nuxt.mdx @@ -42,7 +42,7 @@ export default defineNuxtConfig({ For full theme customization, import SCSS sources in your app stylesheet: ```scss -@import '@tabler/core/scss/tabler'; +@use '@tabler/core/scss/tabler'; ``` ### Import and initialize JavaScript diff --git a/docs/content/ui/getting-started/frameworks/rails.mdx b/docs/content/ui/getting-started/frameworks/rails.mdx index 06d009a01..ccea0474b 100644 --- a/docs/content/ui/getting-started/frameworks/rails.mdx +++ b/docs/content/ui/getting-started/frameworks/rails.mdx @@ -40,7 +40,7 @@ For Rails with `cssbundling-rails`, import Tabler CSS in `app/assets/stylesheets For full theme customization, import SCSS sources instead: ```scss -@import '@tabler/core/scss/tabler'; +@use '@tabler/core/scss/tabler'; ``` ### Import and initialize JavaScript diff --git a/docs/content/ui/getting-started/frameworks/react.mdx b/docs/content/ui/getting-started/frameworks/react.mdx index 76127b571..0338ed998 100644 --- a/docs/content/ui/getting-started/frameworks/react.mdx +++ b/docs/content/ui/getting-started/frameworks/react.mdx @@ -40,7 +40,7 @@ import '@tabler/core/dist/css/tabler.min.css' For full theme customization, import SCSS sources instead: ```scss -@import '@tabler/core/scss/tabler'; +@use '@tabler/core/scss/tabler'; ``` ### Import and initialize JavaScript diff --git a/docs/content/ui/getting-started/frameworks/sveltekit.mdx b/docs/content/ui/getting-started/frameworks/sveltekit.mdx index a4fe82cb2..ae6308709 100644 --- a/docs/content/ui/getting-started/frameworks/sveltekit.mdx +++ b/docs/content/ui/getting-started/frameworks/sveltekit.mdx @@ -40,7 +40,7 @@ Import Tabler CSS once in your global stylesheet (`src/app.css`): For full theme customization, import SCSS sources instead: ```scss -@import '@tabler/core/scss/tabler'; +@use '@tabler/core/scss/tabler'; ``` ### Import and initialize JavaScript diff --git a/docs/content/ui/getting-started/frameworks/symfony.mdx b/docs/content/ui/getting-started/frameworks/symfony.mdx index bc7ee300a..83d0ef890 100644 --- a/docs/content/ui/getting-started/frameworks/symfony.mdx +++ b/docs/content/ui/getting-started/frameworks/symfony.mdx @@ -40,7 +40,7 @@ If you use Webpack Encore, import Tabler CSS in `assets/styles/app.scss`: For full theme customization, import SCSS sources instead: ```scss -@import '@tabler/core/scss/tabler'; +@use '@tabler/core/scss/tabler'; ``` ### Import and initialize JavaScript diff --git a/docs/content/ui/getting-started/frameworks/vue.mdx b/docs/content/ui/getting-started/frameworks/vue.mdx index 6493194bf..32c91f103 100644 --- a/docs/content/ui/getting-started/frameworks/vue.mdx +++ b/docs/content/ui/getting-started/frameworks/vue.mdx @@ -40,7 +40,7 @@ import '@tabler/core/dist/css/tabler.min.css' For full theme customization, import SCSS sources instead: ```scss -@import '@tabler/core/scss/tabler'; +@use '@tabler/core/scss/tabler'; ``` ### Import and initialize JavaScript