DOCSEARCHbyAlgolia
Submit Docs

Tabler UI Kit Documentation

website·Indexed 39 days ago

https://docs.tabler.io/

A free and open-source HTML dashboard UI kit built on Bootstrap. Tabler provides a set of responsive interface components for admin panels, dashboards, and web apps, including guides for installation, customization, and integration with frameworks like React, Vue, Next.js, Laravel, and Angular.

Tokens
121.9K
Snippets
703
Records
828
Agent score
68%

What's inside Tabler

  1. Overview of Tabler Illustrations formats

    Tabler Illustrations provides a set of 130 illustrations for empty states, error pages, onboarding, and marketing. Each illustration is available in multiple formats to support different use cases:

    • SVG: Primary web format, provided in separate light/ and dark/ variants.
    • SVG with CSS variables: Colors are exposed as --tblr-illustrations-* custom properties for CSS recoloring.
    • SVG with auto dark mode: A single file that automatically switches between light and dark styles based on the page theme.
    • PNG: Raster exports (with and without backgrounds).
    • EPS and PDF: Vector files for print and design software.
    • Figma: Source files for direct editing.

  2. Overview of Tabler Icons distribution methods

    Tabler Icons provides over 5,000 SVG icons drawn on a 24x24 pixel grid. The library is distributed in four primary formats to suit different development stacks:

    • Framework libraries: Tree-shakable components for React, Vue, Svelte, SolidJS, Preact, and Astro.
    • Webfont: CSS classes for use without a build step.
    • Static files: Standalone SVG, PNG, or PDF files for design tools and non-web use.
    • Figma plugin: Direct insertion into Figma designs.

  3. Overview of Tabler UI Kit

    Tabler is a free, open-source HTML Dashboard UI Kit built on Bootstrap 5. It provides a collection of responsive layouts and components specifically designed for admin panels and dashboards. Key features include built-in support for dark mode and Right-to-Left (RTL) versions for cards, tables, forms, and navigation. Tabler is distributed under the MIT license and developed on GitHub.

  4. Overview of the Tabler Ecosystem

    Tabler is a comprehensive UI kit and toolset for developers. The ecosystem includes the core UI kit, various plugins, Tabler Icons, Illustrations, and specialized email templates.

  5. Overview of Tabler UI

    Tabler UI is a free and open-source web application UI kit built on Bootstrap. It provides a set of responsive interface components specifically designed for creating admin panels, dashboards, and general web applications.

  6. Overview of Tabler Emails templates

    Tabler Emails provides a set of 80 customizable HTML email templates designed for transactional messages (e.g., welcome emails, password resets, invoices) and marketing layouts. These templates are tested across more than 90 email clients and devices to ensure consistent rendering.

  7. Overview of Tabler Utility Classes

    Tabler provides a set of small, single-purpose CSS helper classes for adjusting spacing, borders, cursors, and interactions. These utilities allow developers to modify element details without writing custom CSS and are compatible with all components. The naming conventions for these utilities follow the same rules as Bootstrap.

  8. Stay updated on new Tabler releases

    To receive notifications about new versions of Tabler, you can monitor the GitHub releases page, follow the official X (Twitter) account, or check the project changelog.
    GitHub Releases: https://github.com/tabler/tabler/releases
Changelog: https://tabler.io/changelog

  9. Create a basic status badge

    Use the .status class combined with a color modifier to notify users about the state of a component or page. Available color modifiers include: status-blue, status-azure, status-indigo, status-purple, status-pink, status-red, status-orange, status-yellow, status-lime, status-green, status-teal, and status-cyan.
    <span class="status status-blue">Blue</span>
<span class="status status-green">Green</span>
<span class="status status-red">Red</span>

  10. Use Tabler Payments framework libraries for payment provider logos

    Tabler Payments provides official, tree-shakable packages for React, Vue, Preact, and Astro. These libraries allow developers to render over 100 payment provider logos as native components with type-checked props. For projects requiring plain CSS classes instead of framework components, the Tabler Payments CSS plugin is available.

  11. Understand the Tabler Emails package folder structure

    The Tabler Emails package is organized into a root directory containing template folders, shared assets, and legal/instructional documents. The structure is as follows:

    • emails/: Contains individual subfolders for each email template (e.g., absence/, welcome/).
    • images/: Contains shared visual assets used across multiple templates.
    • license.txt: Contains the package license information.
    • readme.html: Provides general information and usage instructions for the package.
    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

  12. Provide Tabler context to AI assistants

    Depending on the task, provide the AI assistant with different documentation sources:

    • Whole library overview: Provide https://docs.tabler.io/llms.txt to help the AI understand available features and find relevant pages.
    • Specific component implementation: Provide the specific .md URL for the component to get exact markup.
    • Local team context: Download the markdown files and commit them to the project repository for consistent context across the team and tools without URL access.
    Read https://docs.tabler.io/ui/components/card.md and build a card with a header, a footer and a table inside.