Quillo.qweComponents

Tags

#social

37 components tagged social. Narrow them down with a search or more tags.

Actions 6

BookmarkButtonA save-for-later toggle whose bookmark fills when pressed, with or without its label.buttonsocialformsinteractive8 views · 8 downloadsFollowButtonFollow becomes Following once pressed, and says Unfollow on hover, as the social sites do.buttonsocialuserformsinteractive5 views · 7 downloadsLikeButtonA heart that toggles with a count that follows it, a real toggle for screen readers and forms.buttonsocialformsinteractive5 views · 4 downloadsReactionPickerA row of emoji reactions with counts, one tap to react or take it back, and a menu to add another.buttonsocialcommentinteractive5 views · 5 downloadsShareButtonShares a link through the system's share sheet, or copies it where the browser has none, and says which.buttonformssocialinteractive6 views · 5 downloadsVoteButtonsUp and down votes around a score that follows them, as on a forum, in a column or a row.buttonsocialformsinteractive5 views · 6 downloads

Forms 3

EmojiPickerPick an emoji from tabs of categories or by searching their names; each is named for screen readers and a form gets the one picked.formspickersearchsocialinteractive4 views · 7 downloadsMentionInputA textarea that offers people when @ is typed, puts @handle in, and sends the handles mentioned beside the text.formsinputcommentsocialinteractive5 views · 6 downloadsPollVote for one option with a tap and see the results as bars with each one's share; the vote also goes in a hidden input.formsbuttonsocialfeedbackinteractive6 views · 5 downloads

Overlays 2

ChatWidgetA chat button in the corner that opens a small chat panel, with replies from your server and a count for unseen ones.chatoverlaysocialinteractive4 views · 7 downloadsShareSheetA bottom sheet with the ways to share a link: copy it, email, X, LinkedIn, WhatsApp and more, and the system's own.socialdialogoverlaymobileinteractive6 views · 4 downloads

Data 9

ActivityFeedA stream of what people did, with their pictures, an icon for each kind of action, when, quotes and day headings.datalistsocialtimeno-js5 views · 7 downloadsChatThreadA conversation: grouped messages with avatars, days, a typing indicator, and a box where Enter sends.chatsociallistno-js4 views · 4 downloadsFeedItemA social-feed item: avatar, name, handle, time, text, a picture or any media, and like, comment and share buttons with counts.socialcardusercommentno-js6 views · 7 downloadsLeaderboardPeople ranked by score with medals for the top three, shared places for ties, and your own row kept in view.datalistsocialuserno-js7 views · 7 downloadsProfileCardA person at a glance: picture, name, title, bio, a row of stats and action buttons, stacked or in a row.cardprofileusersocialno-js7 views · 4 downloadsRatingSummaryThe average rating out of 5, how many ratings, and a bar per star count, each a filter button or link if you like.chartcommercesocialdatano-js6 views · 5 downloadsReviewCardOne review: stars (halves too), title, text, reviewer and date, a Verified mark, images, the seller's reply and a Helpful vote.cardsocialcommentcommerceno-js7 views · 6 downloadsReviewListReviews sorted by a select (newest, highest, most helpful), filtered by stars with counts, shown a page at a time.listsortfiltercommercesocialinteractive6 views · 7 downloadsTestimonialCardA customer's quote with their picture, name, title and company or logo, and stars if they gave some.cardmarketingsocialuserno-js5 views · 6 downloads

Blogging 2

ClapButtonApplause for a post: each press adds a clap up to a limit per reader, a +3 rises for presses in a row, and a small × takes them back.bloggingsocialbuttonreactionsinteractive8 views · 8 downloadsShareLinksLinks that share a post on X, Bluesky, Mastodon, LinkedIn, Reddit, Hacker News and more, or by email: plain links, nothing loaded from the networks.bloggingsocialsharelinksno-js7 views · 6 downloads

Marketing 2

SocialLinksIcon links to accounts on X, GitHub, LinkedIn, YouTube, Mastodon, Bluesky and more, each named for screen readers.marketingsociallinkiconno-js6 views · 4 downloadsTestimonialsQuotes from people with their picture, role and company, in a row that scrolls or a grid that wraps.marketingsectioncardsocialno-js9 views · 7 downloads

Social 13

ChatInputA chat message box that grows as you type, sends on Enter and breaks the line on Shift+Enter; a plain form in a page.socialchatformsinputinteractive6 views · 6 downloadsCommentOne comment: avatar, name, role, time, text, Like and Reply, with its replies nested inside it.socialcommentuserno-js6 views · 8 downloadsCommentThreadNested comments with Like and Reply, a reply box that opens under the comment answered, and branches that fold.socialcommentlistinteractive5 views · 5 downloadsHashtagA #tag that links to its page, with an optional count, and HashtagList, the trending tags ranked with their post counts.sociallinklistno-js6 views · 8 downloadsMessageBubbleOne chat message, yours on the right or theirs on the left, with the time and sent, delivered, read or failed ticks.socialchatno-js6 views · 8 downloadsPostCardA post in a feed: author, time, text, picture, like, comment and share counts, and the three buttons.socialcarduserno-js5 views · 5 downloadsPostComposerWrite a post with a character ring and count, attach files, and post with a button or Ctrl+Enter; a plain form in a page.socialformsinputuploadinteractive6 views · 6 downloadsProfileHeaderThe top of a profile: cover, avatar, name, handle, bio, facts, counts and a Follow button that becomes Following.socialprofileuserpageno-js6 views · 5 downloadsReactionsEmoji reaction chips with counts, yours marked, and an add button that opens a row of emoji to pick from.socialbuttonformsinteractive6 views · 5 downloadsReplyBoxA reply box that is one line until focused, then grows and shows Post and Cancel; it posts a form or calls back.socialcommentformsinputinteractive6 views · 5 downloadsStoryRingA row of avatars in rings, bright for stories not yet seen and grey once seen, with your own first to add one.socialusermedialistno-js6 views · 6 downloadsTypingIndicator"Ana is typing…" with pulsing dots, naming one, two or more people, and nothing at all when nobody is.socialchatstatusno-js6 views · 6 downloadsUserBadgeA small chip with a person's avatar and name, plus a role label or a verified tick; a link when given an href.socialuserprofileno-js6 views · 5 downloads

