Tabler

Overview

Tabler is a pragmatic, developer-first admin dashboard framework built on Bootstrap 5 and a comprehensive SVG icon library. It serves teams building data-intensive applications, dashboards, and internal tools that demand both aesthetic polish and rapid iteration. The design philosophy embraces 'Functional Minimalism'—a aesthetic movement that prioritizes clarity, information hierarchy, and usability over decorative flourish. Every component is designed to communicate data and actions with precision, using a restrained color palette anchored by a vibrant primary blue (#066fd1) that signals interactivity without overwhelming the interface. The emotional response is one of calm competence: users feel they are working with a mature, trustworthy tool.

Tabler's voice is direct, professional, and encouraging. The tone avoids jargon while remaining technically credible. Copy is concise—'See discounted pricing' rather than 'Click here to view our special promotional offers'—and action-oriented. The brand personality is approachable yet authoritative, reflecting the confidence of an open-source project that has earned the trust of thousands of developers worldwide. Example sentence in Tabler's voice: 'Tabler 1.5 brings 250+ improvements—fold your sidebar, gradient your cards, and pattern your backgrounds.'

Colors

Tabler's color system is built on a neutral slate foundation (ranging from #040f1f to #fcfdfe) that provides visual stability and ensures text legibility across all contexts. The primary accent, a vibrant blue (#066fd1), is reserved exclusively for interactive elements—buttons, links, focus states, and key CTAs. This blue is never used for passive surfaces or body text, ensuring it maintains its signal strength as the user's guide through the interface. Secondary colors include sky blue (#0ea5e9) for supporting actions and highlights, and green (#10b981) for success states. The error color is a clear red (#ef4444), used sparingly on destructive actions and validation failures. Surface colors follow a strict hierarchy: surface (#ffffff) is the base canvas, surface-container-low (#f1f3f8) is

Typography

Tabler uses Inter as its primary typeface, a geometric sans-serif that balances technical precision with warmth. The type system is organized into eight levels: display (60px, 700 weight) for page titles and hero headlines; headline-lg (40px, 600 weight) for section headers; headline-md (28px, 600 weight) for subsection titles; title-lg (20px, 600 weight) for card titles and modal headers; body-lg (18px, 400 weight) for introductory paragraphs; body-md (16px, 400 weight) for standard body copy and form labels; label-md (14px, 600 weight) for button text and badges; and label-sm (12px, 500 weight) for helper text and metadata. Letter-spacing is minimal (0 to -0.04em) to maintain density and readability. Line heights are generous (1.5x to 1.7x) to prevent visual fatigue in data-heavy context

Layout

Tabler uses a 12-column fluid grid with a maximum container width of 1280px, allowing the interface to scale gracefully from mobile to ultra-wide displays. The spacing scale is semantic and consistent: xs (4px) for micro-spacing within components, sm (12px) for internal padding in form fields and small containers, md (24px) for standard padding in cards and section gutters, lg (40px) for major section separation, and xl (64px) for hero spacing and full-width section margins. The gutter between grid columns is 24px, creating a balanced rhythm that accommodates both dense data tables and breathing room for hero sections. White-space is treated as a first-class design element: never collapse margins between sections, always maintain at least lg spacing between major content blocks, and use su

Elevation & Depth

Tabler uses a three-level shadow system to convey depth and hierarchy without relying on color shifts or opacity tricks. Level 1 (sm): 0 1px 2px rgba(0, 0, 0, 0.06) is applied to subtle interactive elements like list items and small cards to indicate they are slightly raised. Level 2 (md): 0 4px 12px rgba(0, 0, 0, 0.08) is used on standard cards, dropdowns, and hover states to signal a clear separation from the base surface. Level 3 (lg): 0 3px 8px rgba(0, 0, 0, 0.15) is reserved for modals, popovers, and top-level overlays that demand maximum visual prominence. Shadows are always cast downwar

Shapes

Tabler embraces 'Geometric Clarity'—a shape philosophy that uses consistent, moderate border-radius values to soften hard edges while maintaining a professional, structured appearance. Buttons use lg radius (1rem / 16px) to create a friendly, approachable feel without appearing playful or casual. Cards and containers use lg radius (1rem / 16px) to echo button styling and create visual cohesion. Input fields and form controls use DEFAULT radius (0.5rem / 8px) to signal their functional, utilitarian purpose and distinguish them from larger containers. Badges and pills use full radius (9999px) to

Components

Action Elements Buttons are the primary call-to-action mechanism and come in two variants: primary (solid blue background, white text, lg radius, 48px height, 12px 24px padding) and secondary (transparent background, blue text, 2px blue border, lg radius, 48px height, 12px 24px padding). Primary buttons use {colors.primary} (#066fd1) and transition to #0557b8 on hover with a 200ms ease-in-out animation. Secondary buttons use a transparent background with a 2px border and transition to {colors.primary-container} (#e0f0ff) on hover. Both variants apply {elevation.md} (0 4px 12px rgba(0, 0, 0, 0.08)) on hover to indicate elevation. Active/pressed state uses #003d99 for primary buttons. Button text always uses {typography.label-md} (14px, 600 weight) and is center-aligned with no text-tran