# MIAN components by task

Every component, with what people use it for. Fetch `https://mian.ro/ai/components/<id>.md` for exact classes and markup. Sections are whole page bands; the rest are controls and displays. License: MIAN License, free to use, not for resale.

## Actions

- `button`: [Button](https://mian.ro/ai/components/button.md): Triggers an action. Six colour roles, five variants, four sizes, icon-only, loading and disabled states. Use for: button, call to action button, submit button, icon button, loading button.
- `button-group`: [Button group](https://mian.ro/ai/components/button-group.md): Joins related buttons into one control, horizontally or vertically. Use for: joined buttons, segmented buttons, split button, toolbar buttons.
- `toggle-group`: [Toggle group](https://mian.ro/ai/components/toggle-group.md) (needs mian.js): A set of pressable buttons, single choice like a segmented control, or multiple like a formatting toolbar. Use for: segmented control, view switcher, formatting toolbar, choose one option inline, grid list toggle.
- `dropdown`: [Dropdown menu](https://mian.ro/ai/components/dropdown.md) (needs mian.js): A menu of actions anchored to a trigger. Built on the native Popover API: top layer, light dismiss and Escape are free. Use for: dropdown menu, more actions menu, kebab menu, user menu, overflow menu.
- `copy-button`: [Copy button](https://mian.ro/ai/components/copy-button.md) (needs mian.js): Copies text to the clipboard and confirms it in place, visually and for screen readers. Use for: copy to clipboard, copy code, copy link, share link.
- `swap`: [Swap](https://mian.ro/ai/components/swap.md): An icon toggle that swaps between two states with a small rotation, menu/close, play/pause, sun/moon. Use for: icon toggle, play pause, hamburger to close, favourite toggle.
- `hold-button`: [Hold to confirm](https://mian.ro/ai/components/hold-button.md) (needs mian.js): A button that must be held for a moment before it acts. For actions that are hard to undo, without a second dialog. Use for: hold to delete, press and hold to confirm, safe destructive action. Avoid: Not for everyday actions: holding is slow on purpose.

## Forms

- `field`: [Field](https://mian.ro/ai/components/field.md): Label, control, hint and error message wired together, plus form and fieldset layout. Use for: form field, label and hint, form layout, validation error, fieldset.
- `input`: [Input](https://mian.ro/ai/components/input.md): Single-line text entry. Styles every native input type: text, email, password, search, number, date, time, color. Use for: text input, email field, search field, date input, form input.
- `textarea`: [Textarea](https://mian.ro/ai/components/textarea.md): Multi-line text. Grows with its content in browsers that support field-sizing. Use for: message box, multi-line text, comment field, description field.
- `select`: [Select](https://mian.ro/ai/components/select.md): A styled native select. Keeps the platform picker on mobile and full keyboard support everywhere. Use for: dropdown select, choose from list, country select, native select.
- `checkbox`: [Checkbox](https://mian.ro/ai/components/checkbox.md): Native checkbox, restyled. Checked, indeterminate, disabled and invalid states; any colour role. Use for: checkbox, agree to terms, multiple choice, select all rows.
- `radio`: [Radio](https://mian.ro/ai/components/radio.md): Native radio button, restyled. Use for one choice from a short list. Use for: radio buttons, single choice, choose one.
- `switch`: [Switch](https://mian.ro/ai/components/switch.md): An on/off toggle for settings that apply immediately. A native checkbox with role="switch". Use for: toggle switch, on off setting, enable feature, settings toggle.
- `slider`: [Slider](https://mian.ro/ai/components/slider.md) (needs mian.js): A styled native range input with a filled track. Works without JS; mian.js paints the fill in WebKit. Use for: range slider, price range, volume, numeric range input.
- `file-input`: [File input](https://mian.ro/ai/components/file-input.md) (needs mian.js): A styled native file picker, and a drag-and-drop zone that wraps one. Use for: file upload, drag and drop upload, attach file, image upload.
- `input-group`: [Input group](https://mian.ro/ai/components/input-group.md): An input with leading or trailing addons, text, icons or buttons, inside one border. Use for: input with prefix, url field, currency input, search with button.
- `number-input`: [Number input](https://mian.ro/ai/components/number-input.md) (needs mian.js): A stepper: a numeric input between decrement and increment buttons. Respects min, max and step; hold to repeat. Use for: quantity stepper, plus minus quantity, number of guests, cart quantity.
- `otp-input`: [OTP input](https://mian.ro/ai/components/otp-input.md) (needs mian.js): One-time-code entry. Auto-advances, handles backspace and paste, supports SMS autofill on the first box. Use for: verification code, one time password, 2fa code, pin entry.
- `rating`: [Rating](https://mian.ro/ai/components/rating.md): Star rating built from radio buttons, so it submits with a form and needs no JavaScript. Use for: star rating input, rate a product, review stars.
- `combobox`: [Combobox](https://mian.ro/ai/components/combobox.md) (needs mian.js): Autocomplete: a text input that filters a listbox as you type. Keyboard navigation and aria-activedescendant included. Use for: autocomplete, searchable select, typeahead, filter as you type.
- `calendar`: [Calendar](https://mian.ro/ai/components/calendar.md) (needs mian.js): A month grid for picking a date, on its own or in a popover as a date field. Full keyboard support and locale-aware names. Use for: date picker, booking calendar, date range picker, check-in check-out, choose a day.
- `tag-input`: [Tag input](https://mian.ro/ai/components/tag-input.md) (needs mian.js): Type to add tags as removable chips. Enter or comma adds, Backspace removes, pasted lists are split. Use for: tags input, add keywords, multi value input, email recipients.
- `password-input`: [Password field](https://mian.ro/ai/components/password-input.md) (needs mian.js): A password input with a show/hide toggle and an optional four-step strength meter. Use for: password field, show password, password strength, new password.
- `swatch-picker`: [Swatch picker](https://mian.ro/ai/components/swatch-picker.md): Pick a colour (or any visual option) from round swatches. Real radio buttons underneath. Use for: colour picker, product colour options, variant swatches, theme colour choice.
- `time-slots`: [Time slots](https://mian.ro/ai/components/time-slots.md): A grid of bookable times, available, nearly full or taken, built on radio buttons. Use for: appointment times, book a time, available slots, booking module, reservation time.
- `seat-map`: [Seat map](https://mian.ro/ai/components/seat-map.md): Pick seats for a cinema, theatre, bus or venue: rows, an aisle, taken and accessible seats, and a legend. Use for: seat selection, cinema seats, theatre booking, bus seats, venue map.
- `radio-card`: [Option cards](https://mian.ro/ai/components/radio-card.md): Selectable cards for shipping, plans or payment, and pill options for sizes and variants. Use for: shipping options, choose a plan, payment method, size picker, option cards.
- `date-range`: [Date range](https://mian.ro/ai/components/date-range.md) (needs mian.js): Pick a period for a report: presets for the common ranges and two dates for anything else. Use for: date range picker, report period, last 30 days filter, from and to dates.
- `task-list`: [Task list](https://mian.ro/ai/components/task-list.md): A checklist where a finished task is struck through as the box is ticked. Use for: todo list, checklist with strike through, tasks, launch checklist.
- `duration-picker`: [Duration picker](https://mian.ro/ai/components/duration-picker.md) (needs mian.js): Hours, minutes and seconds as three small fields that move on as you type. Use for: duration input, hours minutes seconds, timer length, time span.

## Data display

- `typography`: [Typography](https://mian.ro/ai/components/typography.md): Headings, lead, body, links, quotes and lists that follow the noodle's heading and body fonts. Use for: headings, text styles, prose, rich text, lists and quotes.
- `avatar`: [Avatar](https://mian.ro/ai/components/avatar.md): An image, initials or icon representing a person or entity. Sizes, shapes, presence and stacked groups. Use for: user picture, initials, profile image, avatar group, presence dot.
- `badge`: [Badge](https://mian.ro/ai/components/badge.md): A compact label for status, counts and categories. Use for: status label, count badge, tag, new label, category label. Avoid: Badges on everything, keep them for status and counts.
- `chip`: [Chip](https://mian.ro/ai/components/chip.md) (needs mian.js): Removable tags and toggleable filter chips. Use for: filter chips, removable tags, selected filters, toggle filters.
- `card`: [Card](https://mian.ro/ai/components/card.md): A surface for grouped content: header, body, footer, media and actions. Use for: card, content box, panel, settings card, summary card. Avoid: Cards only to create visual separation. Use whitespace and rules; cards are for objects (a plan, a product, a message).
- `table`: [Table](https://mian.ro/ai/components/table.md) (needs mian.js): Data tables with hover, striping, compact density, selection, numeric alignment and sortable columns. Use for: data table, sortable table, admin table, transactions list, comparison table.
- `list`: [List](https://mian.ro/ai/components/list.md): Bordered lists of rows with titles, descriptions, avatars and trailing content, or links. Use for: list of items, members list, settings list, link list, inbox rows.
- `kbd`: [Kbd](https://mian.ro/ai/components/kbd.md): Keyboard keys and shortcuts. Use for: keyboard shortcut, key hint, hotkey.
- `code`: [Code](https://mian.ro/ai/components/code.md): Inline code and code blocks in the noodle's monospace font. Use for: code block, inline code, snippet, terminal command.
- `stat`: [Stat](https://mian.ro/ai/components/stat.md): Key metrics with labels and trend deltas, alone or in a joined row. Use for: kpi, metric card, dashboard numbers, revenue stat, trend delta.
- `chart`: [Chart](https://mian.ro/ai/components/chart.md) (needs mian.js): Bar, horizontal bar, line/area and donut charts from plain markup. Each noodle draws them in its own style. Use for: bar chart, line chart, donut chart, graph, analytics chart.
- `timeline`: [Timeline](https://mian.ro/ai/components/timeline.md): A vertical sequence of events with markers, titles, times and content. Use for: timeline, order tracking, history, activity log, company history.
- `accordion`: [Accordion](https://mian.ro/ai/components/accordion.md): Stacked disclosure sections. Native <details>; give them the same name for exclusive open. Use for: collapsible sections, expand collapse, details list, product details accordion.
- `description-list`: [Description list](https://mian.ro/ai/components/description-list.md): Key–value pairs for detail views and summaries. Use for: key value pairs, specs, order details, fact box, properties.
- `divider`: [Divider](https://mian.ro/ai/components/divider.md): A horizontal or vertical rule, optionally with a label. Use for: separator, horizontal rule, or divider.
- `skeleton`: [Skeleton](https://mian.ro/ai/components/skeleton.md): Loading placeholders shaped like the content that is coming. Use for: loading placeholder, content loading, shimmer.
- `empty-state`: [Empty state](https://mian.ro/ai/components/empty-state.md): What to show when there is nothing to show, with a next step. Use for: no results, nothing here yet, first use, empty inbox, zero state.
- `indicator`: [Indicator](https://mian.ro/ai/components/indicator.md): A count or status dot pinned to the corner of any element, avatars, icons, buttons. Use for: notification dot, unread count, status dot on avatar.
- `chat`: [Chat](https://mian.ro/ai/components/chat.md): Message bubbles for conversations and assistants, with avatars, timestamps and a typing state. Use for: chat, messages, ai assistant conversation, support chat, message bubbles.
- `tree`: [Tree view](https://mian.ro/ai/components/tree.md): Nested, collapsible lists, file trees, navigation and outlines, built on native <details>. Use for: file tree, nested navigation, folder structure, outline.
- `kanban`: [Kanban board](https://mian.ro/ai/components/kanban.md): Columns of cards for a pipeline, sprint or sales process, counts, colour dots and card meta. Use for: kanban board, deals pipeline, task board, sprint board, columns of cards.
- `usage-meter`: [Usage meter](https://mian.ro/ai/components/usage-meter.md): Plan usage against limits, seats, storage, API calls, with warning and over-limit states. Use for: plan usage, quota, storage used, seats used, billing limits.
- `notifications`: [Notification list](https://mian.ro/ai/components/notifications.md): An inbox of notifications with unread markers, icons or avatars, times and inline actions. Use for: notifications list, inbox, activity feed, alerts center.
- `invoice`: [Invoice](https://mian.ro/ai/components/invoice.md): A printable invoice or receipt: parties, line items, totals with tax, and payment notes. Use for: invoice, receipt, bill, order summary, printable document.
- `funnel`: [Funnel](https://mian.ro/ai/components/funnel.md): Conversion through the stages of a funnel, visits to signups to paid, with the rate between steps. Use for: conversion funnel, sales funnel, drop-off, signup funnel.
- `leaderboard`: [Leaderboard](https://mian.ro/ai/components/leaderboard.md): A ranked list, top sellers, customers, contributors, with medals for the top three and a trend. Use for: ranking, top sellers, leaderboard, top customers.
- `product-gallery`: [Product gallery](https://mian.ro/ai/components/product-gallery.md): A main image with clickable thumbnails, pure CSS, keyboard-friendly, up to six images. Use for: product images, image gallery, thumbnails, product photos.
- `review-summary`: [Review summary](https://mian.ro/ai/components/review-summary.md): An average rating with stars, the number of reviews and a distribution of 5 to 1 stars. Use for: reviews summary, average rating, rating distribution, customer reviews.
- `post`: [Social post](https://mian.ro/ai/components/post.md) (needs mian.js): A post in a feed: author, time, text, media and like / reply / repost / share actions with counts. Use for: social post, feed item, like and share, status update.
- `profile-header`: [Profile header](https://mian.ro/ai/components/profile-header.md): The top of a profile page: cover, avatar, name, bio, details, stats and a follow button. Use for: profile page, user profile, account header, creator profile.
- `comment-thread`: [Comment thread](https://mian.ro/ai/components/comment-thread.md): Nested comments with replies, times and reply / like actions. Use for: comments, replies, discussion, nested comments.
- `filter-bar`: [Filter bar](https://mian.ro/ai/components/filter-bar.md): The toolbar above a list or table: search, quick filter chips, sort, a view switch and the result count. Use for: filters, filter toolbar, search and filter, table toolbar, sort and filter results.
- `bulk-actions`: [Bulk actions](https://mian.ro/ai/components/bulk-actions.md) (needs mian.js): A bar that appears when rows are selected, the count, actions for the selection, and a way out, with select-all. Use for: bulk actions, select rows, batch edit, archive selected, selection toolbar.
- `curriculum`: [Curriculum](https://mian.ro/ai/components/curriculum.md): Modules and lessons of a course with durations, lesson type, done and locked states, each module a native disclosure. Use for: course curriculum, syllabus, lesson list, course modules, training outline.
- `listing-card`: [Listing card](https://mian.ro/ai/components/listing-card.md) (needs mian.js): A property, rental or venue in a results grid: photo, price, key facts, address and a save toggle, the title is the link. Use for: property listing, real estate card, rental listing, apartment card, marketplace listing.
- `kpi`: [KPI card](https://mian.ro/ai/components/kpi.md) (needs mian.js): One number that matters, with its change, a sparkline you can hover and a line of context. Use for: kpi card, metric with sparkline, number with trend, dashboard headline numbers, revenue card.
- `heatmap`: [Heatmap](https://mian.ro/ai/components/heatmap.md): Activity by day, or by hour and weekday, as a grid of cells whose depth of colour is the value. Hover a cell for the exact number. Use for: activity heatmap, calendar heatmap, contribution graph, busiest days, usage by hour.
- `gauge`: [Gauge](https://mian.ro/ai/components/gauge.md): A half-circle meter for one value against a known range: a score, a quota, a target. Use for: gauge, score dial, meter, health score, quota dial.
- `breakdown`: [Breakdown](https://mian.ro/ai/components/breakdown.md): How a total splits into parts: one stacked bar and a list with each part’s value and share. Use for: stacked bar with legend, share by category, traffic sources, sales by channel, budget split.
- `uptime`: [Uptime](https://mian.ro/ai/components/uptime.md): A status page row: a service, its state today and one bar per day of history. Hover a day for what happened. Use for: status page, service uptime, incident history, system status, availability bars.
- `voice-note`: [Voice note](https://mian.ro/ai/components/voice-note.md) (needs mian.js): An audio message as a waveform: play, pause, see where you are and drag to seek. Use for: voice message, audio waveform player, voice memo, audio clip in chat.

## Feedback

- `alert`: [Alert](https://mian.ro/ai/components/alert.md): Inline messages for information, success, warnings and errors, with optional actions and dismiss. Use for: alert message, warning box, error message, success message, info notice.
- `toast`: [Toast](https://mian.ro/ai/components/toast.md) (needs mian.js): Temporary notifications. Mian.toast() from script, or data-mn-toast on a button. Pause on hover, stack, dismiss. Use for: toast notification, snackbar, saved message, temporary notification.
- `progress`: [Progress](https://mian.ro/ai/components/progress.md) (needs mian.js): Linear progress, determinate from aria-valuenow, or indeterminate without it. Use for: progress bar, upload progress, loading bar, completion.
- `radial-progress`: [Radial progress](https://mian.ro/ai/components/radial-progress.md) (needs mian.js): Circular progress with a centred value. Use for: circular progress, score ring, percentage circle, goal progress.
- `spinner`: [Spinner](https://mian.ro/ai/components/spinner.md): Indeterminate loading indicators: ring and dots. Use for: spinner, loading indicator, busy.
- `banner`: [Banner](https://mian.ro/ai/components/banner.md): A full-width announcement bar for launches, maintenance notices or cookie-free notes. Dismissible. Use for: announcement bar, maintenance notice, top banner, launch announcement.
- `onboarding`: [Onboarding checklist](https://mian.ro/ai/components/onboarding.md): The first steps of a new account, with progress, done states and one action per step. Use for: onboarding checklist, getting started steps, setup progress, first run.
- `loader`: [Loader](https://mian.ro/ai/components/loader.md): Eight loading indicators, dots, bars, wave, grid, pulse, orbit, ring and a top-of-page line, in the current colour. Use for: loading animation, page loader, loading dots, progress line.
- `cookie-consent`: [Cookie consent](https://mian.ro/ai/components/cookie-consent.md): A consent notice with equal-weight Accept and Reject, and per-purpose switches, honest by default, dismissible. Use for: cookie banner, cookie consent, gdpr consent, privacy choices, tracking consent.

## Overlays

- `modal`: [Modal](https://mian.ro/ai/components/modal.md) (needs mian.js): A dialog on the native <dialog> element: focus trap, Escape, inert background and focus return from the platform. Use for: dialog, popup, confirm dialog, modal form, lightbox.
- `drawer`: [Drawer](https://mian.ro/ai/components/drawer.md) (needs mian.js): A panel that slides in from the right, left or bottom. Also a native <dialog>. Use for: side panel, slide over, filter drawer, mobile menu panel, bottom sheet.
- `popover`: [Popover](https://mian.ro/ai/components/popover.md) (needs mian.js): Rich, non-modal content anchored to a trigger, on the native Popover API. Use for: popover, floating panel, date picker popup, info bubble.
- `tooltip`: [Tooltip](https://mian.ro/ai/components/tooltip.md): Short labels on hover and focus. Pure CSS; the text is a real element referenced by aria-describedby. Use for: tooltip, hover hint, icon label.
- `command`: [Command palette](https://mian.ro/ai/components/command.md) (needs mian.js): Search-and-run: filterable, grouped, keyboard-driven. Inline or in a dialog opened with ⌘K. Use for: command palette, search dialog, cmd k, quick actions, spotlight search.
- `hover-card`: [Hover card](https://mian.ro/ai/components/hover-card.md): A preview card that appears when hovering or focusing a link, profiles, link previews, definitions. Use for: link preview, profile preview on hover, definition popup.
- `context-menu`: [Context menu](https://mian.ro/ai/components/context-menu.md) (needs mian.js): A menu that opens at the pointer on right-click, or from the keyboard with Shift+F10. Use for: right click menu, context menu.

## Navigation

- `navbar`: [Navbar](https://mian.ro/ai/components/navbar.md) (needs mian.js): A top bar with brand, links and actions. Sticky and translucent; collapses behind a menu button on small screens. Use for: app top bar, navigation bar, sticky header.
- `tabs`: [Tabs](https://mian.ro/ai/components/tabs.md) (needs mian.js): Switch between views. Underlined, boxed (segmented), pill and vertical variants; full WAI-ARIA keyboard support. Use for: tabs, switch views, segmented tabs, settings sections.
- `breadcrumbs`: [Breadcrumbs](https://mian.ro/ai/components/breadcrumbs.md): Where you are in a hierarchy, with links back up. Use for: breadcrumbs, where am i, category path.
- `pagination`: [Pagination](https://mian.ro/ai/components/pagination.md): Move between pages of results. Use for: pagination, next previous, page numbers, results pages.
- `steps`: [Steps](https://mian.ro/ai/components/steps.md): Progress through a multi-step flow, horizontal or vertical. Use for: checkout steps, wizard progress, multi-step form, stepper.
- `sidebar`: [Sidebar](https://mian.ro/ai/components/sidebar.md): Vertical application navigation with groups, icons and badges. Use for: app sidebar, side navigation, admin menu, docs navigation.
- `dock`: [Dock](https://mian.ro/ai/components/dock.md): A bottom navigation bar for mobile apps and compact layouts, floating or in the page. Use for: bottom navigation, mobile tab bar, app dock.
- `stories-bar`: [Stories bar](https://mian.ro/ai/components/stories-bar.md): A scrolling row of avatars with a ring for new stories and a grey ring for seen ones. Use for: stories, story avatars, social stories row.
- `page-header`: [Page header](https://mian.ro/ai/components/page-header.md): The top of an application page: where you are, what this is, its facts and the actions you can take. Use for: app page header, page title with actions, detail page heading, title and buttons, record header.

## Layout & utilities

- `collapse`: [Collapse](https://mian.ro/ai/components/collapse.md): A single show/hide section. Native <details>, no JavaScript. Use for: show more, expandable section, read more.
- `carousel`: [Carousel](https://mian.ro/ai/components/carousel.md) (needs mian.js): A horizontally scrolling, snapping track. Swipe, trackpad and keyboard; optional arrows and dots. Use for: carousel, slider of cards, horizontal scroll, image slider. Avoid: As the only way to reach content, carousels hide things.
- `theme-controller`: [Theme controller](https://mian.ro/ai/components/theme-controller.md) (needs mian.js): Switch noodle and light/dark mode for a page, or scope a noodle to any element. Use for: theme switcher, dark mode toggle, change noodle, appearance setting.
- `scroll-area`: [Scroll area](https://mian.ro/ai/components/scroll-area.md): A scrolling region with thin scrollbars and shadows that appear only where more content is hidden. Use for: scrollable panel, overflow region, scroll shadows.
- `mockup`: [Mockup](https://mian.ro/ai/components/mockup.md): Browser, window and phone frames for screenshots, demos and landing pages. Use for: browser frame, phone mockup, app screenshot frame, device frame.
- `dashboard`: [Dashboard grid](https://mian.ro/ai/components/dashboard.md): A twelve-track grid for dashboards and a widget frame: title, period, body, footer. It lays out for the width it gets, so it works beside a sidebar. Use for: dashboard layout, dashboard grid, widget panel, admin overview page, analytics overview.
- `gradient`: [Gradient backdrop](https://mian.ro/ai/components/gradient.md): Soft mesh gradients for a band, a hero or a media frame. By default they are mixed from the noodle’s own colours, so they follow the noodle and the mode; eight named palettes are there when you want a fixed mood. Use for: gradient background, mesh gradient, hero backdrop, colour wash, grain texture. Avoid: Never a purple-to-blue wash behind a centred headline, and never gradient-filled text. One gradient per page, as a backdrop or a media frame.
- `motion`: [Motion](https://mian.ro/ai/components/motion.md) (needs mian.js): A small motion system: three durations, three curves, the noodle’s own entrance for anything you add, staggered lists, press and lift feedback, drawn lines, counted numbers and cross-faded changes. All of it stops under reduced motion. Use for: animation, entrance animation, staggered list, hover lift, count up number. Avoid: Do not fade sections in on scroll and do not animate everything. Motion explains a change: something arrived, moved or was pressed.

## Sections

- `slides`: [Slides](https://mian.ro/ai/components/slides.md) (needs mian.js): A presentation website: full-height slides that snap, with arrow-key navigation, a counter and progress. Use for: presentation website, pitch deck, keynote, slides, investor deck. Avoid: Paragraphs on slides; decks that only work with a clicker.
- `jobs`: [Jobs list](https://mian.ro/ai/components/jobs.md): Open roles for a careers page: title, team, location and type, the whole row one link. Use for: careers page, open positions, job listings, we are hiring, vacancies. Avoid: Roles without location, remote policy or team.
- `work-grid`: [Work grid](https://mian.ro/ai/components/work-grid.md): Selected projects for an agency or portfolio in mixed sizes: the image, client, what was made and the outcome, each tile one link. Use for: portfolio projects, show four portfolio projects, case studies grid, selected work, agency work. Avoid: Twelve small thumbnails, or tiles without client and outcome. Four to six projects, mixed sizes.
- `comparison`: [Comparison table](https://mian.ro/ai/components/comparison.md): Plans or products side by side: grouped feature rows, included and not-included marks, a highlighted column and a sticky header. Use for: compare plans, feature comparison table, plan matrix, versus competitors, which plan. Avoid: Comparing against named competitors without facts you can back up.
- `changelog`: [Changelog](https://mian.ro/ai/components/changelog.md): Release notes by date: version, a headline, and changes tagged New, Improved or Fixed. Use for: release notes, changelog, what is new, product updates, version history. Avoid: Marketing copy instead of what changed.
- `integrations`: [Integrations](https://mian.ro/ai/components/integrations.md): A directory of integrations or partners: mark, name, category and one line on what it does, each tile one link. Use for: integrations directory, works with, app marketplace, connectors, partners grid. Avoid: Listing integrations that do not exist yet as if they did.
- `contact-section`: [Contact section](https://mian.ro/ai/components/contact-section.md): The end of a company or agency page: what happens after you write, direct details, and a short form, side by side. Use for: contact form section, get in touch, start a project, enquiry form, request a quote. Avoid: Long forms. Ask for name, email and a few lines; say when you will reply.
- `layout`: [Page layout](https://mian.ro/ai/components/layout.md): Containers, section rhythm, display type and grids, the frame every page is built in. Use for: page structure, section spacing, two column split, content width, grid columns. Avoid: Do not add your own container, max-width or section padding CSS, mn-section and mn-container already set the rhythm.
- `site-header`: [Site header](https://mian.ro/ai/components/site-header.md): A website header: brand, navigation, actions, and a menu that works without JavaScript on small screens. Use for: website navigation, top menu, logo and links, mobile menu, header with call to action. Avoid: More than five or six links, or more than one primary button.
- `hero`: [Hero](https://mian.ro/ai/components/hero.md): The opening section of a page: a display headline, an intro, actions and optional media, stacked, split or centred. Use for: landing page opening, above the fold, headline and call to action, product introduction, homepage top. Avoid: Do not default to badge + giant headline + paragraph + two buttons. A statement headline alone, a split with the real product, or a figure can open better. One primary action only.
- `logo-cloud`: [Logo cloud](https://mian.ro/ai/components/logo-cloud.md): A quiet row of customer or partner wordmarks, with an optional caption. Use for: client logos, trusted by, partners, customer wordmarks, press mentions. Avoid: Never invent client or press logos. Leave it out until real, permitted names exist.
- `feature-grid`: [Feature grid](https://mian.ro/ai/components/feature-grid.md): Features as a ruled editorial grid or with icons, plus a check list for plans and specs. Use for: features list, services list, what we do, capabilities, benefits. Avoid: Three identical icon cards with adjectives. Use the ruled variant with specific claims, and do not follow another grid with it.
- `bento`: [Bento grid](https://mian.ro/ai/components/bento.md): A grid of tiles in mixed sizes for showing several product details at once. Use for: showcase product features, show product capabilities, portfolio highlights, mixed size tiles, product tour. Avoid: Tiles with only an icon and a sentence. Each tile should show a real state of the product or a real piece of work. One bento per page.
- `media`: [Media](https://mian.ro/ai/components/media.md): Images, video and illustrations in a fixed aspect ratio, with captions and a labelled placeholder for photos still to come. Use for: large image, video, photo with caption, image placeholder, screenshot. Avoid: Stock photos of people at laptops. Use the product, real photography or a described placeholder.
- `testimonial`: [Testimonial](https://mian.ro/ai/components/testimonial.md): One large pull quote, or a wall of short customer quotes. Use for: customer quote, testimonials, reviews, social proof, pull quote. Avoid: Never invent quotes, names or roles. One specific, attributed quote beats a wall of vague ones.
- `pricing`: [Pricing](https://mian.ro/ai/components/pricing.md): Plan tiers with a featured plan, feature lists and a monthly/yearly switch in pure CSS. Use for: saas pricing, pricing plans, subscription tiers, monthly yearly toggle, compare plans. Avoid: More than four tiers, or hiding every price behind “Contact us”.
- `cta`: [Call to action](https://mian.ro/ai/components/cta.md): A closing band that asks for one thing, sign up, book, subscribe, with an optional inline email form. Use for: call to action, sign up band, newsletter signup, book a demo, final section. Avoid: A CTA band after every section. Once, near the end, asking for the same action as the hero.
- `site-footer`: [Site footer](https://mian.ro/ai/components/site-footer.md): A website footer: brand, link columns, legal line and an optional giant wordmark. Use for: website footer, footer links, legal line, sitemap links, giant wordmark footer. Avoid: Links to pages that do not exist.
- `article`: [Article](https://mian.ro/ai/components/article.md): A long-read layout: headline, byline, a comfortable reading column, wide figures, drop cap and pull quotes. Use for: blog post, long read, case study text, editorial article, essay. Avoid: Lines wider than about 75 characters; ads inside the text.
- `app-shell`: [App shell](https://mian.ro/ai/components/app-shell.md): The frame of a web app: a sidebar, a top bar and a content area that becomes a drawer layout on small screens. Use for: admin dashboard layout, web app frame, sidebar and top bar, saas app, back office. Avoid: Marketing sections (hero, bento) inside an app, apps are built from stats, tables, forms and charts.
- `docs-layout`: [Docs layout](https://mian.ro/ai/components/docs-layout.md): A documentation page: navigation on the left, the reading column, and an “on this page” list on the right, collapsing to a menu on small screens. Use for: documentation site, developer docs, knowledge base, help center, guide with table of contents. Avoid: Code as screenshots; walls of text without headings.
- `auth`: [Sign-in page](https://mian.ro/ai/components/auth.md): A split sign-in or sign-up page: the form on one side, the brand and a quote or image on the other. Use for: sign in page, login, sign up page, register, create account. Avoid: Asking for more than you need; blocking paste in password fields.
- `price-list`: [Price list](https://mian.ro/ai/components/price-list.md): A menu-style list of items with dotted leaders to the price, for restaurants, salons, studios and services. Use for: restaurant menu, service prices, salon price list, menu with prices, rates. Avoid: Menus as images or PDFs.
- `team`: [Team](https://mian.ro/ai/components/team.md): A grid of people with a portrait, name and role. Use for: team members, our people, staff, speakers, founders. Avoid: Invented people. Use real names and roles, or leave it out.
- `product-card`: [Product card](https://mian.ro/ai/components/product-card.md): Products in a shop grid: image, name, variant, price and a badge, the whole card is one link. Use for: product grid, shop listing, ecommerce products, catalogue, collection page. Avoid: Fake scarcity badges and struck-through prices that were never real.
- `story-card`: [Story card](https://mian.ro/ai/components/story-card.md): Articles and posts in a grid or as a lead story: image, kicker, headline, excerpt and byline, the headline is the link. Use for: blog index, articles grid, news list, latest posts, magazine front page. Avoid: Every story the same size, make the lead story larger.
- `agenda`: [Agenda](https://mian.ro/ai/components/agenda.md): A schedule of times, sessions, speakers and tracks, for events, courses and programmes. Use for: event schedule, conference agenda, timetable, programme, course schedule. Avoid: Sessions without times or rooms.
- `faq`: [FAQ section](https://mian.ro/ai/components/faq.md): Questions and answers beside a sticky heading, built on the accordion. Use for: faq, frequently asked questions, questions and answers, objections, help questions. Avoid: Questions nobody asks. Answer real objections (price, risk, effort, lock-in) in one or two sentences.
- `figures`: [Figures](https://mian.ro/ai/components/figures.md): Large numbers with a line of context each, results, scale or specs, set in display type. Use for: key numbers, statistics band, results, metrics, impact numbers. Avoid: Numbers without context or real source. Do not add metrics that are not in the brief.
- `process`: [Process](https://mian.ro/ai/components/process.md): Numbered steps in a row, how it works, how to order, what happens next. Use for: how it works, our process, steps, onboarding steps, what happens next. Avoid: More than five steps, or steps that are really features.