Skip to content

Components

135 components across 8 categories. Every one of them works in all 67 noodles, in light and dark.

Actions

Button

Triggers an action. Six colour roles, five variants, four sizes, icon-only, loading and disabled states.

Button group

Joins related buttons into one control, horizontally or vertically.

Toggle group

A set of pressable buttons, single choice like a segmented control, or multiple like a formatting toolbar.

Dropdown menu

A menu of actions anchored to a trigger. Built on the native Popover API: top layer, light dismiss and Escape are free.

Copy button

Copies text to the clipboard and confirms it in place, visually and for screen readers.

Swap

An icon toggle that swaps between two states with a small rotation, menu/close, play/pause, sun/moon.

Hold to confirm

A button that must be held for a moment before it acts. For actions that are hard to undo, without a second dialog.

Forms

Field

Label, control, hint and error message wired together, plus form and fieldset layout.

Input

Single-line text entry. Styles every native input type: text, email, password, search, number, date, time, color.

Textarea

Multi-line text. Grows with its content in browsers that support field-sizing.

Select

A styled native select. Keeps the platform picker on mobile and full keyboard support everywhere.

Checkbox

Native checkbox, restyled. Checked, indeterminate, disabled and invalid states; any colour role.

Radio

Native radio button, restyled. Use for one choice from a short list.

Switch

An on/off toggle for settings that apply immediately. A native checkbox with role="switch".

Slider

A styled native range input with a filled track. Works without JS; mian.js paints the fill in WebKit.

File input

A styled native file picker, and a drag-and-drop zone that wraps one.

Input group

An input with leading or trailing addons, text, icons or buttons, inside one border.

Number input

A stepper: a numeric input between decrement and increment buttons. Respects min, max and step; hold to repeat.

OTP input

One-time-code entry. Auto-advances, handles backspace and paste, supports SMS autofill on the first box.

Rating

Star rating built from radio buttons, so it submits with a form and needs no JavaScript.

Combobox

Autocomplete: a text input that filters a listbox as you type. Keyboard navigation and aria-activedescendant included.

Calendar

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.

Tag input

Type to add tags as removable chips. Enter or comma adds, Backspace removes, pasted lists are split.

Password field

A password input with a show/hide toggle and an optional four-step strength meter.

Swatch picker

Pick a colour (or any visual option) from round swatches. Real radio buttons underneath.

Time slots

A grid of bookable times, available, nearly full or taken, built on radio buttons.

Seat map

Pick seats for a cinema, theatre, bus or venue: rows, an aisle, taken and accessible seats, and a legend.

Option cards

Selectable cards for shipping, plans or payment, and pill options for sizes and variants.

Date range

Pick a period for a report: presets for the common ranges and two dates for anything else.

Task list

A checklist where a finished task is struck through as the box is ticked.

Duration picker

Hours, minutes and seconds as three small fields that move on as you type.

Data display

Typography

Headings, lead, body, links, quotes and lists that follow the noodle's heading and body fonts.

Avatar

An image, initials or icon representing a person or entity. Sizes, shapes, presence and stacked groups.

Badge

A compact label for status, counts and categories.

Chip

Removable tags and toggleable filter chips.

Card

A surface for grouped content: header, body, footer, media and actions.

Table

Data tables with hover, striping, compact density, selection, numeric alignment and sortable columns.

List

Bordered lists of rows with titles, descriptions, avatars and trailing content, or links.

Kbd

Keyboard keys and shortcuts.

Code

Inline code and code blocks in the noodle's monospace font.

Stat

Key metrics with labels and trend deltas, alone or in a joined row.

Chart

Bar, horizontal bar, line/area and donut charts from plain markup. Each noodle draws them in its own style.

Timeline

A vertical sequence of events with markers, titles, times and content.

Accordion

Stacked disclosure sections. Native <details>; give them the same name for exclusive open.

Description list

Key–value pairs for detail views and summaries.

Divider

A horizontal or vertical rule, optionally with a label.

Skeleton

Loading placeholders shaped like the content that is coming.

Empty state

What to show when there is nothing to show, with a next step.

Indicator

A count or status dot pinned to the corner of any element, avatars, icons, buttons.

Chat

Message bubbles for conversations and assistants, with avatars, timestamps and a typing state.

Tree view

Nested, collapsible lists, file trees, navigation and outlines, built on native <details>.

Kanban board

Columns of cards for a pipeline, sprint or sales process, counts, colour dots and card meta.

Usage meter

Plan usage against limits, seats, storage, API calls, with warning and over-limit states.

Notification list

