DOCSEARCHbyAlgolia
Submit Docs

Tabler UI Kit Documentation

website·Indexed 39 days ago

https://tabler.io/docs

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 such as React, Next.js, Vue, Angular, Laravel, and Django. The documentation covers foundational styles, layout structures, and a comprehensive library of UI components like accordions, alerts, avatars, and badges.

Tokens
123.3K
Snippets
709
Records
835
Agent score
71%

What's inside Tabler

  1. 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.

  2. 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.

  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 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.

  5. 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.

  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 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.

  8. 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>

  9. Accessibility best practices for input masks

    When using input masks, follow these accessibility guidelines to ensure the form remains usable for all users:

    • Provide a clear hint about the expected format using aria-describedby tied to the field.
    • Always use a real <label>; do not rely solely on the placeholder as it disappears during typing.
    • Ensure the field does not block pasting to support password managers and assistive devices.
    • Use appropriate type and autocomplete attributes to enable browser autofill and trigger the correct mobile keyboard (e.g., numeric keyboard for phone numbers).

  10. 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.

  11. Choose a Tabler Icons integration method

    Tabler Icons provides official libraries for popular frameworks (React, Vue, Svelte, Angular, etc.) allowing icons to be used as native components with support for tree-shaking and full styling control. For projects requiring plain CSS classes, a webfont version is also available.

  12. 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