Search
Tip: press ⌘K or Ctrl K anywhere.
Actions
Button Triggers an action 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 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 actsForms
Field Label, control, hint and error message wired together, plus form and fieldset layout Input Single-line text entry Textarea Multi-line text Select A styled native select Checkbox Native checkbox, restyled Radio Native radio button, restyled Switch An on/off toggle for settings that apply immediately Slider A styled native range input with a filled track 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 OTP input One-time-code entry 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 Calendar A month grid for picking a date, on its own or in a popover as a date field Tag input Type to add tags as removable chips 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 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 typeData 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 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 Timeline A vertical sequence of events with markers, titles, times and content Accordion Stacked disclosure sections 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 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 Voice note An audio message as a waveform: play, pause, see where you are and drag to seekFeedback
Alert Inline messages for information, success, warnings and errors, with optional actions and dismiss Toast Temporary notifications 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 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, dismissibleOverlays
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 Popover Rich, non-modal content anchored to a trigger, on the native Popover API Tooltip Short labels on hover and focus Command palette Search-and-run: filterable, grouped, keyboard-driven 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+F10Navigation
Navbar A top bar with brand, links and actions Tabs Switch between views Breadcrumbs Where you are in a hierarchy, with links back up Pagination Move between pages of results Steps Progress through a multi-step flow, horizontal or vertical Sidebar Vertical application navigation with groups, icons and badges Dock A bottom navigation bar for mobile apps and compact layouts, floating or in the page Stories bar A scrolling row of avatars with a ring for new stories and a grey ring for seen ones Page header The top of an application page: where you are, what this is, its facts and the actions you can takeLayout & utilities
Collapse A single show/hide section Carousel A horizontally scrolling, snapping track 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 Gradient backdrop Soft mesh gradients for a band, a hero or a media frame 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 changesSections
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 nextNoodles
Mian The noodle itself. Black, white, nothing else. Yangchun Clear broth, quietly refined. Linguine Warm paper, a serif voice, one clay colour. Penne Plain, neutral, cut once. Chitarra Black, white, one blue. Cut on steel strings. Shio The clearest broth. Light, airy, afloat. Spaghetti Pasta, tomato, a poster. Bucatini A strand with a hole through it. Hofun Wide, flat, silky. Hiyamugi White, cold, one coloured strand. Ramyeon Three minutes, a terminal and a timer. Fettuccine One sheet, many ribbons. Tonal and friendly. Lasagne Flat sheets, stacked in layers. Pappardelle Wide ribbons of flat colour. Paccheri Big flat tubes. Primary colours. Farfalle Butterflies in pastel. Yinzhen Silver needles. A system made of dots. Quadretti Little squares, graph paper, pixels. Acini di pepe Peppercorn dots and halftone. Kalguksu Knife-cut, precise, clean. Sanuki Square-cut, firm, exact. Hakata Thin, straight, fast. Ditalini Tiny tubes. A dense, calm ledger. Juksing Bamboo-pole noodles. Straight, jointed, springy. Kishimen Wide, flat, glossy, with dancing flakes. LaMian Long, smooth, dependable. Somen Hair-thin, white, served on ice. Capellini Angel hair: light as air. Longxu Folded, pulled, doubled, engraved in hairlines. Misua Finest thread, never cut. Bún Delicate, rosy, light. Kuzukiri Clear glass in ice water. Black and white. Sotanghon Real transparency. You see what is behind. Harusame Clear, cool, layered. Fensi Liquid glass. Tokoroten Pressed through a grid. Glass tiles. Nagashi Down a bamboo chute in running water. Liangfen Thick glass bricks. Cool, chunky, clear. Dangmyeon Smoked glass, sesame gloss. Woonsen Crystal clear, a prism at the edge. Shirataki Translucent, jelly-soft, bouncy. Cha Soba Matcha, calm, considered. Daoxiao Shaved from the block. Rough-hewn. Pici Hand-rolled, uneven, honest. Naengmyeon Ice-cold, in a brushed-steel bowl. Hōtō Rustic, earthy, simmered. Ramen Bold, loud, high contrast. Biangbiang Belt-wide, slapped, loud. Maccheroni Thick ink line, cut-out shadow, sweet colours. Rigatoni Ridged tubes. Poster stripes. Fusilli Twisted, springy, a little off-axis. Jjajang Glossy black, bold and rich. Laksa Spicy, creamy, layered colour. Soba Earthy, editorial, restrained. Tagliatelle Egg ribbons, cut by hand. Editorial. Tajarin Forty yolks and shaved truffle. Mafaldine Royal ribbons with ruffled edges. Corzetti Pasta coins, stamped by hand. Inaniwa Silken, ivory, courtly. Yifu Lacquer red and gold, for celebrations. Udon Thick, soft, warm. Gnocchi Soft pillows. Clay you want to press. Cavatelli One material, pressed in and pushed out. Orecchiette Little ears, pressed with a thumb. Mee Golden, round, cheerful. Mixian Round, soft, served on small plates. Pho Fresh, herbal, clean.No results.