Skip to content
Mlola UI
  • Introduction
  • Theming
  • Quality
  • Versions
  • Coding agents
  • Mlola Render
  • AI integration
  • All components
  • Migrate from shadcn/ui
  • Workbench
  • Icons
  • AccordionA collapsible content panel supporting single and multiple open modes
  • Activity HeatmapActivity by day in GitHub's calendar grid, with quantile shading, a keyboard grid and hover detail
  • AlertA status banner with variants, dismiss action, and optional action slot
  • App ShellA resizable, foldable sidebar with sections and items that becomes a drawer on small screens
  • AvatarUser avatar with image, initials fallback, and status indicator
  • BadgeA small status or label badge with color variants, dot indicator, and removal
  • Bar ChartBars per category, grouped or stacked, standing up or lying across, with rounded ends and keyboard reading
  • Block EditorA block editor: slash commands, Markdown shortcuts, to-dos, callouts, drag to reorder, a selection bubble and AI that streams into the page
  • BotAn expressive companion whose body morphs between shapes on springs and whose face carries the assistant's state
  • BreadcrumbNavigation breadcrumb trail with custom separators and responsive collapse
  • ButtonA versatile button component with multiple variants, sizes, and states
  • CalendarA month grid for one date, a range or several, with min and max, blocked days, two-month view and full keyboard paging
  • CanvasAn infinite surface to pan and zoom, with a dotted grid, zoom controls, floating panels and collaborators' cursors
  • Canvas ToolbarA floating tool palette with single-key shortcuts, roving focus and room for undo and redo
  • CardA compound card with header, content, and footer slots in four surface variants
  • CarouselOne slide at a time with previous/next controls and a roving dot group
  • ChartThe shared chart frame: scales, nice ticks, monotone curves, stacking, legend, tooltip and an accessible data table
  • CheckboxAn accessible checkbox with label, description, error, and indeterminate state
  • CitationNumbered inline sources with hover previews and a matching source list
  • Code BlockHighlighted code with a filename, line numbers, marked lines and copy; its palette is Mlola's contrast-solved text roles
  • Color PickerA color field with a saturation area, hue and opacity, hex, rgb or oklch, an eyedropper, presets and a contrast check
  • ComboboxA text field that filters a long list as you type, with grouping, descriptions and creating what is missing
  • Command MenuThe ⌘K palette: ranked commands with shortcuts, keyboard navigation and matched letters bolded
  • Commit HistoryA git log with a branch graph, refs, CI checks, authors and relative times
  • Confidence TextAn answer that marks where the model is unsure, with the confidence spoken to screen readers
  • Context CardsThe passages a model retrieved before answering, with source, location, relevance and the query's words marked
  • Context MenuA right-click menu built for what was clicked, with shortcuts, typeahead, long-press on touch and Shift+F10
  • Context MeterHow full the context window is and on what, warning before answers get cut short
  • ConversationA message log that follows new content and offers a way back when the reader scrolls up
  • Copy ButtonCopies a value to the clipboard and confirms it, with the outcome spoken to screen readers and a refusal explained
  • Data GridA spreadsheet-grade table: virtualized rows, pinned and resizable columns, sorting, cell ranges, inline editing, copy and paste, totals
  • Date PickerA date field that opens a calendar, for one date or a range with presets, shown in the reader's format and stored as ISO
  • DialA value chosen by turning a knob, with a press on the ring to jump, a hold to turn by finger, Escape to undo a turn and the keys of a slider
  • Diff ViewUnified or split file diffs from before/after text or a patch, with in-line change marks and folded unchanged lines
  • Donut ChartParts of a whole as a ring whose center reads the slice you point at
  • Dropdown MenuA keyboard-navigable dropdown menu with icons, shortcuts, and danger items
  • DropzoneDrop, choose or paste files; checked for type, size and count before they are handed over
  • Editor TabsOpen files across an editor: unsaved dots, git status, preview tabs and names that disambiguate twins
  • Empty StateWhat a screen says when there is nothing to show yet, and the way forward
  • Eval GridTest cases against model and prompt variants: pass rates, scores, latency and cost, disagreements, and each answer diffed against the expected one
  • File ChangesAn agent's changed files as one summary line that opens into each file's status and size of change
  • File TreeA project's files as a keyboard-first tree with folder guides, file-type badges and git status
  • Filter BarFilters as editable sentences, "Status is In progress", with an applyFilters helper
  • Funnel ChartStages of a funnel with step conversion and drop-off between each
  • GanttA roadmap timeline: grouped bars you drag and resize, milestones, dependency arrows, today and three zoom levels
  • Hover CardA preview card that opens when the pointer rests on a link or name, and on keyboard focus
  • InputText input with variants, sizes, label, hint, and error states
  • KanbanColumns of cards that move by drag or keyboard, with room-making drops, edge scrolling, folding columns and limits
  • KbdKeys and platform-aware shortcuts: mod+k reads ⌘K on a Mac and Ctrl K elsewhere, spoken as words
  • Line ChartLines and areas over a sequence, stacked or overlaid, with a crosshair, keyboard reading and dashed targets
  • MessageOne conversation turn with actions, feedback, answer versions and a facts line
  • MinimapThe whole canvas in miniature, with the view outlined; press or drag to move there
  • ModalAccessible dialog overlay with focus trap, escape handling, and scroll lock
  • Model CompareThe same prompt streamed to several models side by side, blind by default, with time to first token, speed and a vote
  • Model PickerChoose a model by speed, reasoning depth and context window, built on Select
  • Node GraphA node editor for agent workflows: drag nodes, connect ports, refuse loops and watch a run flow through the edges
  • Number InputA number field formatted at rest in the reader's locale, with steppers you can hold, arrows, bounds and precision
  • OrbThe assistant's presence: idle, listening, thinking and speaking, colored by the theme and driven by live audio
  • OTP InputA one-time code as separate boxes that type, delete, paste and autofill like one field
  • PaginationPage navigation with prev/next, page numbers, and ellipsis for large ranges
  • Password InputA password field with a show and hide toggle and, when choosing a new password, a meter that says how strong it is and what would make it stronger
  • PopoverA non-modal layer anchored to its trigger that flips and shifts to stay on screen
  • Priority IconA work item priority as signal bars, with a filled alert for urgent
  • ProgressHorizontal and circular progress indicators with variants and indeterminate mode
  • Prompt InputA growing composer that sends on Enter, never mid-IME, with attachments, tools and a stop button
  • Prompt PlaygroundA system prompt and a template whose variables become fields, with model settings, saved versions and a run history
  • Property PickerA small trigger that opens a searchable menu to set a property: status, priority, assignee or labels, one or many
  • Radar ChartSeveral series compared across the same qualities on a spider web, with highlighting and a tooltip
  • Radio GroupA native radio group with vertical and horizontal orientations
  • RatingStar rating with exact fractional fill and optional review count
  • Render ProDraws the interface an agent composed from the Mlola Render Pro catalog: every free component, plus charts and a data grid a person can edit
  • Render SurfaceDraws the interface an agent composed as A2UI messages, checked against the Mlola Render catalog and built from Mlola components
  • ResizableTwo panes and a keyboard-accessible handle between them
  • Rich Text EditorA modern rich text editor: headings, marks, lists, quotes, code and links, with Markdown shortcuts as you type and paste cleaned to what it owns
  • Scatter ChartPoints or bubbles on two measures, with series, keyboard stepping and a tooltip
  • SchedulerA day, three-day and week calendar where events are drawn, moved and resized by pointer or keyboard, with overlaps laid out side by side
  • Segmented ControlSingle-choice control that swaps between a small set of options
  • SelectCustom searchable dropdown with option groups, keyboard navigation, and clearing
  • Selection ActionsSelect text and AI actions appear above it: rewrite, explain, shorten
  • SheetA slide-over panel from any screen edge with header, body, and footer sections
  • SkeletonShimmering loading placeholders for text, avatars, and cards
  • SliderAn accessible single-value slider with keyboard support and pointer dragging
  • Source ControlBranch sync state, staged and unstaged changes, and a commit box whose message a model can stream in
  • SparklineA tiny axis-free trend line for stat cards, tables and lists
  • SpinnerWork in progress whose end is unknown, drawn in the color of the text around it and named for screen readers when it stands alone
  • StatOne number with what it measures, how it moved and a small trend line, for the top of a dashboard
  • Status IconA work item status as one glyph: backlog, todo, in progress, in review, done and canceled, readable without color
  • StepperProgress through a flow of steps, horizontal or vertical, clickable, condensing to "Step 2 of 4" when narrow
  • Streaming TextText that arrives in pieces, revealed at a steady reading rate that catches up on bursts, with fresh runs fading in
  • Suggested EditAn AI rewrite shown as word-level tracked changes, each accepted or rejected on its own or all at once
  • SuggestionsPrompt starters and follow-ups as a wrapping or swipeable row
  • TableA compositional data table with sortable columns, striped rows, density sizes, and footer totals
  • TabsTabbed interface with underline, pills, and enclosed variants
  • Tag InputMany short values in one field: add with Enter or a comma, paste lists, remove with Backspace, with suggestions and validation
  • Task ListAn agent's plan as it runs: status per step, nested subtasks, progress announced as it changes
  • TerminalCommand output with ANSI colors mapped to theme roles, exit status, follow-on-output scrolling and an optional input with history
  • TextareaMulti-line text that grows as it is written, with a counter near its limit
  • ThinkingA model's reasoning with a live timer that folds into “Thought for 8s”, plus shimmer, dots and orbit indicators
  • Time PickerA time field of typeable spinbuttons in 12- or 24-hour time, with a quick list; the value is always HH:MM
  • TimelineA vertical event timeline with status dots, timestamps, and custom icon nodes
  • ToastToast notification system with an imperative API, auto-dismiss, and stacking
  • ToggleiOS-style switch and button-style toggle with controlled and uncontrolled modes
  • Tool CallA model's tool use as an expandable card, with input, output, timing and human approval
  • TooltipHover and focus tooltip with four placements, delay, and arrow
  • TourA guided product tour that spotlights parts of the page step by step, with keyboard control and a focus trap
  • Trace ViewerOne agent run span by span: a tree on a timeline with the slow and failing steps marked, totals for time, tokens and cost, and each span's input and output
  • TranscriptA call or meeting transcript that follows playback word by word, with speakers, search and a summary
  • TreemapNested rectangles sized by value, laid out as squares as far as possible
  • Virtual ListA long list that renders only what is on screen, measures rows of any height and loads more near the end
  • Voice WaveMirrored audio bars for microphone input or the assistant's voice, fed by a live meter
  • WhiteboardShapes, arrows, freehand, text and sticky notes on an infinite canvas, with selection, resize, color, undo and presence