An inbox of notifications with unread markers, icons or avatars, times and inline actions.

Invoice

A printable invoice or receipt: parties, line items, totals with tax, and payment notes.

Funnel

Conversion through the stages of a funnel, visits to signups to paid, with the rate between steps.

Leaderboard

A ranked list, top sellers, customers, contributors, with medals for the top three and a trend.

Product gallery

A main image with clickable thumbnails, pure CSS, keyboard-friendly, up to six images.

Review summary

An average rating with stars, the number of reviews and a distribution of 5 to 1 stars.

Social post

A post in a feed: author, time, text, media and like / reply / repost / share actions with counts.

Profile header

The top of a profile page: cover, avatar, name, bio, details, stats and a follow button.

Comment thread

Nested comments with replies, times and reply / like actions.

Filter bar

The toolbar above a list or table: search, quick filter chips, sort, a view switch and the result count.

Bulk actions

A bar that appears when rows are selected, the count, actions for the selection, and a way out, with select-all.

Curriculum

Modules and lessons of a course with durations, lesson type, done and locked states, each module a native disclosure.

Listing card

A property, rental or venue in a results grid: photo, price, key facts, address and a save toggle, the title is the link.

KPI card

One number that matters, with its change, a sparkline you can hover and a line of context.

Heatmap

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.

Gauge

A half-circle meter for one value against a known range: a score, a quota, a target.

Breakdown

How a total splits into parts: one stacked bar and a list with each part’s value and share.

Uptime

A status page row: a service, its state today and one bar per day of history. Hover a day for what happened.

Voice note

An audio message as a waveform: play, pause, see where you are and drag to seek.

Feedback

Alert

Inline messages for information, success, warnings and errors, with optional actions and dismiss.

Toast

Temporary notifications. Mian.toast() from script, or data-mn-toast on a button. Pause on hover, stack, dismiss.

Progress

Linear progress, determinate from aria-valuenow, or indeterminate without it.

Radial progress

Circular progress with a centred value.

Spinner

Indeterminate loading indicators: ring and dots.

Banner

A full-width announcement bar for launches, maintenance notices or cookie-free notes. Dismissible.

Onboarding checklist

The first steps of a new account, with progress, done states and one action per step.

Loader

Eight loading indicators, dots, bars, wave, grid, pulse, orbit, ring and a top-of-page line, in the current colour.

Cookie consent

A consent notice with equal-weight Accept and Reject, and per-purpose switches, honest by default, dismissible.

Overlays

Modal

A dialog on the native <dialog> element: focus trap, Escape, inert background and focus return from the platform.

Drawer

A panel that slides in from the right, left or bottom. Also a native <dialog>.

Popover

Rich, non-modal content anchored to a trigger, on the native Popover API.

Tooltip

Short labels on hover and focus. Pure CSS; the text is a real element referenced by aria-describedby.

Command palette

Search-and-run: filterable, grouped, keyboard-driven. Inline or in a dialog opened with ⌘K.

Hover card

A preview card that appears when hovering or focusing a link, profiles, link previews, definitions.

Context menu

A menu that opens at the pointer on right-click, or from the keyboard with Shift+F10.

Layout & utilities

Collapse

A single show/hide section. Native <details>, no JavaScript.

Carousel

A horizontally scrolling, snapping track. Swipe, trackpad and keyboard; optional arrows and dots.

Theme controller

Switch noodle and light/dark mode for a page, or scope a noodle to any element.

Scroll area

A scrolling region with thin scrollbars and shadows that appear only where more content is hidden.

Mockup

Browser, window and phone frames for screenshots, demos and landing pages.

Dashboard grid

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.

Gradient backdrop

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.

Motion

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.

Sections

Slides

A presentation website: full-height slides that snap, with arrow-key navigation, a counter and progress.

Jobs list

Open roles for a careers page: title, team, location and type, the whole row one link.

Work grid

Selected projects for an agency or portfolio in mixed sizes: the image, client, what was made and the outcome, each tile one link.

Comparison table

Plans or products side by side: grouped feature rows, included and not-included marks, a highlighted column and a sticky header.

Changelog

Release notes by date: version, a headline, and changes tagged New, Improved or Fixed.

Integrations

A directory of integrations or partners: mark, name, category and one line on what it does, each tile one link.

Contact section

The end of a company or agency page: what happens after you write, direct details, and a short form, side by side.

Page layout

Containers, section rhythm, display type and grids, the frame every page is built in.

Site header

A website header: brand, navigation, actions, and a menu that works without JavaScript on small screens.

Hero

The opening section of a page: a display headline, an intro, actions and optional media, stacked, split or centred.

