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

Badge

A small status or label badge with color variants, dot indicator, and removal.

Data displaystatuslabelindicator
Workbench

Rendering Badge…

Installation

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

npx mlola-ui add badge

Usage

TSX
import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <div className="ml-cluster">
      <Badge>Draft</Badge>
      <Badge tone="success" dot>Live</Badge>
      <Badge tone="warning" variant="outline">Review</Badge>
      <Badge tone="danger" variant="solid">Failed</Badge>
    </div>
  );
}

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-cluster">
  <span class="ml-badge" data-tone="neutral" data-variant="soft" data-size="md"><span class="ml-badge-label">Draft</span></span>
  <span class="ml-badge" data-tone="success" data-variant="soft" data-size="md"><span class="ml-badge-dot" aria-hidden="true"></span><span class="ml-badge-label">Live</span></span>
  <span class="ml-badge" data-tone="warning" data-variant="outline" data-size="md"><span class="ml-badge-label">Review</span></span>
  <span class="ml-badge" data-tone="danger" data-variant="solid" data-size="md"><span class="ml-badge-label">Failed</span></span>
</div>

Options

PropValuesDefault
sizesmmdlgmd
toneneutralprimaryinfosuccesswarningdangerneutral
variantsoftsolidoutlinesoft

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-badgedata-size="lg | sm"data-tone="danger | info | primary | success | warning"data-variant="outline | solid"
ml-badge-label—
ml-badge-dot—
ml-badge-remove—

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/icons

Open the standalone preview