Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a lead paragraph with larger text.
This is a regular paragraph with bold text, italic text, and underlined text.
This is small muted text.
Primary text color
Success text color
Danger text color
Buttons
Standard Buttons
Button Sizes
Icon Buttons
Simple Card
This is a simple card with header and body content.
Card with Footer
This card includes a footer section.
Alerts
This is a primary alert with an icon.
This is a success alert message.
This is a warning alert message.
This is a danger alert message.
Badges
Default
Primary
Secondary
Success
Warning
Danger
With Icon
Light Badge
Progress Bars
Form Elements
Checkboxes
Radio Buttons
Switch
Navigation Elements
Tabs
Pills Navigation
Breadcrumb
Pagination
Pagination with Text
Lists
Unordered List
- First item
- Second item
- Third item
Ordered List
- First item
- Second item
- Third item
Table
| Name | Status | |
|---|---|---|
| John Doe | [email protected] | Active |
| Jane Smith | [email protected] | Pending |
| Bob Johnson | [email protected] | Inactive |
Avatars
JD
JS
BJ
AB
RD
PR
SC
ST
Icons
Dropdowns
Interactive Elements
Accordion
Tabler offers a modern, responsive design with a clean aesthetic, built on Bootstrap for ease of use and flexibility.
You can customize Tabler components using CSS variables, SCSS, and utility classes to match your design preferences.
Yes, Tabler is lightweight, optimized for modern browsers, and follows best practices for fast loading and efficiency.
Status Elements
Status Dots
Success
Warning
Danger
Info
Toast Notifications
Mallory Hulme
11 mins ago
This is a sample toast message!
Enhanced Forms
Input with Icons
Input Groups
@
$
.00
Range Slider
Tags & Labels
Tags
Ribbons
New
Sale
Media Elements
Flags
Payment Icons
Timeline
-
10 hrs ago
+1150 Followers
You’re getting more and more followers, keep it up!
-
2 hrs ago
+3 New Products were added!
Congratulations!
-
-
1 day ago
+290 Page Likes
This is great, keep it up!
-
2 days ago
+3 Friend Requests
-
3 days ago
+3 New photos
-
Empty State
Modals
Button Groups
Basic Button Group
Button Toolbar
Vertical Button Group
Segmented Navigation
Basic Segmented
With Icons
With Emojis
With Icons and Text
Collapse
Basic Collapse
This is collapsed content that can be toggled. It's hidden by default and shown when the button is clicked.
Multiple Targets
First collapsible content.
Second collapsible content.
Tooltips & Popovers
Tooltips
Popovers
List Groups
Home
Active item
Settings
Profile
Disabled item
Content Elements
Blockquote
This is a blockquote example with some sample text to demonstrate the styling.
Code Block
// JavaScript example
function greetUser(name) {
console.log(`Hello, ${name}!`);
return true;
}Inline Elements
This paragraph contains inline code, Ctrl + S keyboard shortcut, and highlighted text.