# Mlola UI

> A theme-driven UI system for React and plain HTML: native CSS with no utility framework, owned behavior, and a theme engine that solves contrast. Components are copied into your project with a CLI. The core is free under MIT; Mlola Pro adds AI, code, canvas and chart components, blocks, pages and templates.

Version 1.1.4. Every component page is also Markdown at its URL plus `.md`, and https://ui.mlola.com/llms-full.txt has everything in one file.

Free items can be installed by anyone. Items marked "Requires Mlola Pro" need a license; their source is not published.

## Docs

- [Introduction](https://ui.mlola.com/docs): Install Mlola UI, add components and pick a theme, in React or plain HTML.
- [Theming](https://ui.mlola.com/docs/theming): Five canonical themes and a brand from one spec; every palette is solved for contrast.
- [Coding agents](https://ui.mlola.com/docs/agents): The agents file and the MCP server that tell Claude Code, Cursor and Codex what exists.
- [AI integration](https://ui.mlola.com/docs/ai): Wiring the chat, voice and agent components to any model.
- [Quality](https://ui.mlola.com/docs/quality): What every change is checked against, with the numbers computed from the source.
- [Versions and stability](https://ui.mlola.com/docs/versions): What semantic versioning covers from 1.0, and how updates reach copied source.
- [Migrating from shadcn/ui](https://ui.mlola.com/docs/migrate-from-shadcn): Component by component, and running both while you move.

## Get started

- `npx mlola-ui init` writes the config and the stylesheet entry, installs the engine, and tells coding agents about Mlola (AGENTS.md, an MCP config).
- `npx mlola-ui add button card input` copies components and installs the packages they import.
- Import the stylesheet once and set `data-theme` (graphite, atelier, machined, aerogel or nordic) on the root element.

## Components (free, MIT, 54)

- [Accordion](https://ui.mlola.com/docs/components/accordion.md): A collapsible content panel supporting single and multiple open modes.
- [Alert](https://ui.mlola.com/docs/components/alert.md): A status banner with variants, dismiss action, and optional action slot.
- [Avatar](https://ui.mlola.com/docs/components/avatar.md): User avatar with image, initials fallback, and status indicator.
- [Badge](https://ui.mlola.com/docs/components/badge.md): A small status or label badge with color variants, dot indicator, and removal.
- [Breadcrumb](https://ui.mlola.com/docs/components/breadcrumb.md): Navigation breadcrumb trail with custom separators and responsive collapse.
- [Button](https://ui.mlola.com/docs/components/button.md): A versatile button component with multiple variants, sizes, and states.
- [Card](https://ui.mlola.com/docs/components/card.md): A compound card with header, content, and footer slots in four surface variants.
- [Carousel](https://ui.mlola.com/docs/components/carousel.md): One slide at a time with previous/next controls and a roving dot group.
- [Checkbox](https://ui.mlola.com/docs/components/checkbox.md): An accessible checkbox with label, description, error, and indeterminate state.
- [Command Menu](https://ui.mlola.com/docs/components/command-menu.md): The ⌘K palette: ranked commands with shortcuts, keyboard navigation and matched letters bolded.
- [Dropdown Menu](https://ui.mlola.com/docs/components/dropdown-menu.md): A keyboard-navigable dropdown menu with icons, shortcuts, and danger items.
- [Dropzone](https://ui.mlola.com/docs/components/dropzone.md): Drop, choose or paste files; checked for type, size and count before they are handed over.
- [Empty State](https://ui.mlola.com/docs/components/empty-state.md): What a screen says when there is nothing to show yet, and the way forward.
- [Input](https://ui.mlola.com/docs/components/input.md): Text input with variants, sizes, label, hint, and error states.
- [Kbd](https://ui.mlola.com/docs/components/kbd.md): Keys and platform-aware shortcuts: mod+k reads ⌘K on a Mac and Ctrl K elsewhere, spoken as words.
- [Modal](https://ui.mlola.com/docs/components/modal.md): Accessible dialog overlay with focus trap, escape handling, and scroll lock.
- [OTP Input](https://ui.mlola.com/docs/components/otp-input.md): A one-time code as separate boxes that type, delete, paste and autofill like one field.
- [Pagination](https://ui.mlola.com/docs/components/pagination.md): Page navigation with prev/next, page numbers, and ellipsis for large ranges.
- [Popover](https://ui.mlola.com/docs/components/popover.md): A non-modal layer anchored to its trigger that flips and shifts to stay on screen.
- [Progress](https://ui.mlola.com/docs/components/progress.md): Horizontal and circular progress indicators with variants and indeterminate mode.
- [Radio Group](https://ui.mlola.com/docs/components/radio-group.md): A native radio group with vertical and horizontal orientations.
- [Rating](https://ui.mlola.com/docs/components/rating.md): Star rating with exact fractional fill and optional review count.
- [Resizable](https://ui.mlola.com/docs/components/resizable.md): Two panes and a keyboard-accessible handle between them.
- [Segmented Control](https://ui.mlola.com/docs/components/segmented-control.md): Single-choice control that swaps between a small set of options.
- [Select](https://ui.mlola.com/docs/components/select.md): Custom searchable dropdown with option groups, keyboard navigation, and clearing.
- [Sheet](https://ui.mlola.com/docs/components/sheet.md): A slide-over panel from any screen edge with header, body, and footer sections.
- [Skeleton](https://ui.mlola.com/docs/components/skeleton.md): Shimmering loading placeholders for text, avatars, and cards.
- [Slider](https://ui.mlola.com/docs/components/slider.md): An accessible single-value slider with keyboard support and pointer dragging.
- [Table](https://ui.mlola.com/docs/components/table.md): A compositional data table with sortable columns, striped rows, density sizes, and footer totals.
- [Tabs](https://ui.mlola.com/docs/components/tabs.md): Tabbed interface with underline, pills, and enclosed variants.
- [Textarea](https://ui.mlola.com/docs/components/textarea.md): Multi-line text that grows as it is written, with a counter near its limit.
- [Timeline](https://ui.mlola.com/docs/components/timeline.md): A vertical event timeline with status dots, timestamps, and custom icon nodes.
- [Toast](https://ui.mlola.com/docs/components/toast.md): Toast notification system with an imperative API, auto-dismiss, and stacking.
- [Toggle](https://ui.mlola.com/docs/components/toggle.md): iOS-style switch and button-style toggle with controlled and uncontrolled modes.
- [Tooltip](https://ui.mlola.com/docs/components/tooltip.md): Hover and focus tooltip with four placements, delay, and arrow.
- [Activity Heatmap](https://ui.mlola.com/docs/components/activity-heatmap.md): Activity by day in GitHub's calendar grid, with quantile shading, a keyboard grid and hover detail.
- [Calendar](https://ui.mlola.com/docs/components/calendar.md): A month grid for one date, a range or several, with min and max, blocked days, two-month view and full keyboard paging.
- [Date Picker](https://ui.mlola.com/docs/components/date-picker.md): A date field that opens a calendar, for one date or a range with presets, shown in the reader's format and stored as ISO.
- [Time Picker](https://ui.mlola.com/docs/components/time-picker.md): A time field of typeable spinbuttons in 12- or 24-hour time, with a quick list; the value is always HH:MM.
- [Status Icon](https://ui.mlola.com/docs/components/status-icon.md): A work item status as one glyph: backlog, todo, in progress, in review, done and canceled, readable without color.
- [Priority Icon](https://ui.mlola.com/docs/components/priority-icon.md): A work item priority as signal bars, with a filled alert for urgent.
- [Combobox](https://ui.mlola.com/docs/components/combobox.md): A text field that filters a long list as you type, with grouping, descriptions and creating what is missing.
- [Tag Input](https://ui.mlola.com/docs/components/tag-input.md): Many short values in one field: add with Enter or a comma, paste lists, remove with Backspace, with suggestions and validation.
- [Number Input](https://ui.mlola.com/docs/components/number-input.md): A number field formatted at rest in the reader's locale, with steppers you can hold, arrows, bounds and precision.
- [Color Picker](https://ui.mlola.com/docs/components/color-picker.md): A color field with a saturation area, hue and opacity, hex, rgb or oklch, an eyedropper, presets and a contrast check.
- [Stepper](https://ui.mlola.com/docs/components/stepper.md): Progress through a flow of steps, horizontal or vertical, clickable, condensing to "Step 2 of 4" when narrow.
- [Virtual List](https://ui.mlola.com/docs/components/virtual-list.md): A long list that renders only what is on screen, measures rows of any height and loads more near the end.
- [Context Menu](https://ui.mlola.com/docs/components/context-menu.md): A right-click menu built for what was clicked, with shortcuts, typeahead, long-press on touch and Shift+F10.
- [Hover Card](https://ui.mlola.com/docs/components/hover-card.md): A preview card that opens when the pointer rests on a link or name, and on keyboard focus.
- [Tour](https://ui.mlola.com/docs/components/tour.md): A guided product tour that spotlights parts of the page step by step, with keyboard control and a focus trap.
- [App Shell](https://ui.mlola.com/docs/components/app-shell.md): A resizable, foldable sidebar with sections and items that becomes a drawer on small screens.
- [Spinner](https://ui.mlola.com/docs/components/spinner.md): Work in progress whose end is unknown, drawn in the color of the text around it and named for screen readers when it stands alone.
- [Copy Button](https://ui.mlola.com/docs/components/copy-button.md): Copies a value to the clipboard and confirms it, with the outcome spoken to screen readers and a refusal explained.
- [Password Input](https://ui.mlola.com/docs/components/password-input.md): A 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.

## Mlola Pro components (54)

- [Bot](https://ui.mlola.com/docs/components/bot.md): An expressive companion whose body morphs between shapes on springs and whose face carries the assistant's state. Requires Mlola Pro.
- [Citation](https://ui.mlola.com/docs/components/citation.md): Numbered inline sources with hover previews and a matching source list. Requires Mlola Pro.
- [Code Block](https://ui.mlola.com/docs/components/code-block.md): Highlighted code with a filename, line numbers, marked lines and copy; its palette is Mlola's contrast-solved text roles. Requires Mlola Pro.
- [Confidence Text](https://ui.mlola.com/docs/components/confidence-text.md): An answer that marks where the model is unsure, with the confidence spoken to screen readers. Requires Mlola Pro.
- [Context Cards](https://ui.mlola.com/docs/components/context-cards.md): The passages a model retrieved before answering, with source, location, relevance and the query's words marked. Requires Mlola Pro.
- [Context Meter](https://ui.mlola.com/docs/components/context-meter.md): How full the context window is and on what, warning before answers get cut short. Requires Mlola Pro.
- [Conversation](https://ui.mlola.com/docs/components/conversation.md): A message log that follows new content and offers a way back when the reader scrolls up. Requires Mlola Pro.
- [Diff View](https://ui.mlola.com/docs/components/diff-view.md): Unified or split file diffs from before/after text or a patch, with in-line change marks and folded unchanged lines. Requires Mlola Pro.
- [File Changes](https://ui.mlola.com/docs/components/file-changes.md): An agent's changed files as one summary line that opens into each file's status and size of change. Requires Mlola Pro.
- [Message](https://ui.mlola.com/docs/components/message.md): One conversation turn with actions, feedback, answer versions and a facts line. Requires Mlola Pro.
- [Model Picker](https://ui.mlola.com/docs/components/model-picker.md): Choose a model by speed, reasoning depth and context window, built on Select. Requires Mlola Pro.
- [Orb](https://ui.mlola.com/docs/components/orb.md): The assistant's presence: idle, listening, thinking and speaking, colored by the theme and driven by live audio. Requires Mlola Pro.
- [Prompt Input](https://ui.mlola.com/docs/components/prompt-input.md): A growing composer that sends on Enter, never mid-IME, with attachments, tools and a stop button. Requires Mlola Pro.
- [Selection Actions](https://ui.mlola.com/docs/components/selection-actions.md): Select text and AI actions appear above it: rewrite, explain, shorten. Requires Mlola Pro.
- [Streaming Text](https://ui.mlola.com/docs/components/streaming-text.md): Text that arrives in pieces, revealed at a steady reading rate that catches up on bursts, with fresh runs fading in. Requires Mlola Pro.
- [Suggestions](https://ui.mlola.com/docs/components/suggestions.md): Prompt starters and follow-ups as a wrapping or swipeable row. Requires Mlola Pro.
- [Task List](https://ui.mlola.com/docs/components/task-list.md): An agent's plan as it runs: status per step, nested subtasks, progress announced as it changes. Requires Mlola Pro.
- [Thinking](https://ui.mlola.com/docs/components/thinking.md): A model's reasoning with a live timer that folds into “Thought for 8s”, plus shimmer, dots and orbit indicators. Requires Mlola Pro.
- [Tool Call](https://ui.mlola.com/docs/components/tool-call.md): A model's tool use as an expandable card, with input, output, timing and human approval. Requires Mlola Pro.
- [Voice Wave](https://ui.mlola.com/docs/components/voice-wave.md): Mirrored audio bars for microphone input or the assistant's voice, fed by a live meter. Requires Mlola Pro.
- [File Tree](https://ui.mlola.com/docs/components/file-tree.md): A project's files as a keyboard-first tree with folder guides, file-type badges and git status. Requires Mlola Pro.
- [Terminal](https://ui.mlola.com/docs/components/terminal.md): Command output with ANSI colors mapped to theme roles, exit status, follow-on-output scrolling and an optional input with history. Requires Mlola Pro.
- [Source Control](https://ui.mlola.com/docs/components/source-control.md): Branch sync state, staged and unstaged changes, and a commit box whose message a model can stream in. Requires Mlola Pro.
- [Commit History](https://ui.mlola.com/docs/components/commit-history.md): A git log with a branch graph, refs, CI checks, authors and relative times. Requires Mlola Pro.
- [Editor Tabs](https://ui.mlola.com/docs/components/editor-tabs.md): Open files across an editor: unsaved dots, git status, preview tabs and names that disambiguate twins. Requires Mlola Pro.
- [Canvas](https://ui.mlola.com/docs/components/canvas.md): An infinite surface to pan and zoom, with a dotted grid, zoom controls, floating panels and collaborators' cursors. Requires Mlola Pro.
- [Canvas Toolbar](https://ui.mlola.com/docs/components/canvas-toolbar.md): A floating tool palette with single-key shortcuts, roving focus and room for undo and redo. Requires Mlola Pro.
- [Minimap](https://ui.mlola.com/docs/components/minimap.md): The whole canvas in miniature, with the view outlined; press or drag to move there. Requires Mlola Pro.
- [Node Graph](https://ui.mlola.com/docs/components/node-graph.md): A node editor for agent workflows: drag nodes, connect ports, refuse loops and watch a run flow through the edges. Requires Mlola Pro.
- [Whiteboard](https://ui.mlola.com/docs/components/whiteboard.md): Shapes, arrows, freehand, text and sticky notes on an infinite canvas, with selection, resize, color, undo and presence. Requires Mlola Pro.
- [Rich Text Editor](https://ui.mlola.com/docs/components/rich-text-editor.md): A modern rich text editor: headings, marks, lists, quotes, code and links, with Markdown shortcuts as you type and paste cleaned to what it owns. Requires Mlola Pro.
- [Block Editor](https://ui.mlola.com/docs/components/block-editor.md): A block editor: slash commands, Markdown shortcuts, to-dos, callouts, drag to reorder, a selection bubble and AI that streams into the page. Requires Mlola Pro.
- [Suggested Edit](https://ui.mlola.com/docs/components/suggested-edit.md): An AI rewrite shown as word-level tracked changes, each accepted or rejected on its own or all at once. Requires Mlola Pro.
- [Property Picker](https://ui.mlola.com/docs/components/property-picker.md): A small trigger that opens a searchable menu to set a property: status, priority, assignee or labels, one or many. Requires Mlola Pro.
- [Filter Bar](https://ui.mlola.com/docs/components/filter-bar.md): Filters as editable sentences, "Status is In progress", with an applyFilters helper. Requires Mlola Pro.
- [Kanban](https://ui.mlola.com/docs/components/kanban.md): Columns of cards that move by drag or keyboard, with room-making drops, edge scrolling, folding columns and limits. Requires Mlola Pro.
- [Chart](https://ui.mlola.com/docs/components/chart.md): The shared chart frame: scales, nice ticks, monotone curves, stacking, legend, tooltip and an accessible data table. Requires Mlola Pro.
- [Line Chart](https://ui.mlola.com/docs/components/line-chart.md): Lines and areas over a sequence, stacked or overlaid, with a crosshair, keyboard reading and dashed targets. Requires Mlola Pro.
- [Bar Chart](https://ui.mlola.com/docs/components/bar-chart.md): Bars per category, grouped or stacked, standing up or lying across, with rounded ends and keyboard reading. Requires Mlola Pro.
- [Donut Chart](https://ui.mlola.com/docs/components/donut-chart.md): Parts of a whole as a ring whose center reads the slice you point at. Requires Mlola Pro.
- [Sparkline](https://ui.mlola.com/docs/components/sparkline.md): A tiny axis-free trend line for stat cards, tables and lists. Requires Mlola Pro.
- [Gantt](https://ui.mlola.com/docs/components/gantt.md): A roadmap timeline: grouped bars you drag and resize, milestones, dependency arrows, today and three zoom levels. Requires Mlola Pro.
- [Data Grid](https://ui.mlola.com/docs/components/data-grid.md): A spreadsheet-grade table: virtualized rows, pinned and resizable columns, sorting, cell ranges, inline editing, copy and paste, totals. Requires Mlola Pro.
- [Scheduler](https://ui.mlola.com/docs/components/scheduler.md): A day, three-day and week calendar where events are drawn, moved and resized by pointer or keyboard, with overlaps laid out side by side. Requires Mlola Pro.
- [Funnel Chart](https://ui.mlola.com/docs/components/funnel-chart.md): Stages of a funnel with step conversion and drop-off between each. Requires Mlola Pro.
- [Radar Chart](https://ui.mlola.com/docs/components/radar-chart.md): Several series compared across the same qualities on a spider web, with highlighting and a tooltip. Requires Mlola Pro.
- [Scatter Chart](https://ui.mlola.com/docs/components/scatter-chart.md): Points or bubbles on two measures, with series, keyboard stepping and a tooltip. Requires Mlola Pro.
- [Treemap](https://ui.mlola.com/docs/components/treemap.md): Nested rectangles sized by value, laid out as squares as far as possible. Requires Mlola Pro.
- [Trace Viewer](https://ui.mlola.com/docs/components/trace-viewer.md): One 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. Requires Mlola Pro.
- [Eval Grid](https://ui.mlola.com/docs/components/eval-grid.md): Test cases against model and prompt variants: pass rates, scores, latency and cost, disagreements, and each answer diffed against the expected one. Requires Mlola Pro.
- [Model Compare](https://ui.mlola.com/docs/components/model-compare.md): The same prompt streamed to several models side by side, blind by default, with time to first token, speed and a vote. Requires Mlola Pro.
- [Prompt Playground](https://ui.mlola.com/docs/components/prompt-playground.md): A system prompt and a template whose variables become fields, with model settings, saved versions and a run history. Requires Mlola Pro.
- [Generative UI](https://ui.mlola.com/docs/components/generative-ui.md): Renders a JSON interface a model streams — metrics, charts, tables, alerts, buttons — from the library's own components as it arrives. Requires Mlola Pro.
- [Transcript](https://ui.mlola.com/docs/components/transcript.md): A call or meeting transcript that follows playback word by word, with speakers, search and a summary. Requires Mlola Pro.

## Mlola Pro blocks, pages and templates (49)

- [AI Chat](https://ui.mlola.com/blocks/ai-chat): A complete chat surface that streams reasoning, tool use, answers and sources from any model through one responder function. Block. Requires Mlola Pro.
- [Auth Split](https://ui.mlola.com/blocks/auth-split): Brand panel plus login/signup tabbed form. Block. Requires Mlola Pro.
- [CTA + Footer](https://ui.mlola.com/blocks/cta-footer): Gradient call-to-action band with email capture plus link footer. Block. Requires Mlola Pro.
- [Data Table](https://ui.mlola.com/blocks/data-table): Orders-style table with search, status pills, and empty state. Block. Requires Mlola Pro.
- [FAQ Accordion](https://ui.mlola.com/blocks/faq-accordion): Collapsible question list with smooth animation. Block. Requires Mlola Pro.
- [Feature Grid](https://ui.mlola.com/blocks/feature-grid): Icon feature grid with 2/3/4 column options. Block. Requires Mlola Pro.
- [Hero Split](https://ui.mlola.com/blocks/hero-split): Split hero with badge, headline, dual CTAs, stats, and a replaceable visual. Block. Requires Mlola Pro.
- [Navbar](https://ui.mlola.com/blocks/navbar): Sticky marketing nav with mobile menu. Block. Requires Mlola Pro.
- [Newsletter](https://ui.mlola.com/blocks/newsletter): Email capture band with success state. Block. Requires Mlola Pro.
- [Pricing Tiers](https://ui.mlola.com/blocks/pricing-tiers): Tier cards with highlighted plan and billing toggle. Block. Requires Mlola Pro.
- [Product Grid](https://ui.mlola.com/blocks/product-grid): Filterable product cards with ratings and cart actions. Block. Requires Mlola Pro.
- [Stats Band](https://ui.mlola.com/blocks/stats-band): Metric row with deltas for dashboards and heroes. Block. Requires Mlola Pro.
- [Testimonials](https://ui.mlola.com/blocks/testimonials): Customer quote cards with ratings and avatars. Block. Requires Mlola Pro.
- [Thread Sidebar](https://ui.mlola.com/blocks/thread-sidebar): Searchable, grouped conversations or agent runs, with live status for work running in the background. Block. Requires Mlola Pro.
- [Voice Session](https://ui.mlola.com/blocks/voice-session): Full-screen voice mode: the assistant's presence, a live wave, captions and call controls, metering the real microphone when allowed. Block. Requires Mlola Pro.
- [Logo Cloud](https://ui.mlola.com/blocks/logo-cloud): Customer wordmarks under a line of proof, as framed tiles or one quiet row. Block. Requires Mlola Pro.
- [Comparison Table](https://ui.mlola.com/blocks/comparison-table): Every plan side by side, feature by feature, in groups, with the recommended plan marked. Block. Requires Mlola Pro.
- [Feature Rows](https://ui.mlola.com/blocks/feature-rows): Features told one at a time, text beside a visual, alternating down the page. Block. Requires Mlola Pro.
- [Process Steps](https://ui.mlola.com/blocks/process-steps): A short numbered path from signing up to value, across a row or down a rail beside the heading. Block. Requires Mlola Pro.
- [Contact Form](https://ui.mlola.com/blocks/contact-form): Ways to reach the team beside a validated message form with topics, a success state and focus that follows it. Block. Requires Mlola Pro.
- [Changelog](https://ui.mlola.com/blocks/changelog): Releases newest first, each change tagged new, improved or fixed, with a filter by kind. Block. Requires Mlola Pro.
- [Onboarding Checklist](https://ui.mlola.com/blocks/onboarding-checklist): A getting-started list with progress, the next step called out, and a finished state. Block. Requires Mlola Pro.
- [Activity Feed](https://ui.mlola.com/blocks/activity-feed): What happened in a workspace, newest first, grouped by day and filterable by kind. Block. Requires Mlola Pro.
- [Settings Panel](https://ui.mlola.com/blocks/settings-panel): Settings sections and rows with a save bar that validates, discards and reports unsaved changes. Block. Requires Mlola Pro.
- [Error State](https://ui.mlola.com/blocks/error-state): Not-found, server error, maintenance and offline screens with search, next steps and a reference. Block. Requires Mlola Pro.
- [Auth](https://ui.mlola.com/blocks/auth): Authentication page with login/signup tabs, validation, and brand panel. Page. Requires Mlola Pro.
- [Blog](https://ui.mlola.com/blocks/blog): Blog index with featured post, filterable grid, and newsletter. Page. Requires Mlola Pro.
- [Chat App](https://ui.mlola.com/blocks/chat-app): A full chat product on one route: conversations, streaming chat with reasoning, tools and sources, and voice mode. Page. Requires Mlola Pro.
- [Dashboard](https://ui.mlola.com/blocks/dashboard): Admin dashboard with sidebar, stat cards, chart, and activity table. Page. Requires Mlola Pro.
- [Landing Page](https://ui.mlola.com/blocks/landing): Full SaaS landing page with hero, features, pricing, testimonials, and CTA. Page. Requires Mlola Pro.
- [Pricing](https://ui.mlola.com/blocks/pricing): SaaS pricing page with billing toggle, tier cards, and comparison table. Page. Requires Mlola Pro.
- [Features](https://ui.mlola.com/blocks/features): A product tour: centered hero, customer row, features told one at a time, getting started, essentials and reviews. Page. Requires Mlola Pro.
- [Contact](https://ui.mlola.com/blocks/contact): Contact channels, a validated message form and the questions people ask before writing. Page. Requires Mlola Pro.
- [Welcome](https://ui.mlola.com/blocks/welcome): A new member's home: workspace navigation, this week in numbers, the setup checklist and recent activity. Page. Requires Mlola Pro.
- [Release Notes](https://ui.mlola.com/blocks/release-notes): A public changelog with filterable releases and a monthly email signup. Page. Requires Mlola Pro.
- [Code Agent](https://ui.mlola.com/templates/code-agent): A coding agent's workspace: threads, a folded work log with plan and tool calls, results with changed files, and a diff pane for every turn. Template. Requires Mlola Pro.
- [Storefront](https://ui.mlola.com/templates/ecommerce): Ecommerce storefront with filters, product grid, and cart drawer state. Template. Requires Mlola Pro.
- [Canvas Studio](https://ui.mlola.com/templates/canvas-studio): A canvas studio: whiteboards with collaborators and AI that adds ideas to the view, and an agent workflow builder with a step palette, inspector and live test runs. Template. Requires Mlola Pro.
- [Notebook](https://ui.mlola.com/templates/notebook): A notebook: a page tree with favorites and search, pages with covers, icons and properties, a block editor, and an assistant that summarizes, rewrites with tracked changes and gathers open to-dos. Template. Requires Mlola Pro.
- [Tracker](https://ui.mlola.com/templates/tracker): An issue tracker: an inbox the assistant triages, teams with a keyboard-first list and a board with swimlanes, saved views, cycles with burndown, a roadmap, issue pages with history, and an AI agent that takes work. Template. Requires Mlola Pro.
- [Analytics](https://ui.mlola.com/templates/analytics): A product analytics dashboard: traffic with its expected range, a conversion funnel, sources and top pages, revenue by plan, movement, country and account, product use, feature adoption and cohort retention. Template. Requires Mlola Pro.
- [Settings & Billing](https://ui.mlola.com/templates/settings): Account and workspace settings: a validated profile with a save bar, notification channels and quiet hours, members with invitations and roles, API keys shown once, and billing with usage, plans, prorated changes through Paddle and invoices. Template. Requires Mlola Pro.
- [AI Console](https://ui.mlola.com/templates/ai-console): An AI operations console: usage, latency and spend by model, every agent run as a trace with its spans and failures, eval runs across prompt versions with regressions called out, a prompt playground and blind model comparison. Template. Requires Mlola Pro.
- [CRM](https://ui.mlola.com/templates/crm): A CRM: companies and people as editable grids, a deal pipeline with weighted totals, and record pages with an activity timeline, an account brief the assistant writes and next steps it drafts for review. Template. Requires Mlola Pro.
- [Mail](https://ui.mlola.com/templates/mail): A keyboard-first mail client: a split inbox with the assistant's triage, summaries, first drafts and edits to your own reply you accept change by change, done, snooze and star with a key, and a command menu. Template. Requires Mlola Pro.
- [Scheduling](https://ui.mlola.com/templates/scheduling): Scheduling: a public booking page with open times from weekly hours, buffers and existing bookings in the visitor's time zone, a confirmation with a calendar file, and the host's bookings, team calendar, event types, hours and days off. Template. Requires Mlola Pro.
- [Support Desk](https://ui.mlola.com/templates/support): A support desk: an inbox sorted by live response targets, replies and internal notes with macros, a suggested answer the assistant writes from the help center with citations and confidence, the customer beside it, and the questions that still need an article. Template. Requires Mlola Pro.
- [Marketing Site](https://ui.mlola.com/templates/marketing-site): A complete product site: home, features, pricing with a full comparison, changelog, contact, sign-in and a not-found page, with one navigation that marks where the reader is. Template. Requires Mlola Pro.
- [Docs Site](https://ui.mlola.com/templates/docs-site): A documentation site: grouped articles in a sidebar, search over every page and section, a table of contents that follows the reader, code with copy, notes, previous and next, and feedback on every page. Template. Requires Mlola Pro.

## Coding agents and MCP

- `npx mlola-ui mcp` runs the Mlola MCP server over stdio in a project; `init` adds it to `.mcp.json`. Tools: search_components, get_component, get_tokens, get_design_rules, check_markup (finds classes and attributes that do not exist), add_components and init_project.
- https://ui.mlola.com/mcp is the same server over Streamable HTTP, with no account: the read-only tools, and get_install_command in place of installing.
- [The generated contract](https://ui.mlola.com/docs/agents): every class, data-* attribute and token, generated from the stylesheet.

## Optional

- [Pricing](https://ui.mlola.com/pricing): the free core, and Mlola Pro as a one-time purchase.
- [License](https://ui.mlola.com/license): the terms for Mlola Pro.
- [Assets](https://ui.mlola.com/assets): icons, illustrations and 3D models.