Tremor

Overview

Tremor is a production-ready React component library designed for developers building data visualization dashboards and analytics interfaces. It serves engineering teams and product builders who need accessible, copy-paste-ready components styled with Tailwind CSS, eliminating the friction of building charts and dashboards from scratch. The aesthetic is "Functional Minimalism"—a clean, light-first design philosophy that prioritizes clarity and information hierarchy over ornamentation. The UI evokes trust and precision: a professional dashboard aesthetic where data speaks louder than decoration, and every pixel serves a purpose. The brand personality is pragmatic, developer-friendly, and uncompromising on accessibility. Tremor's voice is direct and action-oriented: "Copy the component, paste it into your project, customize with Tailwind utilities." Example: "Build a revenue dashboard in 15 minutes with pre-built chart components and zero styling overhead."

Colors

The color system is anchored in a clean, light-first palette optimized for data visualization and dashboard contexts. Primary (#1e40af, a professional blue) is used exclusively for interactive elements—buttons, links, active tabs, and focus states—creating a clear visual affordance for actionable items. Secondary (#f96379, a warm coral-red) provides accent emphasis for alerts, highlights, and secondary CTAs, introducing warmth without compromising legibility. Tertiary (#9cd2bb, a soft sage-green) supports status indicators and positive confirmations. The surface stack ranges from pure white (#ffffff) for primary content areas to light grays (#f5f5f5 for dim, #ececec for container) for subtle layering and visual separation. On-surface text is pure black (#000000) for maximum contrast and re

Typography

The type system uses Geist Sans, a modern geometric sans-serif optimized for screen rendering and data-dense interfaces. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major headings; Headline-lg (40px, 700 weight) is reserved for page titles and section breaks. Body-md (16px, 400 weight, 24px line-height) is the workhorse for dashboard content, charts, and data tables—the 1.5x line-height ratio ensures readability in dense information layouts. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and tab navigation, creating visual distinction from body copy. For small UI text (badges, metadata), Label-sm (12px, 500 weight) maintains legibility at reduced scale. All interactive text (buttons, links) receives a 0.15s cubic-bezier(0.4,

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered with symmetric gutters of 24px on desktop. Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for component internal padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero spacing. Dashboard containers use md spacing (24px) for consistent rhythm between cards and charts. The grid is fluid below 768px, collapsing to single-column layouts with reduced gutters (12px). Hero sections use lg spacing (40px) above and below the headline to create breathing room. Form fields and inputs are padded with sm (12px) internally, with md (24px) vertical separation between field groups. Cards maintain md (24px) padding uniformly, ensuring vis

Elevation & Depth

Tremor uses a subtle, flat-first elevation system that avoids heavy shadows, maintaining the clean aesthetic. Level 1 (Base): no shadow; elements sit flush on the surface. Level 2 (Standard Card): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), a barely-perceptible lift that defines card boundaries without visual weight. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied on card hover or modal overlays to create depth. Level 4 (Modal/Overlay): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), reserved for full-screen modals and dropdowns. Buttons use Level 2 shadows by default

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are applied consistently to create a modern, approachable aesthetic without sacrificing clarity. Buttons and primary interactive elements use md radius (0.75rem / 12px), balancing softness with professional appearance. Cards and containers use lg radius (1rem / 16px), creating visual distinction from buttons while maintaining cohesion. Input fields and form controls use DEFAULT radius (0.5rem / 8px), a subtle rounding that feels native to web forms. Badges and small UI elements use full radius (9999px) for pill-shaped affordance. The rat

Components

Action Elements Buttons are the primary interactive affordance. The button-primary component uses primary blue (#1e40af) with white text, md radius (12px), and 12px 24px padding, achieving a 48px height. On hover, the background darkens to #1e3a8a (a deeper blue) with a smooth 0.15s transition. On active/pressed state, apply an inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.15)) to convey depression. The button-secondary variant uses a light gray background (surface-container-high, #e9ecef) with a 1px outline-variant border, maintaining the same dimensions and radius. Ghost buttons (button-ghost) have transparent backgrounds with primary text; on hover, they reveal a subtle surface-container-low background (#f5f5f5). All buttons use label-md typography (14px, 600 weight) and support a l

Do's and Don'ts

**Do**

• Do use primary blue (#1e40af) exclusively for interactive elements—buttons, links, active states—to create a consistent, scannable interface.
• Do apply md (24px) spacing between major sections and card groups to establish visual rhythm and prevent cognitive overload in data-dense layouts.
• Do use label-md (14px, 600 weight) for all button and form label text to maintain hierarchy and ensure 16px minimum font size on mobile.
• Do apply the 3px focus ring (primary-container, #dbeafe) to all interactive elements to meet WCAG AAA contrast and accessibility standards.
• Do use the Level 2 shadow (0 1px 2px rgba(0, 0, 0, 0.06)) as the default card shadow; reserve Level 3+ for hover and modal states to avoid visual noise.

**Don't**

• Don't use secondary (#f96379) or tertiary (#9cd2bb) for primary CTAs; reserve them for alerts, accents, and status indicators only.
• Don't apply rounded corners smaller than DEFAULT (8px) to buttons or cards; the brand uses soft-technical shapes, not sharp corners.
• Don't mix Geist Sans with system fonts or serif typefaces; all UI text must use Geist Sans for visual consistency and data-visualization legibility.
• Don't use shadows heavier than Level 3 (0 4px 12px rgba(0, 0, 0, 0.08)) on standard cards; the aesthetic is flat-first, with shadows as supplementary depth cues.
• Don't reduce padding below sm (12px) on form fields or cards; the brand prioritizes breathing room and readability over density.