Components

Build collapsible content sections with accordion classes and modifiers.

Show alert messages that inform users about success, info, warning, or danger states, with icons, links, and dismissible options.

Display user avatars with images, initials, or icons. Change sizes, shapes, and colors, or group them into stacked avatar lists.

Add badges to show counts, labels, or statuses. Use colors, outline and pill styles, links, and notification dots to add context.

A breadcrumb trail for the current page location, with separators, icons and a muted style.

Buttons in many colors, sizes and shapes, with icons, loading states and social styles.

Organize content with flexible cards. Combine headers, footers, images, and actions to build sections that work on any screen size.

Gradient card backgrounds, with color variants, multi-color themes, directions and animation.

Display multiple images or slides in a compact carousel with indicators, captions, and automatic or manual navigation.

Build a conversation view with message bubbles, sender info, and a typing indicator.

Display labeled data in a compact datagrid - a responsive list of title and content pairs, ideal for detail panels and summaries.

Separate content with horizontal dividers. Add optional text labels aligned left, center, or right to keep layouts clear.

Build dropdown menus that reveal lists of options or actions. Add icons, dividers, and custom triggers to keep the interface clean.

Empty states for first use, no results and error screens, with an image, text and an action.

Use over 5000 free MIT-licensed Tabler icons in your interface. Learn how to embed, size, and animate them in your projects.

Group related items in one list.

Show interactive maps with markers using Mapbox GL JS. Tabler provides the container markup and setup code to get you started.

Add inline mention chips to text - people, tags, apps and colors - with an avatar, a logo or a color swatch inside.

Create modal dialogs for notifications, confirmations, and custom content. Adjust sizes, add forms, and control them with JavaScript.

Sidebar panel that slides in from the edge of the viewport.

Navigate through multi-page content with pagination controls.

Reserve space for loading content with placeholders. Use lines, headings, and image blocks to build skeleton screens.

Show extra information in popovers when a tooltip is not enough. Set the placement and trigger to control how they appear.

Show task progress with progress bars. Set the value, color, and size, or use indeterminate bars for unknown durations.

Use progress steps to display compact onboarding, checkout, and setup progress.

Highlight cards and other elements with ribbons. Change the position, color, and shape, or add icons and text to draw attention.

A set of mutually exclusive options displayed as connected buttons.

Show loading states with spinners. Choose between border and growing styles, change colors and sizes, or place them in buttons.

Build star rating UI with stars classes and data-star-rating state selectors.

Highlight the state of an element with a small status badge. Add colors, dots, and animations to make statuses easy to scan.

Guide users through multi-step processes with a steps indicator. Show completed, active, and upcoming steps in a clear layout.

Animate a smooth transition between two icons with the switch icon component - useful for likes, toggles, and favorite buttons.

Split content into tabs so users can switch between related views in the same context. Add icons or style the tabs as pills.

Present data in clean, responsive tables. Add hover states, striped rows, sorting, and other options to improve readability.

Build inline tag elements with the tag class API and related tag part classes.

Visualize events in chronological order with a timeline. Add icons, avatars, and text to present processes and activity feeds.

Display a lightweight alert notification with a toast.

Explain interface elements with tooltips shown on hover. Control placement, add HTML content, and customize how they appear.

Visualize activity logs and uptime data with the tracking component - a compact row of colored blocks that show status over time.

Show how a value changed with a trend indicator. Combine a number, arrow icon, and color so users can read direction at a glance.