Other tags

interactive504no-js370mobile211forms176tablet151data128smart100list84chart80commerce68input64navigation63layout59card57finance52gesture48media44dashboard42text39button38feedback38keyboard37social37marketing36table34typography32search31status31user31document30image28picker28link26page26time26banking25calendar24overlay24select24progress23trading22calculator21schedule21travel20grid19settings19menu18news18security18utility18offline17price17blogging16dialog16sheet16swipe15accessibility14drag14notification14tabs14upload14chat13checkout13filter13popover13file12loans12section12audio11loading11profile11coop10forex10icon10code9article8camera8developer8flights8form8print8record8validation8comment7location7onboarding7pricing7video7cart6json6theme6animation5barcode5field5health5keypad5map5planning5qr5scroll5sort5admin4analytics4clock4dates4editor4feed4header4live4notes4parser4photo4player4seo4share4statistics4subscription4toast4analysis3banner3billing3budget3checklist3compare3date3election3games3gloves3gps3haptics3monitoring3number3panes3payment3pen3rotation3sensor3sync3tasks3timeline3timer3toolbar3tracking3undo3units3update3url3voice3wheel3wizard3writing3alerts2balance2capacity2cards2colour2columns2csv2currency2dedupe2device2discount2draft2drawing2education2email2experiment2feeds2files2forecast2fuzzy2help2history2hotels2links2long-press2meetings2merge2messages2money2motion2network2otp2panel2payments2permission2permissions2photos2pin2pinch2query2questions2quiz2rating2reactions2refresh2reorder2report2responsive2retry2scanner2selection2shipping2sign-in2slider2split2stock2storage2store2stories2summary2svg2tax2ticket2till2timezone2tracker2transfer2version2wallet2zoom2accordion1activities1ads1agenda1aggregate1agile1alert1amount1annotate1anomaly1api1app-shell1approval1archive1assessment1audit1autosave1availability1back1backlog1backtest1badge1bank1bar1battery1bibliography1bill1bills1book1bracket1branching1browser1builder1bulk1bundle1business1buy1byline1campaign1carousel1cars1cash1change1changes1check1chips1citation1cleaning1clipboard1cloud1cohort1combobox1comments1compass1conditional1configurator1confirm1conflicts1contact1context-menu1contrast1conversion1converter1cooking1copy1cost1coupon1cron1curl1dark-mode1deadline1debt1decimal1decision1decode1delivery1dependencies1design1detents1diff1disclosure1documents1downloads1dst1duplicates1edit1emoji1empty1encoding1entropy1envelopes1error1event1expenses1explorer1export1fab1faq1fashion1first-run1fit1fixtures1flashcards1flashlight1flesch1floor-plan1formatter1formula1frame1fullscreen1funnel1gallery1game1generator1geofence1goals1grades1grammar1group1groups1guard1handwriting1haptic1heading1headline1heatmap1hours1http1i18n1iban1import1income1indicator1inference1insights1interest1invoice1ios1isbn1job1jsonpath1jwt1kanban1keywords1kiosk1league1learning1level1like1lint1loan1localization1lock1logs1lyrics1mail1margin1markdown1markup1master-detail1matching1memory1mention1modal1mortgage1music1natural1notch1notice1notifications1options1order1orientation1outlier1overflow1overtime1packing1pagination1passcode1password1paste1pattern1payoff1payroll1paywall1people1plans1podcast1pointer1policy1poll1power1preview1profiling1projects1properties1publishing1quality1queue1rail1ranked1ranking1readability1reader1receipt1recipe1recommendations1records1reference1refinance1regex1register1regression1reliability1reload1reply1resize1resources1restaurant1resume1retention1revision1rewards1rings1risk1roles1roster1rota1rules1salary1save-data1savings1schema1screen1seats1seeds1seek1series1shake1shortcuts1sidebar1signature1signup1sizing1slo1slug1splash1sports1spotlight1spreadsheet1sql1stack1staff1standings1startup1status-bar1stepper1steps1sticky1streaks1study1style1subscribe1subtotals1support1survey1switch1tags1team1teams1temperature1template1time-zones1tip1tldr1toggle1torch1tour1tournament1transit1translation1tree1trend1tutorial1typo1unread1unsaved1username1validate1vibrate1viewer1virtual1visualisation1vote1voting1wake-lock1warehouse1waveform1wcag1weather1weight1weights1widget1world1