GitHubv1.14.3Studio

Activity Heatmap

Activity by day in GitHub's calendar grid, with quantile shading, a keyboard grid and hover detail.

Data displaydatachartcalendar
Workbench

Rendering Activity Heatmap…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add activity-heatmap

Usage

TSX
import { ActivityHeatmap } from "@/components/ui/activity-heatmap";

// Counts by day; days not listed count as zero.
const data = [
  { date: "2026-09-21", count: 3 },
  { date: "2026-09-22", count: 7 },
  { date: "2026-09-24", count: 1 },
  { date: "2026-09-25", count: 12 },
];

export default function Example() {
  return <ActivityHeatmap data={data} end="2026-09-26" weeks={8} unit="commits" label="Commits in the last eight weeks" />;
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML
<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, exactly. It needs no script: write it from any language or template.

HTML
<div class="ml-heatmap" data-tone="primary" style="--ml-heatmap-weeks:8">
  <div class="ml-heatmap-grid" role="grid" aria-label="Commits in the last eight weeks" aria-readonly="true">
    <div class="ml-heatmap-months" aria-hidden="true">
      <span class="ml-heatmap-month" style="grid-column:2">Aug</span>
      <span class="ml-heatmap-month" style="grid-column:7">Sep</span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:2"><span>Mon</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Monday, August 3, 2026" tabindex="-1" style="grid-column:2;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Monday, August 10, 2026" tabindex="-1" style="grid-column:3;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Monday, August 17, 2026" tabindex="-1" style="grid-column:4;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Monday, August 24, 2026" tabindex="-1" style="grid-column:5;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Monday, August 31, 2026" tabindex="-1" style="grid-column:6;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Monday, September 7, 2026" tabindex="-1" style="grid-column:7;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Monday, September 14, 2026" tabindex="-1" style="grid-column:8;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="1" aria-label="3 commits on Monday, September 21, 2026" tabindex="-1" style="grid-column:9;grid-row:2"></span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:3"><span aria-hidden="true" data-hidden="true">Tue</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Tuesday, August 4, 2026" tabindex="-1" style="grid-column:2;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Tuesday, August 11, 2026" tabindex="-1" style="grid-column:3;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Tuesday, August 18, 2026" tabindex="-1" style="grid-column:4;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Tuesday, August 25, 2026" tabindex="-1" style="grid-column:5;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Tuesday, September 1, 2026" tabindex="-1" style="grid-column:6;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Tuesday, September 8, 2026" tabindex="-1" style="grid-column:7;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Tuesday, September 15, 2026" tabindex="-1" style="grid-column:8;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="2" aria-label="7 commits on Tuesday, September 22, 2026" tabindex="-1" style="grid-column:9;grid-row:3"></span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:4"><span>Wed</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Wednesday, August 5, 2026" tabindex="-1" style="grid-column:2;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Wednesday, August 12, 2026" tabindex="-1" style="grid-column:3;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Wednesday, August 19, 2026" tabindex="-1" style="grid-column:4;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Wednesday, August 26, 2026" tabindex="-1" style="grid-column:5;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Wednesday, September 2, 2026" tabindex="-1" style="grid-column:6;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Wednesday, September 9, 2026" tabindex="-1" style="grid-column:7;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Wednesday, September 16, 2026" tabindex="-1" style="grid-column:8;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Wednesday, September 23, 2026" tabindex="-1" style="grid-column:9;grid-row:4"></span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:5"><span aria-hidden="true" data-hidden="true">Thu</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Thursday, August 6, 2026" tabindex="-1" style="grid-column:2;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Thursday, August 13, 2026" tabindex="-1" style="grid-column:3;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Thursday, August 20, 2026" tabindex="-1" style="grid-column:4;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Thursday, August 27, 2026" tabindex="-1" style="grid-column:5;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Thursday, September 3, 2026" tabindex="-1" style="grid-column:6;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Thursday, September 10, 2026" tabindex="-1" style="grid-column:7;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Thursday, September 17, 2026" tabindex="-1" style="grid-column:8;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="1" aria-label="1 commits on Thursday, September 24, 2026" tabindex="-1" style="grid-column:9;grid-row:5"></span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:6"><span>Fri</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Friday, August 7, 2026" tabindex="-1" style="grid-column:2;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Friday, August 14, 2026" tabindex="-1" style="grid-column:3;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Friday, August 21, 2026" tabindex="-1" style="grid-column:4;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Friday, August 28, 2026" tabindex="-1" style="grid-column:5;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Friday, September 4, 2026" tabindex="-1" style="grid-column:6;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Friday, September 11, 2026" tabindex="-1" style="grid-column:7;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Friday, September 18, 2026" tabindex="-1" style="grid-column:8;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="3" aria-label="12 commits on Friday, September 25, 2026" tabindex="-1" style="grid-column:9;grid-row:6"></span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:7"><span aria-hidden="true" data-hidden="true">Sat</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Saturday, August 8, 2026" tabindex="-1" style="grid-column:2;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Saturday, August 15, 2026" tabindex="-1" style="grid-column:3;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Saturday, August 22, 2026" tabindex="-1" style="grid-column:4;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Saturday, August 29, 2026" tabindex="-1" style="grid-column:5;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Saturday, September 5, 2026" tabindex="-1" style="grid-column:6;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Saturday, September 12, 2026" tabindex="-1" style="grid-column:7;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Saturday, September 19, 2026" tabindex="-1" style="grid-column:8;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Saturday, September 26, 2026" tabindex="0" style="grid-column:9;grid-row:7"></span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:8"><span aria-hidden="true" data-hidden="true">Sun</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Sunday, August 9, 2026" tabindex="-1" style="grid-column:2;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Sunday, August 16, 2026" tabindex="-1" style="grid-column:3;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Sunday, August 23, 2026" tabindex="-1" style="grid-column:4;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Sunday, August 30, 2026" tabindex="-1" style="grid-column:5;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Sunday, September 6, 2026" tabindex="-1" style="grid-column:6;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Sunday, September 13, 2026" tabindex="-1" style="grid-column:7;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commits on Sunday, September 20, 2026" tabindex="-1" style="grid-column:8;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" data-outside="true" aria-hidden="true" style="grid-column:9;grid-row:8"></span>
    </div>
  </div>
  <div class="ml-heatmap-footer">
    <span class="ml-heatmap-caption">23 commits over 4 active days</span>
    <span class="ml-heatmap-legend" aria-hidden="true">Less<span class="ml-heatmap-cell" data-level="0"></span><span class="ml-heatmap-cell" data-level="1"></span><span class="ml-heatmap-cell" data-level="2"></span><span class="ml-heatmap-cell" data-level="3"></span><span class="ml-heatmap-cell" data-level="4"></span>More</span>
  </div>
</div>

Options

PropValuesDefault
toneprimaryinfosuccesswarningprimary

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

ClassAttributes
ml-heatmapdata-tone="info | success | warning"
ml-heatmap-grid—
ml-heatmap-months—
ml-heatmap-row—
ml-heatmap-month—
ml-heatmap-weekday—
ml-heatmap-celldata-activedata-level="1 | 2 | 3 | 4"data-outside
ml-heatmap-tooltip—
ml-heatmap-footer—
ml-heatmap-legend—
ml-heatmap-caption—

Accessibility and theming

  • Semantic elements, accessible names and state relationships are part of the contract.
  • Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
  • Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
  • Reduced motion and forced colors keep meaning and operation.

Dependencies

Installed alongside this component. No third-party UI runtime is ever added.

  • @mlola-ui/behavior

Open the standalone preview