Logo cloud

A quiet row of customer or partner wordmarks, with an optional caption.

Feature grid

Features as a ruled editorial grid or with icons, plus a check list for plans and specs.

Bento grid

A grid of tiles in mixed sizes for showing several product details at once.

Media

Images, video and illustrations in a fixed aspect ratio, with captions and a labelled placeholder for photos still to come.

Testimonial

One large pull quote, or a wall of short customer quotes.

Pricing

Plan tiers with a featured plan, feature lists and a monthly/yearly switch in pure CSS.

Call to action

A closing band that asks for one thing, sign up, book, subscribe, with an optional inline email form.

Site footer

A website footer: brand, link columns, legal line and an optional giant wordmark.

Article

A long-read layout: headline, byline, a comfortable reading column, wide figures, drop cap and pull quotes.

App shell

The frame of a web app: a sidebar, a top bar and a content area that becomes a drawer layout on small screens.

Docs layout

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.

Sign-in page

A split sign-in or sign-up page: the form on one side, the brand and a quote or image on the other.

Price list

A menu-style list of items with dotted leaders to the price, for restaurants, salons, studios and services.

Team

A grid of people with a portrait, name and role.

Product card

Products in a shop grid: image, name, variant, price and a badge, the whole card is one link.

Story card

Articles and posts in a grid or as a lead story: image, kicker, headline, excerpt and byline, the headline is the link.

Agenda

A schedule of times, sessions, speakers and tracks, for events, courses and programmes.

FAQ section

Questions and answers beside a sticky heading, built on the accordion.

Figures

Large numbers with a line of context each, results, scale or specs, set in display type.

Process

Numbered steps in a row, how it works, how to order, what happens next.

Pages
Introduction Installation Theming & noodles Frameworks Accessibility Designing websites AI agents, API & MCP All components All noodles All templates
Templates
Ledger Pipeline Quanta Beacon Relay Forma Tessera Noir Villa Orsola Nido Casa Hana Kiln Nove Circle Field Notes Lumen Pace Aldini Studio Ito Orto Dot One Mist Signal 26
Actions
Button Button group Toggle group Dropdown menu Copy button Swap Hold to confirm
Forms
Field Input Textarea Select Checkbox Radio Switch Slider File input Input group Number input OTP input Rating Combobox Calendar Tag input Password field Swatch picker Time slots Seat map Option cards Date range Task list Duration picker
Data display
Typography Avatar Badge Chip Card Table List Kbd Code Stat Chart Timeline Accordion Description list Divider Skeleton Empty state Indicator Chat Tree view Kanban board Usage meter Notification list Invoice Funnel Leaderboard Product gallery Review summary Social post Profile header Comment thread Filter bar Bulk actions Curriculum Listing card KPI card Heatmap Gauge Breakdown Uptime Voice note
Feedback
Alert Toast Progress Radial progress Spinner Banner Onboarding checklist Loader Cookie consent
Overlays
Modal Drawer Popover Tooltip Command palette Hover card Context menu
Navigation
Navbar Tabs Breadcrumbs Pagination Steps Sidebar Dock Stories bar Page header
Layout & utilities
Collapse Carousel Theme controller Scroll area Mockup Dashboard grid Gradient backdrop Motion
Sections
Slides Jobs list Work grid Comparison table Changelog Integrations Contact section Page layout Site header Hero Logo cloud Feature grid Bento grid Media Testimonial Pricing Call to action Site footer Article App shell Docs layout Sign-in page Price list Team Product card Story card Agenda FAQ section Figures Process
Noodles
Mian Yangchun Linguine Penne Chitarra Shio Spaghetti Bucatini Hofun Hiyamugi Ramyeon Fettuccine Lasagne Pappardelle Paccheri Farfalle Yinzhen Quadretti Acini di pepe Kalguksu Sanuki Hakata Ditalini Juksing Kishimen LaMian Somen Capellini Longxu Misua Bún Kuzukiri Sotanghon Harusame Fensi Tokoroten Nagashi Liangfen Dangmyeon Woonsen Shirataki Cha Soba Daoxiao Pici Naengmyeon Hōtō Ramen Biangbiang Maccheroni Rigatoni Fusilli Jjajang Laksa Soba Tagliatelle Tajarin Mafaldine Corzetti Inaniwa Yifu Udon Gnocchi Cavatelli Orecchiette Mee Mixian Pho
↑↓navigate↵openescclose
Choose a noodle

Minimal

Flat

Pixel

Linear

Thin

Glass

Textured

Bold

Elegant

Rounded
On this page