Skip to content
Mlola UI
Esc
  • Introduction
  • Theming
  • AI integration
  • All components
  • 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 Notion-style 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 colour 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
  • Data GridA spreadsheet-grade table: virtualised 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
  • 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 centre 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
  • Generative UIRenders a JSON interface a model streams — metrics, charts, tables, alerts, buttons — from the library's own components as it arrives
  • 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, coloured 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
  • 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
  • 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
  • Status IconA work item status as one glyph: backlog, todo, in progress, in review, done and canceled, readable without colour
  • 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 colours 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, colour, undo and presence
GitHubv1.0.0

Components

105 accessible primitives on native CSS, from buttons to AI chat, voice and code review. Each preview is the live component in the theme you have selected.

Actions

Buttons and menus that make something happen.

  • ButtonA versatile button component with multiple variants, sizes, and states
  • Context MenuA right-click menu built for what was clicked, with shortcuts, typeahead, long-press on touch and Shift+F10
  • Dropdown MenuA keyboard-navigable dropdown menu with icons, shortcuts, and danger items
  • ToggleiOS-style switch and button-style toggle with controlled and uncontrolled modes

Forms

Controls for entering and choosing values.

  • CalendarA month grid for one date, a range or several, with min and max, blocked days, two-month view and full keyboard paging
  • CheckboxAn accessible checkbox with label, description, error, and indeterminate state
  • Color PickerA colour 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
  • 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
  • DropzoneDrop, choose or paste files; checked for type, size and count before they are handed over
  • InputText input with variants, sizes, label, hint, and error states
  • Number InputA number field formatted at rest in the reader's locale, with steppers you can hold, arrows, bounds and precision
  • OTP InputA one-time code as separate boxes that type, delete, paste and autofill like one field
  • Radio GroupA native radio group with vertical and horizontal orientations
  • Segmented ControlSingle-choice control that swaps between a small set of options
  • SelectCustom searchable dropdown with option groups, keyboard navigation, and clearing
  • SliderAn accessible single-value slider with keyboard support and pointer dragging
  • Tag InputMany short values in one field: add with Enter or a comma, paste lists, remove with Backspace, with suggestions and validation
  • TextareaMulti-line text that grows as it is written, with a counter near its limit
  • Time PickerA time field of typeable spinbuttons in 12- or 24-hour time, with a quick list; the value is always HH:MM

Data display

People, status and records at a glance.

  • Activity HeatmapActivity by day in GitHub's calendar grid, with quantile shading, a keyboard grid and hover detail
  • AvatarUser avatar with image, initials fallback, and status indicator
  • BadgeA small status or label badge with color variants, dot indicator, and removal
  • 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
  • Empty StateWhat a screen says when there is nothing to show yet, and the way forward
  • KbdKeys and platform-aware shortcuts: mod+k reads ⌘K on a Mac and Ctrl K elsewhere, spoken as words
  • Priority IconA work item priority as signal bars, with a filled alert for urgent
  • RatingStar rating with exact fractional fill and optional review count
  • Status IconA work item status as one glyph: backlog, todo, in progress, in review, done and canceled, readable without colour
  • TableA compositional data table with sortable columns, striped rows, density sizes, and footer totals
  • TimelineA vertical event timeline with status dots, timestamps, and custom icon nodes
  • Virtual ListA long list that renders only what is on screen, measures rows of any height and loads more near the end

Feedback

What happened, what is happening, and what is loading.

  • AlertA status banner with variants, dismiss action, and optional action slot
  • ProgressHorizontal and circular progress indicators with variants and indeterminate mode
  • SkeletonShimmering loading placeholders for text, avatars, and cards
  • ToastToast notification system with an imperative API, auto-dismiss, and stacking

Navigation

Moving between pages, views and commands.

  • BreadcrumbNavigation breadcrumb trail with custom separators and responsive collapse
  • Command MenuThe ⌘K palette: ranked commands with shortcuts, keyboard navigation and matched letters bolded
  • PaginationPage navigation with prev/next, page numbers, and ellipsis for large ranges
  • StepperProgress through a flow of steps, horizontal or vertical, clickable, condensing to "Step 2 of 4" when narrow
  • TabsTabbed interface with underline, pills, and enclosed variants

Overlays

Layers that sit above the page.

  • Hover CardA preview card that opens when the pointer rests on a link or name, and on keyboard focus
  • ModalAccessible dialog overlay with focus trap, escape handling, and scroll lock
  • PopoverA non-modal layer anchored to its trigger that flips and shifts to stay on screen
  • SheetA slide-over panel from any screen edge with header, body, and footer sections
  • 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

Layout

Structure: disclosure, panes and space.

  • AccordionA collapsible content panel supporting single and multiple open modes
  • App ShellA resizable, foldable sidebar with sections and items that becomes a drawer on small screens
  • ResizableTwo panes and a keyboard-accessible handle between them

AI chat

