[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":18,"examples":488,"showcases":799,"links":800,"dates":801},"\u002Fexamples\u002Fcomponents","hub","components",true,{"title":9,"description":10,"og_image":11},"SaaS UI component examples - Nicelydone","Browse UI component design examples from SaaS apps, including buttons, forms, menus, and data tables. Preview each component and explore related designs.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F256b0a40-6b1f-4ed0-a4b2-eb7c708c0c50.png",[13,16],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":4},"SaaS UI component examples",{"title":17,"eyebrow":19,"description":10,"sections":20,"body":487},"SaaS design examples",[21,60,99],{"title":22,"description":23,"links":24},"Inputs and controls","Enter information and choose an action.",[25,30,35,40,45,50,55],{"id":26,"label":27,"to":28,"description":29},175,"Button","\u002Fexamples\u002Fcomponents\u002Fbutton","Explore how interfaces make actions visible and distinguish their importance. Look at button labels, icons, and visual states in the context of the task they support.",{"id":31,"label":32,"to":33,"description":34},243,"Form element","\u002Fexamples\u002Fcomponents\u002Fform-element","Explore how interfaces combine a field with the information needed to complete it. Look at label placement, supporting text, and validation messages around individual form controls.",{"id":36,"label":37,"to":38,"description":39},190,"Dropdown menu","\u002Fexamples\u002Fcomponents\u002Fdropdown-menu","See how interfaces reveal a list of actions from a compact trigger. Explore how menu labels, groups, and item states organize the available choices.",{"id":41,"label":42,"to":43,"description":44},225,"Sorting & filtering","\u002Fexamples\u002Fcomponents\u002Fsorting-filtering","See how interfaces place sorting and filtering controls beside a collection. Explore how selected conditions, option menus, and reset actions fit into the available space.",{"id":46,"label":47,"to":48,"description":49},201,"Input text","\u002Fexamples\u002Fcomponents\u002Finput-text","Explore how forms collect a short piece of text. Look at how labels, placeholder examples, and supporting messages guide entry without replacing the field's meaning.",{"id":51,"label":52,"to":53,"description":54},204,"Input select","\u002Fexamples\u002Fcomponents\u002Finput-select","Explore how forms present a single choice from a set of options. Look at field labels, option text, and selected values within select inputs.",{"id":56,"label":57,"to":58,"description":59},236,"Toggle\u002FSwitch","\u002Fexamples\u002Fcomponents\u002Ftoggle-switch","Explore how interfaces turn a setting on or off. Look at how switch labels, supporting descriptions, and visible states explain what the setting controls.",{"title":61,"description":62,"links":63},"Content and states","Present data, settings, plans, and empty states.",[64,69,74,79,84,89,94],{"id":65,"label":66,"to":67,"description":68},248,"Table","\u002Fexamples\u002Fcomponents\u002Ftable-2","See how interfaces organize records into rows and columns. Explore how headers, cells, selection controls, and row actions fit within a data table component.",{"id":70,"label":71,"to":72,"description":73},250,"Settings panel","\u002Fexamples\u002Fcomponents\u002Fsettings-panel","See how interfaces group configuration controls in a dedicated panel. Explore how section labels, explanations, and individual settings fit around the item being configured.",{"id":75,"label":76,"to":77,"description":78},303,"Pricing section","\u002Fexamples\u002Fcomponents\u002Fpricing-section","Explore how websites present subscription choices within a page section. Look at how prices, feature lists, billing options, and selection actions are arranged across plans.",{"id":80,"label":81,"to":82,"description":83},302,"Empty state","\u002Fexamples\u002Fcomponents\u002Femptystate","See how interfaces explain why a section has no content. Explore how a short message, supporting visual, and relevant action introduce what can appear in the empty space.",{"id":85,"label":86,"to":87,"description":88},167,"Alert","\u002Fexamples\u002Fcomponents\u002Falert","See how interfaces draw attention to information that needs a response. Explore how alert messages combine a status cue, an explanation, and relevant actions within a compact space.",{"id":90,"label":91,"to":92,"description":93},226,"Skeleton","\u002Fexamples\u002Fcomponents\u002Fskeleton","See how interfaces reserve space while content loads. Explore how placeholder shapes reflect the expected layout of text, images, and repeated items.",{"id":95,"label":96,"to":97,"description":98},213,"Progress indicator","\u002Fexamples\u002Fcomponents\u002Fprogress-indicator","See how interfaces communicate progress through a task or process. Explore how bars, labels, and completion states present what is finished and what remains.",{"title":100,"links":101},"More categories",[102,107,112,117,122,127,132,137,142,147,152,157,162,167,172,177,182,187,192,197,202,207,212,217,222,227,232,237,242,247,252,257,262,267,272,277,282,287,292,297,302,307,312,317,322,327,332,337,342,347,352,357,362,367,372,377,382,387,392,397,402,407,412,417,422,427,432,437,442,447,452,457,462,467,472,477,482],{"id":103,"label":104,"to":105,"description":106},284,"Modal","\u002Fexamples\u002Fcomponents\u002Fmodal","Explore how interfaces present a focused task above the current page. Look at how modal headings, content, and close or completion actions define the temporary workspace.",{"id":108,"label":109,"to":110,"description":111},187,"Code block","\u002Fexamples\u002Fcomponents\u002Fcode-block","Explore how interfaces display code separately from surrounding text. Look at syntax formatting, language labels, and supporting controls that frame a snippet for reading or reuse.",{"id":113,"label":114,"to":115,"description":116},196,"Inline editing","\u002Fexamples\u002Fcomponents\u002Finline-editing","See how interfaces let people change a value where it is displayed. Explore how editable text, field states, and save or cancel controls fit within the existing layout.",{"id":118,"label":119,"to":120,"description":121},256,"Theme settings","\u002Fexamples\u002Fcomponents\u002Ftheme-settings","See how interfaces present appearance choices. Explore how theme previews, color options, and selection states communicate changes to the look of the product.",{"id":123,"label":124,"to":125,"description":126},220,"Drawer","\u002Fexamples\u002Fcomponents\u002Fside-sheet-drawer","Explore how interfaces open details or controls beside the main workspace. Look at how drawer width, headings, and actions keep the secondary task connected to its context.",{"id":128,"label":129,"to":130,"description":131},183,"Color picker","\u002Fexamples\u002Fcomponents\u002Fcolor-picker","See how interfaces let people choose or enter a color. Explore how swatches, value fields, and selection controls fit together within the color picker.",{"id":133,"label":134,"to":135,"description":136},189,"FAQ","\u002Fexamples\u002Fcomponents\u002Ffaq","See how websites organize answers to recurring questions. Explore how question labels, answer text, and expandable sections make detailed information available within an FAQ component.",{"id":138,"label":139,"to":140,"description":141},179,"Checkbox & radio","\u002Fexamples\u002Fcomponents\u002Fcheckbox-radio","See how forms distinguish choosing several options from choosing one. Explore how checkbox and radio controls present labels, selected states, and groups of related choices.",{"id":143,"label":144,"to":145,"description":146},247,"Notification Toast","\u002Fexamples\u002Fcomponents\u002Fnotification-element","See how interfaces provide brief feedback without replacing the current page. Explore how toast messages present a result, a related action, and an optional dismiss control.",{"id":148,"label":149,"to":150,"description":151},232,"Testimonial","\u002Fexamples\u002Fcomponents\u002Ftestimonial","Explore how websites give a customer quote its own space. Look at how quotation text, names, roles, and company details establish the source of the statement.",{"id":153,"label":154,"to":155,"description":156},238,"Video player","\u002Fexamples\u002Fcomponents\u002Fvideo-player","Explore controls for watching video within an interface. Look at how playback actions, the timeline, and display options fit around the video itself.",{"id":158,"label":159,"to":160,"description":161},214,"Popover","\u002Fexamples\u002Fcomponents\u002Fpopover","See how interfaces reveal a small amount of content beside a control. Explore how popover placement and layout keep supporting details connected to the triggering element.",{"id":163,"label":164,"to":165,"description":166},177,"Breadcrumb","\u002Fexamples\u002Fcomponents\u002Fbreadcrumb","See how interfaces show the current location within a hierarchy. Explore how linked parent labels, separators, and the current item fit within a breadcrumb trail.",{"id":168,"label":169,"to":170,"description":171},254,"Tooltip","\u002Fexamples\u002Fcomponents\u002Ftooltip-element","Explore how interfaces explain a control with a short contextual label. Look at tooltip text and placement in relation to the element it describes.",{"id":173,"label":174,"to":175,"description":176},224,"Social proof","\u002Fexamples\u002Fcomponents\u002Fsocial-proof","See how websites present evidence from customers and other organizations. Explore how logos, figures, and short statements support the product message within a page section.",{"id":178,"label":179,"to":180,"description":181},239,"Walkthrough","\u002Fexamples\u002Fcomponents\u002Fwalkthrough","See how interfaces introduce a task through a series of explanations. Explore how walkthrough content and navigation controls connect each step with the feature being introduced.",{"id":183,"label":184,"to":185,"description":186},258,"Header","\u002Fexamples\u002Fcomponents\u002Fheader","Explore how websites arrange navigation and key actions at the top of a page. Look at how the logo, menu, and account or signup controls share the header.",{"id":188,"label":189,"to":190,"description":191},241,"Click to copy","\u002Fexamples\u002Fcomponents\u002Fclick-to-copy","See how interfaces make a value available for copying. Explore how the copy control sits beside text, a link, or a code snippet and communicates the result of the action.",{"id":193,"label":194,"to":195,"description":196},202,"Footer","\u002Fexamples\u002Fcomponents\u002Ffooter","See how websites organize links and supporting information at the end of a page. Explore how footer columns, company details, and secondary actions fit together.",{"id":198,"label":199,"to":200,"description":201},249,"Timeline & history","\u002Fexamples\u002Fcomponents\u002Ftimeline-history","Explore how interfaces display changes or events in sequence. Look at how time labels, event details, and visual connectors structure a compact history component.",{"id":203,"label":204,"to":205,"description":206},240,"Horizontal navigation","\u002Fexamples\u002Fcomponents\u002Fhorizontal-navigation","See how interfaces arrange primary or section links across a row. Explore how labels, active states, and secondary menus show the available destinations.",{"id":208,"label":209,"to":210,"description":211},209,"Vertical navigation","\u002Fexamples\u002Fcomponents\u002Fvertical-navigation","See how interfaces organize destinations in a sidebar. Explore how navigation groups, icons, and selected states relate to the current page and the product structure.",{"id":213,"label":214,"to":215,"description":216},244,"Message","\u002Fexamples\u002Fcomponents\u002Fmessage","See how interfaces present notices within the page. Explore how message text, emphasis, and related actions explain a change, requirement, or current condition near the affected content.",{"id":218,"label":219,"to":220,"description":221},227,"Stepper","\u002Fexamples\u002Fcomponents\u002Fstepper","Explore how interfaces show a task as a sequence of steps. Look at how labels, current position, and completion states distinguish the stages of the process.",{"id":223,"label":224,"to":225,"description":226},255,"Upgrade your plan","\u002Fexamples\u002Fcomponents\u002Fupgrade-your-plan","See how interfaces introduce additional access through a paid plan. Explore how upgrade components connect a feature or allowance with plan information and an upgrade action.",{"id":228,"label":229,"to":230,"description":231},261,"Icon","\u002Fexamples\u002Fcomponents\u002Ficon","Explore how interfaces use symbols alongside actions and information. Look at how icon shape, size, and placement relate to nearby labels and the meaning of the control.",{"id":233,"label":234,"to":235,"description":236},233,"Tabs","\u002Fexamples\u002Fcomponents\u002Ftabs","Explore how interfaces switch between related panels of content. Look at how tab labels, active states, and spacing establish a clear relationship with the displayed panel.",{"id":238,"label":239,"to":240,"description":241},235,"Tips","\u002Fexamples\u002Fcomponents\u002Ftips","See how interfaces offer short guidance near a task. Explore how tips combine useful text with links or actions without taking over the surrounding workspace.",{"id":243,"label":244,"to":245,"description":246},286,"Vertical list","\u002Fexamples\u002Fcomponents\u002Fvertical-list","Explore how interfaces arrange items in a sequence of rows. Look at how repeated labels, supporting details, and actions establish a consistent structure down the list.",{"id":248,"label":249,"to":250,"description":251},283,"Grid list","\u002Fexamples\u002Fcomponents\u002Fgrid-list","See how interfaces arrange repeated items across columns. Explore how grid spacing and item structure support scanning a collection of previews or records.",{"id":253,"label":254,"to":255,"description":256},174,"Card","\u002Fexamples\u002Fcomponents\u002Fcard","Explore how interfaces package an item into a compact preview. Look at how images, titles, supporting details, and actions are arranged within a card.",{"id":258,"label":259,"to":260,"description":261},295,"Input search","\u002Fexamples\u002Fcomponents\u002Finput-search","See how interfaces provide a starting point for finding content. Explore how search fields combine a query, a hint, and supporting actions within a compact control.",{"id":263,"label":264,"to":265,"description":266},188,"File upload input","\u002Fexamples\u002Fcomponents\u002Ffile-upload-input","See how forms ask people to attach a file. Explore how upload inputs explain file selection and present selected items, requirements, or transfer status.",{"id":268,"label":269,"to":270,"description":271},169,"Avatar","\u002Fexamples\u002Fcomponents\u002Favatar","Explore how interfaces represent people and accounts in a small space. Look at how profile images, initials, and grouped avatars relate to names and surrounding content.",{"id":273,"label":274,"to":275,"description":276},277,"Button group","\u002Fexamples\u002Fcomponents\u002Fbutton-group","See how interfaces place related actions together. Explore how grouped buttons use labels, spacing, and emphasis to show the relationship between available choices.",{"id":278,"label":279,"to":280,"description":281},245,"Tag","\u002Fexamples\u002Fcomponents\u002Ftag","See how interfaces label content with compact categories or attributes. Explore how tag text, color, and placement relate to the item and any available filtering action.",{"id":283,"label":284,"to":285,"description":286},280,"Confetti","\u002Fexamples\u002Fcomponents\u002Fconfetti","Explore how interfaces add a visual celebration to a completed action. Look at how confetti relates to the success message and the controls that remain available afterward.",{"id":288,"label":289,"to":290,"description":291},251,"Reorder","\u002Fexamples\u002Fcomponents\u002Freorder","Explore how interfaces let people rearrange a sequence. Look at handles, movement controls, and position cues within lists of items that can change order.",{"id":293,"label":294,"to":295,"description":296},172,"Benefit List","\u002Fexamples\u002Fcomponents\u002Fbenefit-list","See how websites explain what a product offers through a short list. Explore how headings, descriptions, and supporting visuals divide the benefits into readable sections.",{"id":298,"label":299,"to":300,"description":301},278,"Illustration","\u002Fexamples\u002Fcomponents\u002Fillustration","See how interfaces use illustration to explain a feature or support a message. Explore how decorative and explanatory imagery fits beside text and actions.",{"id":303,"label":304,"to":305,"description":306},285,"QR code","\u002Fexamples\u002Fcomponents\u002Fqr-code","Explore how interfaces present a scannable code within a task. Look at how the QR code is paired with instructions, destination context, and related controls.",{"id":308,"label":309,"to":310,"description":311},168,"Accordion","\u002Fexamples\u002Fcomponents\u002Faccordion","See how interfaces reveal supporting content one section at a time. Explore accordion headers, expanded states, and content spacing in designs that keep related information together.",{"id":313,"label":314,"to":315,"description":316},170,"Audio player","\u002Fexamples\u002Fcomponents\u002Faudio-player","Explore controls for listening to audio within an interface. Look at how playback actions, track information, and progress are arranged within the player component.",{"id":318,"label":319,"to":320,"description":321},186,"Charts","\u002Fexamples\u002Fcomponents\u002Fcharts","See how interfaces present data in a compact visual component. Explore how chart labels, legends, and supporting values make a graph readable within a page or dashboard.",{"id":323,"label":324,"to":325,"description":326},217,"Query builder","\u002Fexamples\u002Fcomponents\u002Fquery-builder","See how interfaces let people express a query through controls. Explore how fields, operators, values, and condition groups are arranged to show the query structure.",{"id":328,"label":329,"to":330,"description":331},223,"Slider","\u002Fexamples\u002Fcomponents\u002Fslider","Explore how interfaces let people adjust a value along a range. Look at the relationship between the slider, its current value, and the labels that explain its limits.",{"id":333,"label":334,"to":335,"description":336},257,"Input number","\u002Fexamples\u002Fcomponents\u002Finput-number","See how interfaces ask for a numeric value. Explore how field labels, units, and increment controls provide context for entering or changing a number.",{"id":338,"label":339,"to":340,"description":341},252,"Input tag","\u002Fexamples\u002Fcomponents\u002Finput-tag","See how interfaces let people enter or choose several short labels. Explore how tags, text entry, and removal controls share the space inside the input.",{"id":343,"label":344,"to":345,"description":346},218,"Segmented control","\u002Fexamples\u002Fcomponents\u002Fsegmented-control","Explore how interfaces present a small set of related choices side by side. Look at how labels and selected states distinguish the active option within the group.",{"id":348,"label":349,"to":350,"description":351},259,"Textarea","\u002Fexamples\u002Fcomponents\u002Finput-textarea","See how interfaces make room for longer written responses. Explore how text areas use labels, prompts, and supporting controls within a form or composition task.",{"id":353,"label":354,"to":355,"description":356},199,"Input date","\u002Fexamples\u002Fcomponents\u002Finput-date","Explore how forms ask people to enter a date. Look at how field labels, format hints, and calendar access communicate the expected value.",{"id":358,"label":359,"to":360,"description":361},210,"Newsletter signup form","\u002Fexamples\u002Fcomponents\u002Fnewsletter-signup-form","See how websites invite visitors to subscribe to email updates. Explore how the form explains the newsletter and places email entry beside the subscription action.",{"id":363,"label":364,"to":365,"description":366},211,"Pagination","\u002Fexamples\u002Fcomponents\u002Fpagination","Explore how interfaces divide a collection across pages. Look at how page numbers, current position, and previous or next controls fit around the results.",{"id":368,"label":369,"to":370,"description":371},216,"Radio button","\u002Fexamples\u002Fcomponents\u002Fradio-button","Explore how forms ask people to make one choice within a group. Look at radio labels, supporting descriptions, and selected states across different option layouts.",{"id":373,"label":374,"to":375,"description":376},219,"Reviews","\u002Fexamples\u002Fcomponents\u002Freviews","Explore interface patterns for presenting written evaluations alongside scores. Focus on how reviewer details, review text, and rating summaries establish context for an opinion.",{"id":378,"label":379,"to":380,"description":381},246,"Toolbox","\u002Fexamples\u002Fcomponents\u002Ftoolbox","See how interfaces group tools around a working area. Explore how icons, labels, and tool states organize the actions available for editing or creating content.",{"id":383,"label":384,"to":385,"description":386},287,"Horizontal list","\u002Fexamples\u002Fcomponents\u002Fhorizontal-list","Explore how interfaces place related items in a horizontal sequence. Look at item previews, spacing, and navigation cues when the collection extends beyond the visible area.",{"id":388,"label":389,"to":390,"description":391},195,"Input multi-select","\u002Fexamples\u002Fcomponents\u002Finput-multi-select","Explore how forms let people choose several values from a set. Look at how available options and selected items remain visible within a multi-select control.",{"id":393,"label":394,"to":395,"description":396},203,"Input phone number","\u002Fexamples\u002Fcomponents\u002Finput-phone-number","Explore how forms collect telephone details. Look at how country codes, number formatting, and supporting instructions fit around the phone input.",{"id":398,"label":399,"to":400,"description":401},215,"Rating","\u002Fexamples\u002Fcomponents\u002Frating","See how interfaces collect or summarize an evaluation. Explore how stars, scales, labels, and score details fit within a rating component.",{"id":403,"label":404,"to":405,"description":406},294,"Artificial intelligence","\u002Fexamples\u002Fcomponents\u002Fai","Explore how interfaces make AI features available within a task. Look at prompt controls, suggested actions, and response areas as individual components within the surrounding product design.",{"id":408,"label":409,"to":410,"description":411},173,"Autocomplete","\u002Fexamples\u002Fcomponents\u002Fautocomplete","See how interfaces suggest possible matches as someone enters text. Explore how suggestion lists, highlighted options, and input fields work together before a value is selected.",{"id":413,"label":414,"to":415,"description":416},260,"Badge","\u002Fexamples\u002Fcomponents\u002Fbadge","See how interfaces attach a compact status or count to an item. Explore how badge text, color, and placement add context to nearby content.",{"id":418,"label":419,"to":420,"description":421},298,"Bento box","\u002Fexamples\u002Fcomponents\u002Fbento-grid","Explore how websites arrange features in a grid of differently sized panels. Look at how text and imagery share each panel and how the layout establishes a reading order.",{"id":423,"label":424,"to":425,"description":426},181,"Coachmark","\u002Fexamples\u002Fcomponents\u002Fcoachmark","See how interfaces call attention to a specific control or feature. Explore how a short explanation and navigation actions are placed near the element being introduced.",{"id":428,"label":429,"to":430,"description":431},306,"Command palette","\u002Fexamples\u002Fcomponents\u002Fcmd-palette","Explore interface patterns for finding commands from a single input. Focus on the relationship between query entry, grouped actions, and keyboard shortcut labels within a command palette.",{"id":433,"label":434,"to":435,"description":436},184,"Datepicker","\u002Fexamples\u002Fcomponents\u002Fdatepicker","See how interfaces present dates for selection. Explore calendar layouts, month navigation, and selected states within date pickers used in forms and filters.",{"id":438,"label":439,"to":440,"description":441},296,"Feedback","\u002Fexamples\u002Fcomponents\u002Ffeedback","Explore how interfaces collect a response at the point of use. Look at how rating choices, text entry, and submission controls fit into a compact feedback component.",{"id":443,"label":444,"to":445,"description":446},290,"Flyout menu","\u002Fexamples\u002Fcomponents\u002Fflyout-menu","Explore how interfaces reveal navigation or actions beside a trigger. Look at how flyout panels group destinations and connect their content with the surrounding menu.",{"id":448,"label":449,"to":450,"description":451},197,"Hero section","\u002Fexamples\u002Fcomponents\u002Fhero-section","See how websites introduce their main message at the start of a page. Explore how headlines, supporting copy, product visuals, and calls to action are arranged within the hero.",{"id":453,"label":454,"to":455,"description":456},198,"Input amount","\u002Fexamples\u002Fcomponents\u002Finput-amount","Explore how interfaces collect monetary amounts. Look at the placement of currency labels, numeric values, and supporting context within payment and budgeting inputs.",{"id":458,"label":459,"to":460,"description":461},288,"Input code","\u002Fexamples\u002Fcomponents\u002Finput-code","See how interfaces ask for a verification or access code. Explore how character fields, instructions, and related actions fit into a compact code-entry component.",{"id":463,"label":464,"to":465,"description":466},200,"Input location","\u002Fexamples\u002Fcomponents\u002Finput-location","See how interfaces collect a place or address. Explore how search entry, suggested locations, and selected values fit into a location input.",{"id":468,"label":469,"to":470,"description":471},221,"Rich text editor","\u002Fexamples\u002Fcomponents\u002Frich-text-editor","See how interfaces combine writing with formatting controls. Explore how editor toolbars, content areas, and contextual actions support composing and changing formatted text.",{"id":473,"label":474,"to":475,"description":476},281,"Slideshow","\u002Fexamples\u002Fcomponents\u002Fslideshow","See how interfaces present a sequence of visual items within one area. Explore how slide content, navigation controls, and position indicators work together.",{"id":478,"label":479,"to":480,"description":481},289,"Social login button","\u002Fexamples\u002Fcomponents\u002Fsocial-login-button","Explore how interfaces offer sign-in through an external identity provider. Look at provider labels, logos, and button placement alongside other ways to access an account.",{"id":483,"label":484,"to":485,"description":486},234,"Suggestion","\u002Fexamples\u002Fcomponents\u002Fsuggestion","Explore interface patterns for offering a useful next input or action. Look at how suggested choices are presented near the task and distinguished from content already selected.",[],[489,519,548,582,609,636,661,689,708,732,757,780],{"uuid":490,"title":491,"description":492,"canonical_path":493,"image":11,"width":494,"height":495,"image_alt":496,"kind":497,"categories":498,"app":501},"f255696e-46ec-4e93-a594-697062e80b53","Alloy UI component","A multi-column navigation menu or footer section with various links categorized under product, updates, company, and tools.","\u002Fexamples\u002Fapps\u002Falloy\u002Fcomponents",2159,1072,"UI component from Alloy","component",[499],{"id":193,"title":194,"slug":500},"footer",{"slug":502,"title":503,"logo":504,"baseline":505,"categories":506},"alloy","Alloy","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F13110ce9-b228-4dcd-99db-7c3272fae2ce.png","AI prototyping tool for product managers",[507,511,515],{"id":508,"title":509,"slug":510},48,"Developer Tools","developer-tools",{"id":512,"title":513,"slug":514},80,"Artificial Intelligence","artificial-intelligence",{"id":516,"title":517,"slug":518},86,"Product management","product-management",{"uuid":520,"title":521,"description":522,"canonical_path":523,"image":524,"width":525,"height":526,"image_alt":527,"kind":497,"categories":528,"app":531},"aabf9bb7-2a39-40cf-b47e-9d05aa9b6354","Flask UI component","A dark mode confirmation dialog for deleting an asset, with a warning that the action cannot be undone, and options to cancel or delete.","\u002Fexamples\u002Fapps\u002Fflask\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa812552d-62b4-4b33-85e4-b5cbf84423e9.png",797,427,"UI component from Flask",[529],{"id":103,"title":104,"slug":530},"modal",{"slug":532,"title":533,"logo":534,"baseline":535,"categories":536},"flask","Flask","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffb0bfd95-becd-46ec-9917-a82dd6bbe601.png","Give detailed video feedback in minutes without typing comments",[537,541,545],{"id":538,"title":539,"slug":540},100,"Video","video",{"id":542,"title":543,"slug":544},23,"Collaboration","collaboration",{"id":546,"title":439,"slug":547},35,"feedback",{"uuid":549,"title":550,"description":551,"canonical_path":552,"image":553,"width":554,"height":555,"image_alt":556,"kind":497,"categories":557,"app":560},"158da29d-ac2e-431b-a3a9-97537b99b475","Airbnb UI component","A dropdown menu displaying user account options and navigation links, including hosting information and a call to action.","\u002Fexamples\u002Fapps\u002Fairbnb\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4eeefec3-3f28-4785-ad3d-b4b27f1e6de4.png",737,1462,"UI component from Airbnb",[558],{"id":36,"title":37,"slug":559},"dropdown-menu",{"slug":561,"title":562,"logo":563,"baseline":564,"categories":565},"airbnb","Airbnb","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fairbnb-2b8cc5d2.png","Book unique homes and experience a city like a local",[566,570,574,578],{"id":567,"title":568,"slug":569},5,"Travel","travel",{"id":571,"title":572,"slug":573},12,"Hospitality","hospitality",{"id":575,"title":576,"slug":577},17,"Peer to peer","peer-to-peer",{"id":579,"title":580,"slug":581},18,"Marketplace","marketplace",{"uuid":583,"title":584,"description":585,"canonical_path":586,"image":587,"width":588,"height":589,"image_alt":590,"kind":497,"categories":591,"app":593},"f059425e-b28b-45b0-a9d9-ab5aa4ca2322","Inference UI component","A website footer displaying company information, product features, resources, and legal links.","\u002Fexamples\u002Fapps\u002Finference\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0edda3ab-8625-4d41-9218-317f6238391b.png",2303,1006,"UI component from Inference",[592],{"id":193,"title":194,"slug":500},{"slug":594,"title":595,"logo":596,"baseline":597,"categories":598},"inference","Inference","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F65e2bbca-c37f-44d3-a945-dbb7846ba077.png","Build and monitor self-improving agents.",[599,600,604,608],{"id":508,"title":509,"slug":510},{"id":601,"title":602,"slug":603},16,"Monitoring","monitoring",{"id":605,"title":606,"slug":607},37,"Developer APIs","developer-apis",{"id":512,"title":513,"slug":514},{"uuid":610,"title":611,"description":612,"canonical_path":613,"image":614,"width":615,"height":616,"image_alt":617,"kind":497,"categories":618,"app":621},"aeb73e8a-4330-474b-a680-53074e1e13f3","Origin Financial UI component","A form asking a user if they have children, with two radio button options for 'Yes' and 'No'.","\u002Fexamples\u002Fapps\u002Fuseorigin\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F659315e7-6b0d-4368-9778-395ef4fd72d8.png",1430,675,"UI component from Origin Financial",[619],{"id":368,"title":369,"slug":620},"radio-button",{"slug":622,"title":623,"logo":624,"baseline":625,"categories":626},"useorigin","Origin Financial","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15075243-f5d2-4573-9045-2e4c07c4ce88.png","All-in-one financial platform for budgeting, investing, and AI-powered planning",[627,631,635],{"id":628,"title":629,"slug":630},36,"Finance","finance",{"id":632,"title":633,"slug":634},56,"Accounting","accounting",{"id":512,"title":513,"slug":514},{"uuid":637,"title":638,"description":639,"canonical_path":640,"image":641,"width":642,"height":643,"image_alt":644,"kind":497,"categories":645,"app":648},"a30ccd7f-49c6-4f39-93b3-d20c5e0a6392","Steel UI component","A section detailing a quick build setup process, featuring a command-line interface (CLI) code snippet for installation.","\u002Fexamples\u002Fapps\u002Fsteel\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffbb87f2f-4759-4007-9313-72ccae129bbe.png",2413,865,"UI component from Steel",[646],{"id":108,"title":109,"slug":647},"code-block",{"slug":649,"title":650,"logo":651,"baseline":652,"categories":653},"steel","Steel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F03f0fa43-a227-4dce-b66a-f340f4551973.png","Browser infrastructure for AI agents",[654,655,656,657],{"id":508,"title":509,"slug":510},{"id":512,"title":513,"slug":514},{"id":605,"title":606,"slug":607},{"id":658,"title":659,"slug":660},45,"Open Source","open-source",{"uuid":662,"title":663,"description":664,"canonical_path":665,"image":666,"width":667,"height":668,"image_alt":669,"kind":497,"categories":670,"app":673},"909fd847-4339-4930-98f3-405e1df8e341","Zaro UI component","A user interface displaying a sequence of completed and ongoing automated tasks, with controls for queuing new actions.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F089c36f8-007d-4b14-9954-c57734a22a3b.png",1448,889,"UI component from Zaro",[671],{"id":403,"title":404,"slug":672},"ai",{"slug":674,"title":675,"logo":676,"baseline":677,"categories":678},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[679,680,681,685],{"id":542,"title":543,"slug":544},{"id":512,"title":513,"slug":514},{"id":682,"title":683,"slug":684},22,"Knowledge Management","knowledge-management",{"id":686,"title":687,"slug":688},46,"Analytics","analytics",{"uuid":690,"title":691,"description":692,"canonical_path":693,"image":694,"width":695,"height":696,"image_alt":697,"kind":497,"categories":698,"app":701},"1c88c858-3fb6-410b-b6e1-d162e9f0aef0","Riverside UI component","Pricing page displaying subscription plans for a podcast and video editing platform.","\u002Fexamples\u002Fapps\u002Friverside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffb11771a-0792-4065-9bc4-fc40d4e44ca9.png",2575,1740,"UI component from Riverside",[699],{"id":75,"title":76,"slug":700},"pricing-section",{"slug":702,"title":703,"logo":704,"baseline":705,"categories":706},"riverside","Riverside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcc94468d-7b59-49b7-b969-3aee258a2348.png","HD podcast and video recording and editing software",[707],{"id":538,"title":539,"slug":540},{"uuid":709,"title":710,"description":711,"canonical_path":712,"image":713,"width":714,"height":715,"image_alt":716,"kind":497,"categories":717,"app":719},"2bdda4ab-7ccb-491f-bf55-be1a9b102b3f","Axiom UI component","A dropdown menu displaying various options categorized into charts, data, and other, with an item in a hover state.","\u002Fexamples\u002Fapps\u002Faxiom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F36f1da14-8562-4922-84f9-5c1108b9f9c9.png",472,1190,"UI component from Axiom",[718],{"id":36,"title":37,"slug":559},{"slug":720,"title":721,"logo":722,"baseline":723,"categories":724},"axiom","Axiom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F22cc0be3-ce3f-442a-903f-4da9befc54cd.png","The modern machine data platform.",[725,726,730,731],{"id":686,"title":687,"slug":688},{"id":727,"title":728,"slug":729},57,"Big data","big-data",{"id":601,"title":602,"slug":603},{"id":508,"title":509,"slug":510},{"uuid":733,"title":734,"description":735,"canonical_path":736,"image":737,"width":738,"height":739,"image_alt":740,"kind":497,"categories":741,"app":744},"d9c5ce4d-c778-46c2-b32d-161a8545f5fa","Extend UI component","A screen displaying an optimization process with an abstract illustration and explanatory text.","\u002Fexamples\u002Fapps\u002Fextend\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc003d8ad-1183-44e3-9822-426001fc5ea7.png",1219,1111,"UI component from Extend",[742],{"id":80,"title":81,"slug":743},"emptystate",{"slug":745,"title":746,"logo":747,"baseline":748,"categories":749},"extend","Extend","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15f6030e-2d0f-4381-9480-44902ed125e2.png","Document processing infrastructure for AI agents",[750,754,755,756],{"id":751,"title":752,"slug":753},77,"Machine learning","machine-learning",{"id":512,"title":513,"slug":514},{"id":605,"title":606,"slug":607},{"id":508,"title":509,"slug":510},{"uuid":758,"title":759,"description":760,"canonical_path":761,"image":762,"width":763,"height":764,"image_alt":765,"kind":497,"categories":766,"app":768},"4c054cc1-c320-439a-9f64-ab798a25ce39","Lithic UI component","A confirmation modal asking the user to confirm a deletion action for a sandbox API key, with a warning about the consequences.","\u002Fexamples\u002Fapps\u002Flithic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0b4db839-fa8c-4bdd-97b8-70365246da8a.png",1047,683,"UI component from Lithic",[767],{"id":103,"title":104,"slug":530},{"slug":769,"title":770,"logo":771,"baseline":772,"categories":773},"lithic","Lithic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29eef334-64df-456e-bb65-9d93c535b644.png","Programmable card issuing and money movement platform",[774,775,779],{"id":628,"title":629,"slug":630},{"id":776,"title":777,"slug":778},39,"Payments","payments",{"id":605,"title":606,"slug":607},{"uuid":781,"title":782,"description":783,"canonical_path":784,"image":785,"width":786,"height":787,"image_alt":788,"kind":497,"categories":789,"app":792},"b7edf1ea-201f-480e-bffb-e900bf437d8a","Visitors UI component","A segmented control for selecting between monthly and annually options","\u002Fexamples\u002Fapps\u002Fvisitors\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F56c6d1f6-7118-46f4-8439-790d5f59e1ed.png",756,194,"UI component from Visitors",[790],{"id":56,"title":57,"slug":791},"toggle-switch",{"slug":793,"title":794,"logo":795,"baseline":796,"categories":797},"visitors","Visitors","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fba53672a-9799-4a87-8187-a0b0c0766b64.png","Revenue-first web analytics",[798],{"id":686,"title":687,"slug":688},[],[],{"published_at":802,"updated_at":803},"2026-07-20T12:10:43.000Z","2026-09-14T10:45:55.000Z"]