Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-26 21:04:25 +04:00
Code Issues Projects Releases Wiki Activity

Improve README and community health files (#2808)

Browse Source
This commit is contained in:
Paweł Kuna
2026-08-07 01:15:34 +02:00
committed by GitHub
parent b38cd32d07
commit a0d84f66fe
16 changed files with 436 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/core-readme-refresh.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Updated the npm package README with badges, quick links, CDN usage, documentation and changelog links.
.changeset/docs-how-to-contribute-sync.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/docs": patch
---
Updated the How to Contribute guide with starter issues, GitHub Codespaces setup, a table of useful commands and pull request conventions.
.devcontainer/devcontainer.json
+23
View File
@@ -0,0 +1,23 @@
{
"name": "Tabler",
"image": "mcr.microsoft.com/devcontainers/javascript-node:24",
"postCreateCommand": "corepack enable && pnpm install",
"forwardPorts": [3000, 3010],
"portsAttributes": {
"3000": {
"label": "Preview website"
},
"3010": {
"label": "Documentation website"
}
},
"customizations": {
"vscode": {
"extensions": [
"astro-build.astro-vscode",
"esbenp.prettier-vscode",
"stylelint.vscode-stylelint"
]
}
}
}
.github/CODEOWNERS
+3
View File
@@ -0,0 +1,3 @@
# Default owners for everything in the repo, unless a later match takes precedence.
# They will be requested for review when someone opens a pull request.
* @codecalm
.github/ISSUE_TEMPLATE/bug_report.yml
+72 -67
View File
@@ -3,70 +3,75 @@ description: Create a report to help us improve
title: "[BUG] "
labels: ["bug"]
body:
- type: markdown
attributes:
value: "## Thank you for making a bug report!"
- type: markdown
attributes:
value: |
Thanks for taking the time to fill out this bug! It's really important to fill this form out completely as
not filling it out will make the bug reports hard to replicate.
- type: input
id: browser
attributes:
label: Browser
description: "What browser and version did this bug occur on?"
placeholder: "e.g. Chrome ver.22, Safari ver.10"
validations:
required: true
- type: input
id: os
attributes:
label: OS
description: "What is the operating system of your device?"
placeholder: "e.g. Windows 10, iOS 14, Ubuntu 23.04"
validations:
required: true
- type: input
id: screen_size
attributes:
label: Screen size
description: "What is the screen size of your device?"
placeholder: "e.g. 800x600, 1920x1080"
validations:
required: true
- type: textarea
id: description
attributes:
label: Describe the bug
description: "A clear and concise description of what the bug is."
validations:
required: true
- type: textarea
id: reproduce
attributes:
label: How to reproduce
description: "How do you trigger this bug? Please walk us through it step by step."
value: |
1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error
...
validations:
required: true
- type: textarea
id: screenshots
attributes:
label: Screenshots
description: "If applicable, add screenshots here to help explain this problem. This helps us understand whats happening better."
validations:
required: false
- type: input
id: jsfiddle
attributes:
label: JSFiddle
description: "Please add a jsFiddle replicating the bug. Without the jsFiddle most bug reports cannot be solved and will be closed."
validations:
required: false
---
- type: markdown
attributes:
value: |
## Thank you for making a bug report!
Thanks for taking the time to fill out this bug report! Please fill this form out completely —
incomplete reports are hard to replicate and may be closed.
- type: input
id: version
attributes:
label: Tabler version
description: "Which version of Tabler are you using?"
placeholder: "e.g. 1.4.0"
validations:
required: true
- type: input
id: browser
attributes:
label: Browser
description: "What browser and version did this bug occur on?"
placeholder: "e.g. Chrome ver.22, Safari ver.10"
validations:
required: true
- type: input
id: os
attributes:
label: OS
description: "What is the operating system of your device?"
placeholder: "e.g. Windows 10, iOS 14, Ubuntu 23.04"
validations:
required: true
- type: input
id: screen_size
attributes:
label: Screen size
description: "What is the screen size of your device?"
placeholder: "e.g. 800x600, 1920x1080"
validations:
required: true
- type: textarea
id: description
attributes:
label: Describe the bug
description: "A clear and concise description of what the bug is."
validations:
required: true
- type: textarea
id: reproduce
attributes:
label: How to reproduce
description: "How do you trigger this bug? Please walk us through it step by step."
value: |
1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error
...
validations:
required: true
- type: textarea
id: screenshots
attributes:
label: Screenshots
description: "If applicable, add screenshots here to help explain this problem. This helps us understand what's happening better."
validations:
required: false
- type: input
id: live_example
attributes:
label: Live example
description: "Please add a link to a live example replicating the bug (for example a JSFiddle or CodeSandbox — you can start from our [starter template](https://stackblitz.com/github/tabler/tabler-starter)). Without it, most bug reports cannot be solved and will be closed."
validations:
required: false
.github/ISSUE_TEMPLATE/config.yml
+11
View File
@@ -0,0 +1,11 @@
blank_issues_enabled: false
contact_links:
- name: 📖 Documentation
url: https://docs.tabler.io
about: Guides for installing, using and customizing Tabler.
- name: 💬 Questions and ideas
url: https://github.com/tabler/tabler/discussions
about: Ask questions, share ideas and discuss with the community.
- name: 🛡️ Security issue
url: https://github.com/tabler/tabler/blob/dev/SECURITY.md
about: Please report security vulnerabilities privately — never in a public issue.
.github/ISSUE_TEMPLATE/feature_request.md
-17
View File
@@ -1,17 +0,0 @@
---
name: Feature request
about: Suggest an idea for Tabler
title: "[FEATURE] "
labels: enhancement
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Example: I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
.github/ISSUE_TEMPLATE/feature_request.yml
+39
View File
@@ -0,0 +1,39 @@
name: Feature request
description: Suggest an idea for Tabler
title: "[FEATURE] "
labels: ["feature request"]
body:
- type: markdown
attributes:
value: |
Thanks for taking the time to suggest an improvement! If you are not sure about your idea yet,
consider starting a [discussion](https://github.com/tabler/tabler/discussions) first.
- type: textarea
id: problem
attributes:
label: Is your feature request related to a problem?
description: "A clear and concise description of what the problem is."
placeholder: "Example: I'm always frustrated when..."
validations:
required: false
- type: textarea
id: solution
attributes:
label: Describe the solution you'd like
description: "A clear and concise description of what you want to happen."
validations:
required: true
- type: textarea
id: alternatives
attributes:
label: Describe alternatives you've considered
description: "A clear and concise description of any alternative solutions or features you've considered."
validations:
required: false
- type: textarea
id: context
attributes:
label: Additional context
description: "Add any other context, links or screenshots about the feature request here."
validations:
required: false
.github/PULL_REQUEST_TEMPLATE.md
+16
View File
@@ -0,0 +1,16 @@
<!-- Thank you for contributing to Tabler! Please read CONTRIBUTING.md before opening a pull request. -->
## What does this PR do?
<!-- A short description of the change and why it is needed. Link related issues with "Fixes #123" or "Closes #123". -->
## Screenshots
<!-- For visual changes, add before/after screenshots. Remove this section if not applicable. -->
## Checklist
- [ ] The branch is based on `dev` and named `<type>/<short-description>` (for example `fix/markdown-table-overflow`)
- [ ] `pnpm run build` passes locally
- [ ] A changeset is included if the change affects any package (`pnpm exec changeset`)
- [ ] Documentation is updated if needed (`docs/pages/**`)
.github/SUPPORT.md
+11
View File
@@ -0,0 +1,11 @@
# Getting support
Thanks for using Tabler! Here is where to go depending on what you need:
- **Documentation** — guides for installing, using and customizing Tabler: [docs.tabler.io](https://docs.tabler.io)
- **Questions and ideas** — ask the community in [GitHub Discussions](https://github.com/tabler/tabler/discussions)
- **Bug reports** — open an issue using the [bug report template](https://github.com/tabler/tabler/issues/new?template=bug_report.yml)
- **Feature requests** — open an issue using the [feature request template](https://github.com/tabler/tabler/issues/new?template=feature_request.yml)
- **Security issues** — please report privately, following our [security policy](../SECURITY.md)
Please keep the issue tracker for bugs and feature requests — usage questions get better answers in Discussions.
CONTRIBUTING.md
+30 -7
View File
@@ -1,6 +1,15 @@
# Contributing to Tabler
Thank you for wanting to contribute! This is a short overview - the full guide lives in the documentation: [How to Contribute](https://docs.tabler.io/ui/getting-started/how-to-contribute/).
Thank you for wanting to contribute! This is a short overview — the full guide lives in the documentation: [How to Contribute](https://docs.tabler.io/ui/getting-started/how-to-contribute/).
## Ways to contribute
- **Pick a starter issue** — issues labeled [`good first issue`](https://github.com/tabler/tabler/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) are small and well-scoped, and [`help wanted`](https://github.com/tabler/tabler/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) issues welcome community help.
- **Report a bug** — use the [bug report template](https://github.com/tabler/tabler/issues/new?template=bug_report.yml). Include steps to reproduce and, if possible, a live example (for example a JSFiddle).
- **Suggest a feature** — use the [feature request template](https://github.com/tabler/tabler/issues/new?template=feature_request.yml) or start a [discussion](https://github.com/tabler/tabler/discussions) first if you are not sure.
- **Improve the documentation** — docs live in `docs/pages/**/*.mdx` and follow the same pull request workflow as code.
- **Submit a pull request** — fixes and improvements are always welcome. For large changes, please open an issue or discussion first so we can align before you invest time.
- **Report a security issue** — do not open a public issue; follow the [security policy](SECURITY.md) instead.
## Quick start
@@ -13,15 +22,28 @@ pnpm run dev
This starts the preview website at [http://localhost:3000](http://localhost:3000) and the documentation at [http://localhost:3010](http://localhost:3010), both with live reload.
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.
## Where things live
- `core/` - the framework: SCSS (`core/scss/`) and JavaScript (`core/js/`)
- `preview/` - demo website (Astro, pages in `preview/pages/*.astro`)
- `docs/` - documentation website (Astro, pages in `docs/pages/**/*.mdx`)
- `shared/` - components and layouts shared by preview and docs (`@shared` alias), plus `data/` and `static/`
- `shared/data/` - JSON data for demo pages (`@data` alias)
- `core/` — the framework: SCSS (`core/scss/`) and JavaScript (`core/js/`)
- `preview/` — demo website (Astro, pages in `preview/pages/*.astro`)
- `docs/` — documentation website (Astro, pages in `docs/pages/**/*.mdx`)
- `shared/` — components and layouts shared by preview and docs (`@shared` alias), plus `data/` and `static/`
- `shared/data/` — JSON data for demo pages (`@data` alias)
Do not edit `dist/` folders - they are generated by the build.
Do not edit `dist/` folders — they are generated by the build.
## Useful commands
| Command | What it does |
| -------------------- | ----------------------------------------------------- |
| `pnpm run dev` | Start preview and docs dev servers with live reload |
| `pnpm run build` | Production build of all packages |
| `pnpm run lint` | Markdown, Prettier and SCSS variable checks |
| `pnpm run lint:fix` | Auto-fix lint issues where possible |
| `pnpm run test` | Run the test suites |
| `pnpm run check` | Lint plus TypeScript type checks |
## Before you open a pull request
@@ -29,6 +51,7 @@ Do not edit `dist/` folders - they are generated by the build.
2. **Build and test**: `pnpm run build` must pass. For docs changes, also run `pnpm run lint`.
3. **Add a changeset** if your change affects any package: `pnpm exec changeset`. Use one sentence starting with `Added`, `Updated`, `Fixed` or `Removed`, with backticks for code tokens (for example `` Added `.btn-ghost` variant for buttons. ``).
4. **Write the PR in English**: a concise title in present tense (max ~72 chars, no trailing period) and a short description that explains why the change is needed.
5. **Keep the scope small**: one logical change per pull request makes reviews faster and releases safer.
## Code style
CONTRIBUTORS.md
-28
View File
@@ -1,28 +0,0 @@
## Contributors
Thanks goes to these wonderful people
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tbody>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://tabler.io/"><img src="https://avatars.githubusercontent.com/u/1282324?v=4?s=100" width="100px;" alt="Paweł Kuna"/><br /><sub><b>Paweł Kuna</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=codecalm" title="Code">💻</a> <a href="https://github.com/tabler/tabler/commits?author=codecalm" title="Documentation">📖</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/martynaaj"><img src="https://avatars.githubusercontent.com/u/60158888?v=4?s=100" width="100px;" alt="Martyna"/><br /><sub><b>Martyna</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=martynaaj" title="Documentation">📖</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/deralaxo"><img src="https://avatars.githubusercontent.com/u/40028795?v=4?s=100" width="100px;" alt="Dawid Harat"/><br /><sub><b>Dawid Harat</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=deralaxo" title="Code">💻</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://codersopinion.com/"><img src="https://avatars.githubusercontent.com/u/160743?v=4?s=100" width="100px;" alt="Robert-Jan de Dreu"/><br /><sub><b>Robert-Jan de Dreu</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=rjd22" title="Code">💻</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/FreexD"><img src="https://avatars.githubusercontent.com/u/7117869?v=4?s=100" width="100px;" alt="Michał Wolny"/><br /><sub><b>Michał Wolny</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=FreexD" title="Code">💻</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://www.wangkanai.com/"><img src="https://avatars.githubusercontent.com/u/10666633?v=4?s=100" width="100px;" alt="Sarin Na Wangkanai"/><br /><sub><b>Sarin Na Wangkanai</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=wangkanai" title="Code">💻</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://ensostudio.ru/"><img src="https://avatars.githubusercontent.com/u/3521094?v=4?s=100" width="100px;" alt="Anton"/><br /><sub><b>Anton</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=WinterSilence" title="Code">💻</a></td>
</tr>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/dheineman"><img src="https://avatars.githubusercontent.com/u/516028?v=4?s=100" width="100px;" alt="Dave Heineman"/><br /><sub><b>Dave Heineman</b></sub></a><br /><a href="https://github.com/tabler/tabler/commits?author=dheineman" title="Code">💻</a></td>
</tr>
</tbody>
</table>
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
README.md
+113 -93
View File
@@ -1,5 +1,8 @@
<p align="center">
<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/refs/heads/dev/shared/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://tabler.io"><img src="https://raw.githubusercontent.com/tabler/tabler/refs/heads/dev/shared/static/logo.svg" alt="Tabler" width="300"></a>
</p>
<p align="center">
A premium and open source dashboard template with a responsive and high-quality UI.
</p>
@@ -7,13 +10,17 @@ A premium and open source dashboard template with a responsive and high-quality
<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img src="https://img.shields.io/npm/v/@tabler/core?color=1864ab&label=Latest+version" alt="NPM version"></a>
<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@tabler/core?color=1971c2&label=Downloads"></a>
<a href="https://preview.tabler.io" target="__blank"><img src="https://img.shields.io/static/v1?label=Demo&message=preview&color=228be6" alt="Tabler preview"></a>
<a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg?label=License&message=MIT&color=1c7ed6" alt="License"></a>
<a href="https://github.com/tabler/tabler/archive/dev.zip" target="__blank"><img src="https://img.shields.io/static/v1?label=Download&message=ZIP&color=339af0" alt="Tabler preview"></a>
<a href="https://github.com/tabler/tabler/blob/dev/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg?label=License&message=MIT&color=1c7ed6" alt="License"></a>
<a href="https://github.com/tabler/tabler/archive/dev.zip" target="__blank"><img src="https://img.shields.io/static/v1?label=Download&message=ZIP&color=339af0" alt="Download ZIP"></a>
<a href="https://github.com/tabler/tabler/actions/workflows/test.yml" target="__blank"><img alt="Test build" src="https://github.com/tabler/tabler/actions/workflows/test.yml/badge.svg"></a>
<a href="https://github.com/tabler/tabler" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tabler/tabler?style=social"></a>
</p>
## Sponsors
<p align="center">
<a href="https://preview.tabler.io">Live demo</a> · <a href="https://docs.tabler.io">Documentation</a> · <a href="https://github.com/tabler/tabler/releases">Releases</a> · <a href="https://github.com/tabler/tabler/discussions">Discussions</a>
</p>
## 💛 Sponsors
**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) :)**
@@ -23,23 +30,9 @@ A premium and open source dashboard template with a responsive and high-quality
</a>
</p>
## Testing
<p align="center">Browser testing via:</p>
<p align="center">
<a href="https://www.testmuai.com/?utm_medium=sponsor&utm_source=tabler" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/f0967860-31ad-4078-850b-40b0abc95582" />
<source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/55ac290a-6729-44aa-bbc3-4c5e909facbf" />
<img src="https://github.com/user-attachments/assets/86bcbe29-eb8d-4273-a381-5ce17d4ca92d" alt="TestMu AI" width="296">
</picture>
</a>
</p>
## 🔎 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>
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)
<p align="center">
<a href="https://preview.tabler.io" target="_blank">
@@ -51,112 +44,134 @@ Tabler is fully responsive and compatible with all modern browsers. Thanks to it
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!
* **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!
- **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!
## 📖 Documentation
## 📦 Installation
The documentation is available at https://docs.tabler.io/
### Package managers
## 🪴 Project Activity
<p align="center">
<img src="https://repobeats.axiom.co/api/embed/61d1db34446967b0848af68198a392067e0f5870.svg" alt="Repobeats analytics image" />
</p>
## Installation
### Package Managers
Tabler is distributed via npm. You can install it with this or your preferred JavaScript package manager:
Tabler is distributed via npm. You can install it with npm or your preferred JavaScript package manager:
```sh
npm install --save @tabler/core
```
### CDN support
### CDN
All files included in `@tabler/core` npm package are also available over a CDN.
All files included in the `@tabler/core` npm package are also available over a CDN.
#### Javascript
JavaScript:
```html
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
```
#### Styles
Styles:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css">
```
## Building locally
### Download
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.
If you don't use a package manager, you can [download the latest release](https://github.com/tabler/tabler/releases) as a ZIP archive.
### First steps: Downloading the Tabler source files
### Quick start
With either method, the first thing you'll want to do is download a copy of the Tabler source files to your device.
Create an HTML file with Tabler's CSS and JavaScript loaded from the CDN and start building:
#### 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/) (version 22.12 or newer), 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
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tabler demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css" />
</head>
<body>
<h1>Hello, Tabler!</h1>
<button class="btn btn-primary">Primary button</button>
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
</body>
</html>
```
4. Then execute the following to start up the application stack:
```sh
pnpm run start
```
5. Open [http://localhost:3000](http://localhost:3000) to view the preview website in your browser, or [http://localhost:3010](http://localhost:3010) to view the documentation website - and voilà.
Changes to most of the source files of Tabler core, preview and docs will rebuild the application and refresh the page.
**Note**:
If you wish to perform a one-off production build without a dev server, you can run:
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).
## 📖 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).
## 🛠️ Development
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.
### Local setup
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
### Installing and running development tools with Docker
1. From the root `tabler` directory, build the image:
**Plain Docker**
```sh
docker build -t tabler .
```
Here is an example of how to use this image:
2. Run the image. The following command mounts the source directories into the container and exposes port 3000 (preview) and port 3010 (documentation):
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 source directories into the container, exposes port 3000 to browse the preview website and port 3010 to browse the documentation website:
```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 your browser to [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.
```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
```
**Docker Compose**
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.
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 `core/`, `preview/`, `docs/` or `shared/` folders the same way as with plain docker and access the same URLs and ports in your browser.
Alternatively, use Docker Compose: `docker compose up --build` builds and starts the container with the same mounts, ports and URLs.
## Bugs and feature requests
## 🤝 Contributing
Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
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).
- **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).
## 🪴 Project activity
<p align="center">
<img src="https://repobeats.axiom.co/api/embed/61d1db34446967b0848af68198a392067e0f5870.svg" alt="Repobeats analytics image" />
</p>
## 🤓 Creators
@@ -171,17 +186,22 @@ Found a bug or have a feature request? [Please open a new issue](https://github.
- <https://x.com/B_Gaweda>
- <https://github.com/BG-Software-BG>
**Bartosz Dobija**
- <https://github.com/Bartosz-Do>
## 👨‍🚀 Contributors
This project exists thanks to all the people who contribute.
<img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false" />
<a href="https://github.com/tabler/tabler/graphs/contributors">
<img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false" alt="Tabler contributors">
</a>
## Social media
## 📣 Social media
Stay up to date by joining our community on <a href="https://x.com/tabler_io" >X</a> and <a href="https://www.facebook.com/tabler.io">Facebook</a>
Stay up to date by joining our community on [X](https://x.com/tabler_io) and [Facebook](https://www.facebook.com/tabler.io).
## License
See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.
## 📄 License
Tabler is licensed under the [MIT License](LICENSE).
SECURITY.md
+18 -6
View File
@@ -1,16 +1,28 @@
# Security Policy
We take security very seriously and ask that you follow the following process.
We take security seriously and appreciate responsible disclosure of vulnerabilities.
## Supported Versions
## Supported versions
| Version | Supported |
| ------- | ------------------ |
| 1.0.x | :white_check_mark: |
| 1.x | :white_check_mark: |
| 0.x | :x: |
## Reporting a Vulnerability
## Reporting a vulnerability
If you think you may have found a security bug, We ask that you privately send the details to support@tabler.io.
Please make sure to use a descriptive title in the email.
**Please do not report security vulnerabilities through public GitHub issues.**
If you think you have found a security issue, report it privately in one of two ways:
- Use GitHub's private reporting: [Report a vulnerability](https://github.com/tabler/tabler/security/advisories/new) (Security tab → "Report a vulnerability")
- Send the details to **support@tabler.io**
Please include:
- A descriptive title
- A description of the issue and its potential impact
- Steps to reproduce, or a proof of concept if possible
- The affected version(s)
We will review your report and get back to you as soon as possible. Please give us reasonable time to address the issue before disclosing it publicly.
core/README.md
+67 -13
View File
@@ -1,6 +1,20 @@
# Tabler Core
<p align="center">
<a href="https://tabler.io"><img src="https://raw.githubusercontent.com/tabler/tabler/refs/heads/dev/shared/static/logo.svg" alt="Tabler" width="300"></a>
</p>
Tabler Core is a set of components and utilities for building web applications. It provides a collection of pre-designed components, such as buttons, forms, modals, and more, that can be easily customized and integrated into your projects.
<p align="center">
A premium and open source dashboard template with a responsive and high-quality UI.
</p>
<p align="center">
<a href="https://www.npmjs.com/package/@tabler/core" target="_blank"><img src="https://img.shields.io/npm/v/@tabler/core?color=1864ab&label=Latest+version" alt="NPM version"></a>
<a href="https://www.npmjs.com/package/@tabler/core" target="_blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@tabler/core?color=1971c2&label=Downloads"></a>
<a href="https://github.com/tabler/tabler/blob/dev/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg?label=License&message=MIT&color=1c7ed6" alt="License"></a>
</p>
<p align="center">
<a href="https://preview.tabler.io">Live demo</a> · <a href="https://docs.tabler.io">Documentation</a> · <a href="https://github.com/tabler/tabler">GitHub</a> · <a href="https://github.com/tabler/tabler/blob/dev/core/CHANGELOG.md">Changelog</a>
</p>
## 🔎 Preview
@@ -12,21 +26,62 @@ Tabler is fully responsive and compatible with all modern browsers. Thanks to it
</a>
</p>
## Installation
## 📦 Installation
To install Tabler Core, you can use npm or yarn. Run one of the following commands in your terminal:
Install `@tabler/core` with npm or your preferred JavaScript package manager:
```bash
npm install @tabler/core
```sh
npm install --save @tabler/core
```
or
### CDN
```bash
pnpm add @tabler/core
All files included in the `@tabler/core` npm package are also available over a CDN.
JavaScript:
```html
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
```
## Sponsors
Styles:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css">
```
### Quick start
Create an HTML file with Tabler's CSS and JavaScript loaded from the CDN and start building:
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tabler demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css" />
</head>
<body>
<h1>Hello, Tabler!</h1>
<button class="btn btn-primary">Primary button</button>
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
</body>
</html>
```
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).
## 📖 Documentation
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).
## 🤝 Contributing
We welcome contributions of all kinds! See the [contributing guide](https://github.com/tabler/tabler/blob/dev/CONTRIBUTING.md) to get started.
## 💛 Sponsors
**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) :)**
@@ -36,7 +91,6 @@ pnpm add @tabler/core
</a>
</p>
## 📄 License
## License
See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.
Tabler is licensed under the [MIT License](https://github.com/tabler/tabler/blob/dev/LICENSE).
docs/pages/ui/getting-started/how-to-contribute.mdx
+23 -2
View File
@@ -9,6 +9,8 @@ import Steps from '@components/Steps.astro'
Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, we recommend reading a [how to contribute](https://opensource.guide/how-to-contribute/) guide to learn more about contributing.
Not sure where to start? Look for issues labeled [good first issue](https://github.com/tabler/tabler/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) - they are small and well-scoped.
## Contribution Requirements
When contributing to Tabler, please adhere to the following guidelines:
@@ -39,7 +41,9 @@ Follow these steps to set up Tabler for development:
## Development
To set up Tabler for development, follow these steps:
You can skip the local setup and 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.
To set up Tabler for development on your own machine, follow these steps:
<Steps>
@@ -71,6 +75,17 @@ pnpm run dev
Make your changes in the appropriate folders, such as `./core/`, `./preview/` or `./docs/`. Avoid modifying files in any `dist` folders, as they are auto-generated during the build process and will be overwritten.
</Steps>
## Useful commands
| Command | What it does |
| ------------------- | --------------------------------------------------- |
| `pnpm run dev` | Start preview and docs dev servers with live reload |
| `pnpm run build` | Production build of all packages |
| `pnpm run lint` | Markdown, Prettier and SCSS variable checks |
| `pnpm run lint:fix` | Auto-fix lint issues where possible |
| `pnpm run test` | Run the test suites |
| `pnpm run check` | Lint plus TypeScript type checks |
## Project structure
Tabler is a pnpm monorepo. The packages you will work with most often are:
@@ -111,4 +126,10 @@ Before submitting a pull request, ensure your changes are properly compiled and
## Submitting Your Contribution
Once your changes are ready, create a pull request (PR) on GitHub. Make sure to include a clear and concise description of the changes and their purpose. Thank you for contributing to Tabler!
Once your changes are ready, create a pull request (PR) on GitHub:
1. Branch off `dev` and name the branch `<type>/<short-description>`, for example `feat/gh-123-add-stepper-component` or `fix/markdown-table-overflow`. Allowed types: `feat`, `fix`, `docs`, `chore`, `refactor`, `test`, `build`, `ci`, `perf`, `style`, `revert`.
2. Write the PR in English: a concise title in present tense (max ~72 characters, no trailing period) and a short description that explains why the change is needed.
3. Keep the scope small - one logical change per pull request makes reviews faster.
Thank you for contributing to Tabler!