Conversation, composing and streaming answers.

  • ConversationA message log that follows new content and offers a way back when the reader scrolls up
  • MessageOne conversation turn with actions, feedback, answer versions and a facts line
  • Model PickerChoose a model by speed, reasoning depth and context window, built on Select
  • Prompt InputA growing composer that sends on Enter, never mid-IME, with attachments, tools and a stop button
  • Selection ActionsSelect text and AI actions appear above it: rewrite, explain, shorten
  • Streaming TextText that arrives in pieces, revealed at a steady reading rate that catches up on bursts, with fresh runs fading in
  • SuggestionsPrompt starters and follow-ups as a wrapping or swipeable row

AI agents

Reasoning, tools, plans, sources and trust.

  • CitationNumbered inline sources with hover previews and a matching source list
  • 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 MeterHow full the context window is and on what, warning before answers get cut short
  • Eval GridTest cases against model and prompt variants: pass rates, scores, latency and cost, disagreements, and each answer diffed against the expected one
  • Generative UIRenders a JSON interface a model streams — metrics, charts, tables, alerts, buttons — from the library's own components as it arrives
  • Model CompareThe same prompt streamed to several models side by side, blind by default, with time to first token, speed and a vote
  • Prompt PlaygroundA system prompt and a template whose variables become fields, with model settings, saved versions and a run history
  • Suggested EditAn AI rewrite shown as word-level tracked changes, each accepted or rejected on its own or all at once
  • Task ListAn agent's plan as it runs: status per step, nested subtasks, progress announced as it changes
  • ThinkingA model's reasoning with a live timer that folds into “Thought for 8s”, plus shimmer, dots and orbit indicators
  • Tool CallA model's tool use as an expandable card, with input, output, timing and human approval
  • 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

Voice & presence

The assistant's face and voice.

  • BotAn expressive companion whose body morphs between shapes on springs and whose face carries the assistant's state
  • OrbThe assistant's presence: idle, listening, thinking and speaking, coloured by the theme and driven by live audio
  • TranscriptA call or meeting transcript that follows playback word by word, with speakers, search and a summary
  • Voice WaveMirrored audio bars for microphone input or the assistant's voice, fed by a live meter

Code

Code, diffs and changes for developer tools.

  • Code BlockHighlighted code with a filename, line numbers, marked lines and copy; its palette is Mlola's contrast-solved text roles
  • Commit HistoryA git log with a branch graph, refs, CI checks, authors and relative times
  • Diff ViewUnified or split file diffs from before/after text or a patch, with in-line change marks and folded unchanged lines
  • Editor TabsOpen files across an editor: unsaved dots, git status, preview tabs and names that disambiguate twins
  • 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
  • Source ControlBranch sync state, staged and unstaged changes, and a commit box whose message a model can stream in
  • TerminalCommand output with ANSI colours mapped to theme roles, exit status, follow-on-output scrolling and an optional input with history

Canvas

Infinite canvases, whiteboards and node editors.

  • 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
  • MinimapThe whole canvas in miniature, with the view outlined; press or drag to move there
  • Node GraphA node editor for agent workflows: drag nodes, connect ports, refuse loops and watch a run flow through the edges
  • WhiteboardShapes, arrows, freehand, text and sticky notes on an infinite canvas, with selection, resize, colour, undo and presence

Editor

Rich text and block editors, and the tools around writing.

  • Block EditorA Notion-style block editor: slash commands, Markdown shortcuts, to-dos, callouts, drag to reorder, a selection bubble and AI that streams into the page
  • 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

Workflow

Boards, properties and filters for tracking work.

  • Data GridA spreadsheet-grade table: virtualised rows, pinned and resizable columns, sorting, cell ranges, inline editing, copy and paste, totals
  • Filter BarFilters as editable sentences, "Status is In progress", with an applyFilters helper
  • GanttA roadmap timeline: grouped bars you drag and resize, milestones, dependency arrows, today and three zoom levels
  • KanbanColumns of cards that move by drag or keyboard, with room-making drops, edge scrolling, folding columns and limits
  • Property PickerA small trigger that opens a searchable menu to set a property: status, priority, assignee or labels, one or many
  • 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

Charts

Lines, bars, donuts and sparklines drawn in native SVG from theme tokens.

  • Bar ChartBars per category, grouped or stacked, standing up or lying across, with rounded ends and keyboard reading
  • ChartThe shared chart frame: scales, nice ticks, monotone curves, stacking, legend, tooltip and an accessible data table
  • Donut ChartParts of a whole as a ring whose centre reads the slice you point at
  • Funnel ChartStages of a funnel with step conversion and drop-off between each
  • Line ChartLines and areas over a sequence, stacked or overlaid, with a crosshair, keyboard reading and dashed targets
  • Radar ChartSeveral series compared across the same qualities on a spider web, with highlighting and a tooltip
  • Scatter ChartPoints or bubbles on two measures, with series, keyboard stepping and a tooltip
  • SparklineA tiny axis-free trend line for stat cards, tables and lists
  • TreemapNested rectangles sized by value, laid out as squares as far as possible