[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fotter\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":48,"showcases":211,"links":212,"dates":231},"\u002Fexamples\u002Fapps\u002Fotter\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Otter UI components examples - Nicelydone","Browse Otter UI component design examples. Preview individual interface elements and explore related component categories. Voice meeting notes","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0eb3f7b8-15f2-4044-80da-5c03096a23a0.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"Otter design examples","\u002Fexamples\u002Fapps\u002Fotter",{"label":23,"to":4},"Otter UI components examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"twitter_username":34,"categories":35},"Otter","otter","Voice meeting notes","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fotter-995b0fae.png","https:\u002F\u002Fotter.ai","otter_ai",[36,40,44],{"id":37,"title":38,"slug":39},80,"Artificial Intelligence","artificial-intelligence",{"id":41,"title":42,"slug":43},22,"Knowledge Management","knowledge-management",{"id":45,"title":46,"slug":47},30,"Productivity","productivity",[49,64,79,94,106,118,133,148,163,177,187,199],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"8b403a95-e05b-4e1a-a4d6-9f32c4b2ba88","Notification settings section","An expanded accordion section for configuring notification preferences. It includes a header with an icon, title, and description, followed by a list of notification channels (Push, Email) with toggle switches.",2135,662,"Notification settings section from Otter","component",[58],{"id":59,"title":60,"slug":61},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":63},[],{"uuid":65,"title":66,"description":67,"canonical_path":4,"image":68,"width":69,"height":70,"image_alt":71,"kind":56,"categories":72,"app":77},"42676770-790a-4738-8f18-d74ebfcf8f53","Plan Details Card","A card displaying the user's current plan details, including a circular progress indicator for remaining minutes, trial expiration date, upcoming subscription cost, and a call-to-action button to subscribe.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc3e9bcc1-628c-4cf8-8898-a5eaca9a59cc.png",2608,638,"Plan Details Card from Otter",[73],{"id":74,"title":75,"slug":76},213,"Progress indicator","progress-indicator",{"slug":30,"title":29,"logo":32,"categories":78},[],{"uuid":80,"title":81,"description":82,"canonical_path":4,"image":83,"width":84,"height":85,"image_alt":86,"kind":56,"categories":87,"app":92},"e1fd6ecf-154b-4bb3-88fb-72950c13f896","Share Modal","A modal dialog for sharing content, featuring a search input with a role selector dropdown and a tabbed list of suggested contacts and channels.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4bb6db66-b3fc-40dd-a0c6-115b6aff7519.png",1241,893,"Share Modal from Otter",[88],{"id":89,"title":90,"slug":91},248,"Table","table-2",{"slug":30,"title":29,"logo":32,"categories":93},[],{"uuid":95,"title":96,"description":97,"canonical_path":4,"image":98,"width":99,"height":100,"image_alt":101,"kind":56,"categories":102,"app":104},"8808387e-0a09-4c15-8a01-48d898a4aa27","Trash list","A list view displaying deleted items with checkboxes for bulk actions. Includes a header with a warning message and an action to empty the trash.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd998702f-c948-4bff-8413-6a217af47d46.png",2531,965,"Trash list from Otter",[103],{"id":89,"title":90,"slug":91},{"slug":30,"title":29,"logo":32,"categories":105},[],{"uuid":107,"title":108,"description":109,"canonical_path":4,"image":110,"width":111,"height":112,"image_alt":113,"kind":56,"categories":114,"app":116},"d4fd8a1a-60eb-49a6-aeb4-9893a08546f2","Transcription progress modal","A modal dialog showing the progress of an audio\u002Fvideo transcription. It includes the filename, file size, a progress bar with percentage and estimated time remaining, and a button to view the transcript.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbce16090-60a9-4d00-93d0-43972e96c310.png",1940,339,"Transcription progress modal from Otter",[115],{"id":74,"title":75,"slug":76},{"slug":30,"title":29,"logo":32,"categories":117},[],{"uuid":119,"title":120,"description":121,"canonical_path":4,"image":122,"width":123,"height":124,"image_alt":125,"kind":56,"categories":126,"app":131},"b40bbcf5-3685-4ed4-8640-a20125be4a86","Otter UI component","A modal menu with multiple options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F538b1a42-7795-4e04-83fa-c6b04a3dc7a1.png",577,1113,"UI component from Otter",[127],{"id":128,"title":129,"slug":130},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":132},[],{"uuid":134,"title":135,"description":136,"canonical_path":4,"image":137,"width":138,"height":139,"image_alt":140,"kind":56,"categories":141,"app":146},"5dc0e2b2-f154-43da-b546-79873aabd526","Star rating widget","A simple five-star rating component prompting the user to rate transcript quality.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbb7965bd-c432-4d01-a1b0-85f24f4fa024.png",648,314,"Star rating widget from Otter",[142],{"id":143,"title":144,"slug":145},296,"Feedback","feedback",{"slug":30,"title":29,"logo":32,"categories":147},[],{"uuid":149,"title":150,"description":151,"canonical_path":4,"image":152,"width":153,"height":154,"image_alt":155,"kind":56,"categories":156,"app":161},"f896788a-d164-4f7d-ad4f-19246134b9d5","Search overlay with filters","A modal overlay for searching meeting transcripts. It includes a search bar, an AI chat prompt, a results list with highlighted keywords, and a sidebar for filtering by conversation, speakers, channels, folders, and date.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcfb7681b-0b02-4f64-8920-24bdb32ef245.png",1806,1771,"Search overlay with filters from Otter",[157],{"id":158,"title":159,"slug":160},284,"Modal","modal",{"slug":30,"title":29,"logo":32,"categories":162},[],{"uuid":164,"title":165,"description":166,"canonical_path":4,"image":167,"width":168,"height":112,"image_alt":169,"kind":56,"categories":170,"app":175},"bdce89a3-ed73-4158-9b39-a4d69ced4d52","Search modal with AI prompt","A floating search modal overlay containing a search input scoped to 'This Conversation' and a promotional banner for an AI chat feature.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa1d407f5-ae04-4ebe-addc-c9fb63e79da4.png",1795,"Search modal with AI prompt from Otter",[171],{"id":172,"title":173,"slug":174},294,"Artificial intelligence","ai",{"slug":30,"title":29,"logo":32,"categories":176},[],{"uuid":178,"title":81,"description":179,"canonical_path":4,"image":180,"width":181,"height":182,"image_alt":86,"kind":56,"categories":183,"app":185},"af7e000e-23dd-4b6a-8cb9-b082bcd4ecec","A modal dialog for sharing a resource, allowing users to add collaborators by name, email, or channel, manage existing access, and copy a sharing link.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe715f5d0-4c6b-47b3-9f80-25258aa57e0a.png",1250,881,[184],{"id":158,"title":159,"slug":160},{"slug":30,"title":29,"logo":32,"categories":186},[],{"uuid":188,"title":189,"description":190,"canonical_path":4,"image":191,"width":192,"height":193,"image_alt":194,"kind":56,"categories":195,"app":197},"4aa0f566-17de-4fff-889c-5144e15012d1","Meeting Outline Accordion","A tabbed panel displaying an AI-generated meeting outline. The active 'Outline' tab shows a list of collapsible sections, each representing a topic discussed in the meeting with a timestamp. The first section is expanded, revealing a bulleted summary.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff7a02b31-fe34-4893-ab5b-966dccaea128.png",939,1560,"Meeting Outline Accordion from Otter",[196],{"id":172,"title":173,"slug":174},{"slug":30,"title":29,"logo":32,"categories":198},[],{"uuid":200,"title":201,"description":202,"canonical_path":4,"image":203,"width":204,"height":205,"image_alt":206,"kind":56,"categories":207,"app":209},"827270ad-58b7-4fb9-98bb-7dacf78bfd74","AI Chat Sidebar","A sidebar panel containing an AI chat interface. It features top-level tabs for AI Chat, Outline, and Comments. The main area displays a chat interface with inner tabs for Suggestions and History, showing suggested prompts. A composer input field is at the bottom.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2edea8ae-fb66-4dd5-8f5f-423c3c53c6c7.png",936,1557,"AI Chat Sidebar from Otter",[208],{"id":172,"title":173,"slug":174},{"slug":30,"title":29,"logo":32,"categories":210},[],[],[213,216,219,222,225,228],{"label":214,"to":215},"Otter product screens","\u002Fexamples\u002Fapps\u002Fotter\u002Fscreens",{"label":217,"to":218},"Otter marketing pages","\u002Fexamples\u002Fapps\u002Fotter\u002Fmarketing",{"label":220,"to":221},"Otter user flows","\u002Fexamples\u002Fapps\u002Fotter\u002Fflows",{"label":223,"to":224},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":226,"to":227},"Knowledge Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fknowledge-management",{"label":229,"to":230},"Productivity app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproductivity",{"published_at":232,"updated_at":233},"2020-04-21T13:54:12.000Z","2026-09-13T13:02:39.000Z"]