Quillo UI
877 components, one file each
Buttons, forms, sign-in, date pickers, dialogs, tables, charts and trading charts, commerce, dashboards and more, each one .qwe file to copy into your program. They bring their styles, follow the system's light or dark theme, and work with the keyboard and screen readers. Most are views that add no JavaScript; the rest run in the browser as components.
quillo-ui.qweThe whole kit in one filequillo-ui.zipEvery file, the gallery and its testsquillolang/componentsClone it, or add it as a submodule
Group
Layout36Typography26Actions20Forms101Feedback28Overlays20Navigation36Data84Charts67Media24Commerce35Finance50News17Travel16Blogging19Marketing18Dashboard22Social16Scheduling23Mobile200Utilities19
Tags
interactive504no-js370mobile211forms176tablet151data128smart100list84chart80commerce68input64navigation63layout59card57finance52gesture48media44dashboard42text39button38feedback38keyboard37social37marketing36table34typography32search31status31user31document30image28picker28link26page26time26banking25calendar24overlay24select24progress23trading22calculator21schedule21travel20grid19settings19menu18news18security18utility18offline17price17blogging16dialog16sheet16swipe15accessibility14drag14notification14tabs14upload14chat13checkout13filter13popover13file12loans12section12audio11loading11profile11coop10forex10icon10code9article8camera8developer8flights8form8print8record8validation8comment7location7onboarding7pricing7video7cart6json6theme6animation5barcode5field5health5keypad5map5planning5qr5scroll5sort5admin4analytics4clock4dates4editor4feed4header4live4notes4parser4photo4player4seo4share4statistics4subscription4toast4analysis3banner3billing3budget3checklist3compare3date3election3games3gloves3gps3haptics3monitoring3number3panes3payment3pen3rotation3sensor3sync3tasks3timeline3timer3toolbar3tracking3undo3units3update3url3voice3wheel3wizard3writing3alerts2balance2capacity2cards2colour2columns2csv2currency2dedupe2device2discount2draft2drawing2education2email2experiment2feeds2files2forecast2fuzzy2help2history2hotels2links2long-press2meetings2merge2messages2money2motion2network2otp2panel2payments2permission2permissions2photos2pin2pinch2query2questions2quiz2rating2reactions2refresh2reorder2report2responsive2retry2scanner2selection2shipping2sign-in2slider2split2stock2storage2store2stories2summary2svg2tax2ticket2till2timezone2tracker2transfer2version2wallet2zoom2accordion1activities1ads1agenda1aggregate1agile1alert1amount1annotate1anomaly1api1app-shell1approval1archive1assessment1audit1autosave1availability1back1backlog1backtest1badge1bank1bar1battery1bibliography1bill1bills1book1bracket1branching1browser1builder1bulk1bundle1business1buy1byline1campaign1carousel1cars1cash1change1changes1check1chips1citation1cleaning1clipboard1cloud1cohort1combobox1comments1compass1conditional1configurator1confirm1conflicts1contact1context-menu1contrast1conversion1converter1cooking1copy1cost1coupon1cron1curl1dark-mode1deadline1debt1decimal1decision1decode1delivery1dependencies1design1detents1diff1disclosure1documents1downloads1dst1duplicates1edit1emoji1empty1encoding1entropy1envelopes1error1event1expenses1explorer1export1fab1faq1fashion1first-run1fit1fixtures1flashcards1flashlight1flesch1floor-plan1formatter1formula1frame1fullscreen1funnel1gallery1game1generator1geofence1goals1grades1grammar1group1groups1guard1handwriting1haptic1heading1headline1heatmap1hours1http1i18n1iban1import1income1indicator1inference1insights1interest1invoice1ios1isbn1job1jsonpath1jwt1kanban1keywords1kiosk1league1learning1level1like1lint1loan1localization1lock1logs1lyrics1mail1margin1markdown1markup1master-detail1matching1memory1mention1modal1mortgage1music1natural1notch1notice1notifications1options1order1orientation1outlier1overflow1overtime1packing1pagination1passcode1password1paste1pattern1payoff1payroll1paywall1people1plans1podcast1pointer1policy1poll1power1preview1profiling1projects1properties1publishing1quality1queue1rail1ranked1ranking1readability1reader1receipt1recipe1recommendations1records1reference1refinance1regex1register1regression1reliability1reload1reply1resize1resources1restaurant1resume1retention1revision1rewards1rings1risk1roles1roster1rota1rules1salary1save-data1savings1schema1screen1seats1seeds1seek1series1shake1shortcuts1sidebar1signature1signup1sizing1slo1slug1splash1sports1spotlight1spreadsheet1sql1stack1staff1standings1startup1status-bar1stepper1steps1sticky1streaks1study1style1subscribe1subtotals1support1survey1switch1tags1team1teams1temperature1template1time-zones1tip1tldr1toggle1torch1tour1tournament1transit1translation1tree1trend1tutorial1typo1unread1unsaved1username1validate1vibrate1viewer1virtual1visualisation1vote1voting1wake-lock1warehouse1waveform1wcag1weather1weight1weights1widget1world1
All 877 components
No component matches. Try fewer words, or take a tag off.
Layout 36
ActionBarA page's main action and a line about it, fixed to the bottom of the screen on a phone.13 views · 7 downloadsAppShellAn app's frame: a sidebar of links, a top bar and the page; the sidebar is a drawer on phones.10 views · 8 downloadsAspectRatioKeeps what it holds at a shape (16/9, 4/3, 1): an image or a video fills a box of the right height.9 views · 7 downloadsBentoGridA grid of tiles spanning columns and rows, with titles, tints and links, packed to leave no holes.9 views · 6 downloadsBrowserFrameA mock browser window around its content, with the address in its bar, for screenshots and demos.7 views · 7 downloadsCardA surface for one thing, with a title, a header and a footer, or a link as a whole.8 views · 6 downloadsCarouselSlides one at a time: buttons, dots, swiping, the keyboard, and optional autoplay that knows when to stop.8 views · 8 downloadsCenterPuts its content in the middle: a column capped in width, a thing centred by its own width, or centred text.7 views · 7 downloadsClusterThings in a row that goes on to the next line when it runs out of room, with gap and alignment.6 views · 8 downloadsCollapsibleA block shown and hidden under a line you click, on the browser's own <details>; open by default or not.7 views · 6 downloadsColumnsChildren side by side, equal or weighted, that go one under another when their box is narrow.7 views · 9 downloadsContainerKeeps content at a readable width, centred, with room at the sides on small screens.9 views · 6 downloadsCoverA block as tall as the screen with one thing in its middle, and something at its top and bottom if given.7 views · 7 downloadsDividerA line between parts of a page, across or upright, with a label in the middle if it has one.7 views · 8 downloadsDockA floating bar of icon buttons fixed to the bottom or a side of the page, with badges and the current one marked.6 views · 7 downloadsFieldsetA <fieldset> with a legend and a line about it, its fields stacked, in a row or in a grid; disabled as one.6 views · 7 downloadsFooterA site's footer: brand and tagline, columns of links under titles, and a bottom line with the small print.6 views · 6 downloadsGridColumns that fit the screen: as many as fit a minimum width, or a fixed number that folds on phones.6 views · 8 downloadsInsetRoom around what it holds, in the kit's sizes or pixels, on every side or only across or down.4 views · 8 downloadsMasonryCards of different heights packed into columns, each filled from the top, on CSS columns alone.6 views · 7 downloadsMasterDetailA list on the left and the item picked in detail on the right; one at a time with a Back button when narrow.6 views · 6 downloadsNavbarThe bar along the top of a site: name, links and actions; the links fold into a menu when narrow.5 views · 6 downloadsPageHeaderA page's top: breadcrumb, title, a line about it, small facts and the actions, with room under it for tabs.7 views · 5 downloadsPanelA bordered box in three parts: a header bar with a title and controls, a body, and a footer bar for actions.5 views · 7 downloadsReelA strip that scrolls sideways and snaps to each item, with a slim scrollbar or none, and the keyboard.4 views · 5 downloadsResizableBoxA box the user resizes by dragging its corner or an edge, within limits, with the keyboard too.5 views · 5 downloadsScrollAreaA box with its own scrollbars and a height limit, fading at the edges where there is more to see.6 views · 8 downloadsSectionA part of a page under its title and a line about it, kept to a readable width, with room above and below.6 views · 6 downloadsSidebarLayoutContent beside a sidebar, left or right, that goes under the content where its box is narrow.5 views · 6 downloadsSpacerEmpty room between things, down a column or along a row, in the kit's sizes or pixels, or growing to push things apart.5 views · 6 downloadsSplitterTwo panes with a divider to drag between them, across or stacked, with the keyboard too.6 views · 6 downloadsStackA column or a row of things, evenly spaced, aligned and wrapped as you choose.5 views · 7 downloadsStackedLayoutHeader, content and footer in three bands, the footer kept at the bottom of the viewport when the content is short.5 views · 7 downloadsStickyKeeps what it holds in view at an offset from the top, or the bottom, while the rest scrolls past.5 views · 6 downloadsSwitcherChildren side by side until the row would be too narrow, then each on its own line, with no in-between.6 views · 7 downloadsToolbarA row of controls reached by Tab once and moved through with the arrow keys; it wraps when narrow.5 views · 7 downloads
Typography 26
AbbrAn abbreviation whose expansion shows in a bubble on hover or focus and is read out by screen readers.6 views · 5 downloadsBlockquoteA quotation with the person and the source in a figure, as a bar, with a quote mark, or plain.6 views · 7 downloadsBulletListAn unordered list with dot, tick, arrow, star, dash or any glyph bullets, in a tone and a spacing.6 views · 7 downloadsCalloutA highlighted aside with an icon and a title, as a note, tip, warning, important point or caution.6 views · 6 downloadsCaptionSmall muted text under a figure, a table or a field, as the right element for each.5 views · 8 downloadsCheckListItems shown done or not with ticks and crosses (or empty circles), read-only, with an optional count.5 views · 8 downloadsCitationBuilderBuilds APA, MLA, Chicago and BibTeX citations for a book, article or web page, reading author names however they are written and flagging what is missing.3 views · 6 downloadsDropCapA paragraph whose first letter is set large and dropped into the first two, three or four lines.5 views · 6 downloadsEyebrowA small uppercase label above a heading, in a tone, with an optional dot.6 views · 8 downloadsFootnoteA numbered footnote mark in the text and the list of notes at the end, each linking to the other.6 views · 6 downloadsGradientTextText filled with a gradient: the theme's, a preset, or any two colours at an angle.5 views · 7 downloadsHeadingA title from <h1> to <h6> in the kit's sizes, with a subtitle and a link to itself shown on hover.5 views · 9 downloadsInlineCodeA code span in running text, and a variant that copies its text when clicked.4 views · 9 downloadsKbdA key or a key combination (⌘K, Ctrl+Shift+P) as <kbd> elements, with symbols for the modifiers.5 views · 8 downloadsLeadA lede paragraph, larger and lighter than the body text, in two sizes and three alignments.7 views · 9 downloadsLineClampText cut after N lines with an ellipsis, with the whole text in its title.4 views · 6 downloadsLinkA styled link that shows an icon and opens a new tab when it leaves the site, with underline and tone variants.7 views · 9 downloadsMarkHighlighted text in tones, as a real <mark>, filled or underlined.4 views · 9 downloadsMarkdownViewA small Markdown subset (headings, emphasis, links, lists, code, quotes) rendered safely as markup, in Quillo, with no HTML let through.4 views · 9 downloadsOrderedListA numbered list with styled counters: numbers, circles, letters or roman numerals, from any start.5 views · 6 downloadsProseStyles for a block of article HTML (from markdown() or by hand): headings, lists, links, quotes, code, tables.6 views · 5 downloadsPullquoteA line lifted from an article, set large beside the column with the text flowing around it, or across it.5 views · 7 downloadsReadMoreText cut after N lines with a Read more / Show less button, left out when the text fits.5 views · 6 downloadsTextA paragraph or span in the kit's sizes, weights, tones and alignments, so prose matches the components.6 views · 7 downloadsTextCompareCompares two texts word by word with its own LCS diff: insertions and deletions marked, similarity and counts, ignoring case or spacing, inline or side by side.4 views · 7 downloadsTruncateText kept to one line and cut with an ellipsis at the end or the middle, with the whole text in its title.5 views · 6 downloads
Actions 20
BookmarkButtonA save-for-later toggle whose bookmark fills when pressed, with or without its label.8 views · 9 downloadsButtonA button, or a link that looks like one: four variants, three tones, three sizes, loading.7 views · 8 downloadsButtonGroupButtons joined edge to edge into one control, or spaced in a row; across or upright.6 views · 7 downloadsCopyButtonCopies text to the clipboard and says so for a moment, to the eye and to screen readers.4 views · 7 downloadsDownloadButtonA link that downloads a file, showing its kind and size so nobody is surprised by a big one.7 views · 6 downloadsDropdownMenuA button that opens a short list of links and actions; Escape or a click elsewhere closes it.6 views · 7 downloadsFabA round floating action button fixed to a corner of the screen, with an icon and an optional label.5 views · 7 downloadsFollowButtonFollow becomes Following once pressed, and says Unfollow on hover, as the social sites do.5 views · 7 downloadsIconButtonA square button with an icon, labelled for screen readers and on hover; built-in icons or your own.6 views · 10 downloadsLikeButtonA heart that toggles with a count that follows it, a real toggle for screen readers and forms.5 views · 5 downloadsLoadMoreButtonThe button at the end of a list that says how many are left, spins while loading, and says when there are none.5 views · 8 downloadsMenuBarA desktop-style bar of menus (File, Edit, View) with shortcuts, ticks and the keyboard moves of a real menubar.5 views · 6 downloadsPrintButtonPrints the page, or only one element of it by id, hiding the rest while the print dialog is open.4 views · 8 downloadsReactionPickerA row of emoji reactions with counts, one tap to react or take it back, and a menu to add another.5 views · 6 downloadsShareButtonShares a link through the system's share sheet, or copies it where the browser has none, and says which.6 views · 6 downloadsSpeedDialA floating action button that opens a column of smaller labelled actions, with the keyboard and a click elsewhere handled.5 views · 8 downloadsSplitButtonThe usual action as a button, joined to a menu of the other ways to do it, with the keyboard.5 views · 5 downloadsThemeToggleLight, dark or system, set on <html> for the whole page and remembered in the browser.6 views · 6 downloadsToggleButtonA button that stays pressed, alone or in a group where one or any number are pressed; a form sends it.6 views · 8 downloadsVoteButtonsUp and down votes around a score that follows them, as on a forum, in a column or a row.5 views · 6 downloads
Forms 101
AddressFormStreet, city, region, postcode and country in the usual layout, with the autocomplete names browsers fill from.5 views · 7 downloadsAmountInputReads 1.5k, 2m, 1,234.50, 1.234,50, $12 and EUR 40, decides which mark groups, shows the normalised amount, flags what could go two ways, and sends a real decimal.3 views · 9 downloadsAuthFormSign in, sign up, forgot and reset password in one form that switches in place, each posting to its own route.7 views · 4 downloadsAutocompleteA free-text box that offers matches as one types, with the arrow keys and Enter; whatever is typed may stay.5 views · 7 downloadsAutosaveFormKeeps a draft in the browser as it is typed, offers to restore or discard it, says when saving failed, and works with storage blocked.3 views · 5 downloadsAvatarUploadA round picture with Change and Remove, showing the picture picked before it is sent, on a real file input.6 views · 6 downloadsBarcodeInputTells EAN-13, EAN-8, UPC-A, ISBN-10 and ISBN-13 apart by shape, checks the check digit, says what the right one would be, and converts ISBN-10 to ISBN-13.2 views · 6 downloadsBirthdayInputDay, month and year drop-downs that give one date in a hidden input, the days following the month and the years the age allowed.5 views · 7 downloadsBranchingSurveyOne question at a time with jumps by answer: back keeps answers, progress is counted from the longest path left, and unreachable or looping questions are reported.3 views · 6 downloadsCardInputA payment card as it is typed: the number grouped, the brand, MM/YY and the code, with typos said.6 views · 6 downloadsCharacterCounterA text box or textarea with a live 120 / 280 count that warns near the limit, as a hard stop or a soft one that blocks sending.5 views · 6 downloadsCheckboxA checkbox drawn by CSS on a real input, with an indeterminate state, and a group of them in a fieldset.5 views · 6 downloadsCheckboxCardsAny number of choices as cards with a title, a line of detail and a check, each a real checkbox a form sends.5 views · 6 downloadsChecklistInputCheckboxes under a progress line that says how many are done and fills as they are ticked; each posts with a form.5 views · 8 downloadsChipGroupChips to pick one or several of, like filters: real radios or checkboxes that a form sends, with counts.6 views · 4 downloadsCodeEditorA code textarea with line numbers, where Tab puts spaces in, Shift+Tab takes them out and Enter keeps the indent.5 views · 9 downloadsColorContrastChecks two colours against WCAG 2 for normal and large text, and finds the nearest colour that passes with the same hue and saturation.3 views · 5 downloadsColorPickerA colour as hex, or picked from a square, a hue slider and swatches; it says when hex is wrong.4 views · 5 downloadsColorSwatchesPick one colour from a set of round swatches: real radio buttons, so they post with a form and work with the keyboard.5 views · 5 downloadsComboboxA text box that filters a list of options as you type, or asks for them (a server, a map service), with the arrow keys, Enter and Escape.5 views · 7 downloadsConsentCheckboxA required checkbox beside legal text with links to the terms and the privacy policy, posted as a real checkbox.5 views · 6 downloadsContactFormName, email, subject and message with a Send button: a plain form posting to your route, shown again with errors or as sent.5 views · 7 downloadsContactPastePaste an email signature or a blurb: it pulls out the name, email, phone, website, company and address into editable fields, marks how sure each guess is, and never overwrites an edit.5 views · 6 downloadsCountryPickerA drop-down of every country with its flag and ISO code, favourites first, sending the two-letter code with a form.5 views · 7 downloadsCronBuilderBuilds a five-field cron line from dropdowns or reads one typed, says it in English, lists the next runs in a time zone, and rejects a day that never comes.2 views · 6 downloadsCurrencyInputAn amount with its currency's symbol, thousands grouped as it is typed and the decimals the currency has, sent as plain digits.5 views · 5 downloadsDatePickerA date typed as YYYY-MM-DD or picked in a calendar grid, with the keyboard, limits and days that cannot be chosen.7 views · 6 downloadsDateRangePickerA first and last day picked on two months (with a preview as you go) or from presets such as Last 7 days; or a stay in nights, around booked days, with a price under each.4 views · 6 downloadsDateTimeInputA date and a time side by side on the browser's own fields, giving one ISO value, in a time zone when given one.5 views · 9 downloadsDependentSelectTwo drop-downs where the second's options depend on the first, both real selects a form sends.5 views · 8 downloadsDirtyFormGuardCompares a form with its first values: lists what changed, reverts per field or all, warns before leaving, and tells a change put back from a real one.3 views · 5 downloadsDurationInputHours, minutes and seconds typed side by side, giving one value in seconds, with the arrow keys and carrying past 59.5 views · 8 downloadsEmailInputAn email box that offers the address probably meant when the domain has a slip (gmial.com, outlook.con), one click to take it.5 views · 9 downloadsEmailTypoInputChecks an address's shape, offers did you mean gmail.com by edit distance with one click to fix, warns of throwaway domains, and stays quiet on a valid uncommon domain.3 views · 6 downloadsEmojiPickerPick an emoji from tabs of categories or by searching their names; each is named for screen readers and a form gets the one picked.4 views · 7 downloadsExpressionInputA number field that works out 12*3+4, 15% of 80 and (1+2)/3 exactly with its own parser, shows the answer as typed, points at what it cannot read, and sends the answer.2 views · 6 downloadsFileDropDrop files or click to choose them: a real file input that a form posts, listing names and sizes.5 views · 7 downloadsFileUploadDrop or choose files: kinds, sizes and thumbnails listed, limits checked per file, removable, with upload progress.5 views · 6 downloadsFilterBarA search box with filter menus and chips, counts, removable pills and Clear all, sent as a GET form.5 views · 8 downloadsFontPickerA drop-down of fonts, each option drawn in itself, with a preview line in the one chosen.5 views · 7 downloadsFormA plain <form method="post"> laid out stacked, inline or in a grid, with a summary of what is wrong at the top and a submit row at the end.6 views · 9 downloadsFormActionsThe row of submit and cancel buttons at the end of a form, aligned at the end, start, centre or both sides.5 views · 5 downloadsFormBuilderAdd, reorder and set up fields beside a live preview; names cannot repeat, and the form goes out as JSON that also loads back.3 views · 7 downloadsFormFieldA label, a hint and an error around any control, with a required mark, the label beside or above it.5 views · 5 downloadsFormRowFields side by side, equal or weighted, that stack one under another on a phone.5 views · 8 downloadsFormSummaryA read-only review of the values entered, in sections each with an Edit link, for the last step before sending.5 views · 7 downloadsFormWizardA long form in steps, with the steps shown, Back and Next that check each step, and a review with Edit before it is sent as one form.5 views · 6 downloadsFuzzySelectA combobox that ranks options by fuzzy subsequence score with matched letters highlighted and recent picks first, ignoring case and accents, with full ARIA keyboard behaviour and a real field.2 views · 6 downloadsGuestPickerHow many adults, children, infants and pets are coming, said in one line, with a most for guests.5 views · 7 downloadsIbanInputGroups an IBAN in fours as typed, knows each country's length, validates mod-97 with big-number arithmetic, points to a likely typing slip, and sends it without spaces.4 views · 8 downloadsIconPickerPick an icon from a grid of 51, narrowed by a search over names and meanings; the arrow keys move and a form gets the name.5 views · 5 downloadsImagePickerOne of several pictures chosen by its thumbnail: real radios under the pictures, so a form sends the choice and the arrow keys move it.6 views · 7 downloadsInlineEditText that turns into a box to change it in place: Enter saves, Escape puts it back.5 views · 8 downloadsKeyValueEditorRows of keys and values to add and remove, with duplicate keys pointed out; posts JSON or name[key] fields.5 views · 7 downloadsLanguagePickerA drop-down of languages each written in its own name, sending the ISO 639-1 code with a form.5 views · 5 downloadsLikertScaleA statement with a row of points from Strongly disagree to Strongly agree: real radios in a fieldset, posted with a form.6 views · 7 downloadsMarkdownEditorA Markdown textarea with a toolbar that wraps the selection (bold, italic, link, list) and a Preview tab rendered as the page will show it.5 views · 9 downloadsMaskedInputA box that shapes what is typed to a pattern (### ###-####, AA-00-AA) as it is typed, dropping what does not fit.6 views · 8 downloadsMentionInputA textarea that offers people when @ is typed, puts @handle in, and sends the handles mentioned beside the text.5 views · 6 downloadsMinMaxInputTwo number boxes, a minimum and a maximum, kept in order and inside their bounds, posted as name_min and name_max.5 views · 6 downloadsMonthPickerA month and year picked from a grid of twelve months under the year, from a button or in the page, sent as YYYY-MM.4 views · 7 downloadsMultiSelectSeveral choices from a searchable drop-down of checkboxes, shown as chips that come off with ×.5 views · 8 downloadsNaturalDateInputUnderstands next friday 5pm, in 3 days, end of month and 12/3 in the locale's order, says what it took, and offers the other readings when words mean two things.3 views · 7 downloadsNewsletterFormAn email box and a Subscribe button in one row, a plain form posting to your route, with a done state once it worked.5 views · 6 downloadsNpsInputThe eleven scores 0 to 10 of a Net Promoter question in a row, with the words at the ends: real radios posted with a form.5 views · 7 downloadsNumberInputA number box with − and + buttons that stop at its limits, and keeps what is typed between them.5 views · 7 downloadsOtpInputBoxes for a one-time code: typing moves along, Backspace goes back, pasting fills them all.5 views · 5 downloadsPaletteBuilderBuilds a 50 to 950 scale and a semantic set from one colour, shows which pairs pass contrast, and exports CSS variables or JSON.3 views · 6 downloadsPasswordGeneratorGenerates from a policy with a cryptographic source and no modulo bias, as random, pronounceable or a passphrase, shows true entropy, and refuses an impossible policy.2 views · 7 downloadsPasswordInputA password field with a show/hide toggle and, for new passwords, a strength meter.5 views · 5 downloadsPasswordStrengthA new-password field with a meter that fills as it gets stronger and a checklist of rules ticked as they are met.5 views · 4 downloadsPhoneInputA country code select and a number box, sent together in international form (+351912345678) with the country's ISO code.6 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.6 views · 6 downloadsProfileFormAvatar, name, username, bio and website in the usual layout: a plain form posting to your route, shown again with errors.5 views · 8 downloadsQuantityInputA compact count with − and + either side, kept to its limits and step, with the arrow keys, PageUp/PageDown, Home and End.5 views · 7 downloadsRadioCardsOne choice of several as cards with a title, a line of detail and a dot, each a real radio a form sends.5 views · 7 downloadsRadioGroupOne choice of several: real radio buttons in a fieldset, in a column, a row or as cards.5 views · 6 downloadsRangeSliderTwo thumbs on one track for a range (a price from–to), each with the keyboard; they cannot cross.5 views · 6 downloadsRatingStars to give a score (radio buttons underneath, half stars if wanted) or to show one, read-only.6 views · 6 downloadsRecurrencePickerHow something repeats, daily, weekly on chosen days, monthly or yearly, and when it ends, said in words and sent as a rule and an RRULE.5 views · 8 downloadsRegexTesterTests a pattern live: matches marked, groups listed, a replace preview, the pattern explained, errors at their place, and a guard against patterns that hang.3 views · 11 downloadsRichTextEditorA formatted-text editor (bold, italic, lists, links, headings) on contenteditable, its HTML kept in a hidden input a form sends.7 views · 5 downloadsRuleFormA form from a data description: fields shown and required by rules, validation and cross-field checks, cycles reported, hidden fields left out of what is sent.3 views · 7 downloadsSearchInputA search box with a magnifier and a clear button; Escape clears, Enter submits its form.6 views · 5 downloadsSelectA drop-down on the browser's own select: options, groups, a placeholder, and a list box for several.5 views · 7 downloadsSignaturePadDraw a signature on a canvas (or type the name), with Clear, kept as a PNG data URL in a hidden input a form sends.5 views · 7 downloadsSliderA range input with its value shown beside the label and the track filled up to the thumb.5 views · 5 downloadsSlugInputMakes a URL slug from a title as it is typed, writing accents plainly, stops following once edited by hand, and checks taken and reserved links, offering the next free one.3 views · 6 downloadsSortableListA list put in order by dragging or with the keyboard, each move announced, the order sent with a form.5 views · 5 downloadsSwitchAn on/off toggle that is a real checkbox: it submits with a form and works with the keyboard.4 views · 7 downloadsTagInputCollects tags: Enter or a comma adds one, Backspace removes; a form gets them as a list.6 views · 5 downloadsTextAreaA box for several lines, with a live count against a limit and an option to grow with what is typed.5 views · 8 downloadsTextFieldA labelled input with help text, an error message and short text before or after it.5 views · 8 downloadsTimeInputA time in parts (hours, minutes, AM/PM) changed with the arrow keys or by typing.5 views · 7 downloadsTimeSlotsTimes to choose one from, with the places left at each; full ones cannot be chosen.5 views · 5 downloadsTimezonePickerA drop-down of time zones grouped by region, each with its UTC offset for today, sending the IANA name with a form.5 views · 5 downloadsTransferListTwo filterable lists to move options between, several at a time, by mouse or keyboard.5 views · 5 downloadsUrlInputA web address box that shows the protocol fixed at the start and lets the browser check the shape, with a tick when it looks right.5 views · 5 downloadsUsernameInputTicks off each rule live, checks taken names in any case and for look-alikes such as l and 1 or O and 0, and offers free names made from the person's own.2 views · 5 downloadsWeekPickerAn ISO week picked from a month shown as numbered weeks, by click or the arrow keys, sent as 2026-W45.5 views · 8 downloadsYearPickerA year picked from a grid of a decade, turned ten years at a time, from a button or in the page.4 views · 7 downloads
Feedback 28
AlertA message in the page in six tones and three variants, with an icon, announced to screen readers, and dismissable.5 views · 9 downloadsBadgeA small pill for a status or a count: six tones, soft, solid or outline, a status dot, and 99+.8 views · 6 downloadsBannerAn announcement across the top of the page in six tones, with a link, closed for the session once dismissed.7 views · 6 downloadsCoachmarkA small callout pointing at an element by id, explaining it once, dismissed with Got it; several make a tour.6 views · 8 downloadsConnectionStatusSays when the browser goes offline, as a bar across the top or a pill, and that it is back online for a moment.6 views · 7 downloadsCookieConsentA cookie banner with accept, reject and settings by category, remembering the choice in localStorage.6 views · 8 downloadsCountdownDays, hours, minutes and seconds left until a date-time, ticking in the browser, then an ended message.6 views · 6 downloadsEmptyStateWhat a list or page shows when there is nothing in it yet, with an icon and what to do next.6 views · 7 downloadsErrorPageA 404 or 500 page: the code large, what it means, a search box if wanted, and links to go on from.5 views · 7 downloadsInlineMessageA small one-line message with an icon for its tone (info, success, warning, error), to sit in a form or beside a control.5 views · 8 downloadsLoadingDotsThree dots bouncing in turn, inline, for something short that is on its way; screen readers hear the label.5 views · 7 downloadsLoadingOverlayCovers its content with a spinner and a message while something is busy, keeping the content in place but out of reach.5 views · 6 downloadsMeterA measurement within a range, coloured green, amber or red by whether it is where it should be, as segments or one bar.4 views · 8 downloadsNewBadgeA small New, Beta or Updated label beside an item, in tones and variants, that stops showing after a date.5 views · 7 downloadsNoticesThe styles for Quillo's own notify() toasts and ask() dialogs, in every tone and position.5 views · 6 downloadsNotificationDotA small dot or a count on the corner of anything, in tones and four positions, with a label for screen readers.5 views · 7 downloadsProgressHow far along something is, as a bar or a ring, with its percentage, or indeterminate.5 views · 7 downloadsProgressRingCircular progress in four sizes, with its percentage or a value of your own in the middle, or turning while not known.6 views · 8 downloadsResultPageA whole page that says how something ended: an icon for the outcome, a title, text and what to do next.5 views · 4 downloadsSaveStatusSaving…, Saved, Unsaved changes or Could not save, with an icon, the time last saved and an optional action.5 views · 6 downloadsSkeletonGrey shapes where content will be while it loads: text lines, boxes, circles, and a card.6 views · 7 downloadsSkeletonTableA table of grey bars in rows and columns, with a header row, while a table's data loads.4 views · 7 downloadsSkeletonTextGrey lines in the shape of a paragraph, with a heading and several paragraphs if asked, while text loads.5 views · 5 downloadsSnackbarA short message along the bottom of the window with one action, shown from anywhere by calling snackbar_show().6 views · 7 downloadsSpinnerA loading spinner with a label for screen readers; it pulses instead of turning with reduced motion.6 views · 7 downloadsStatusDotA coloured dot and a word for the state of a person or a service, with an optional pulse, said to screen readers.4 views · 8 downloadsTooltipA short note shown while something is hovered or focused, in CSS alone, on any of its four sides.5 views · 10 downloadsUploadProgressOne file's upload: name, bytes sent of its size, speed, time left, a bar, and Cancel; done, paused and error states.4 views · 8 downloads
Overlays 20
AlertDialogA modal that only informs, with one OK button, on the browser's own <dialog> and no JavaScript.6 views · 7 downloadsChatWidgetA chat button in the corner that opens a small chat panel, with replies from your server and a count for unseen ones.4 views · 8 downloadsCommandPaletteCtrl+K opens a fuzzy search of commands and pages, grouped, with keys, recent picks and the arrow keys.6 views · 8 downloadsConfirmButtonA button that asks first, in a dialog on the page, then submits its form, follows its link or calls back.5 views · 5 downloadsDrawerA panel that slides in from an edge over the page, on the browser's own <dialog>.6 views · 6 downloadsFlyoutA panel that opens beside its button at a chosen side, keeps open while you work in it, and closes on a click outside.5 views · 10 downloadsFullscreenModalA dialog taking the whole window, with a bar holding close, its title and a main action, on the browser's <dialog>.5 views · 4 downloadsHoverCardA card of details on hover or focus, after a short wait, that stays under the pointer; Escape hides it.5 views · 6 downloadsLightboxThumbnails that open full-screen, with captions, a counter, the arrow keys, swipes and focus put back.5 views · 6 downloadsModalA dialog over the page, on the browser's own <dialog>: focus, Escape and screen readers handled.6 views · 8 downloadsNotificationCenterA bell with the unread count, opening a panel of notifications to filter and mark read, one by one or all at once.5 views · 7 downloadsPopoverA small panel of anything beside a button, on the browser's popover: Escape and clicks outside close it.5 views · 6 downloadsPromptDialogA modal asking for one text value with OK and Cancel, on the browser's own <dialog>; Enter submits, Escape cancels.4 views · 5 downloadsQuickViewA Quick view button on a card that opens a preview of the item, its picture, price, text and actions, in a dialog.5 views · 6 downloadsSearchOverlayA full-screen search with results as one types, grouped and marked, from a list or a server, opened with /.7 views · 5 downloadsShareSheetA bottom sheet with the ways to share a link: copy it, email, X, LinkedIn, WhatsApp and more, and the system's own.6 views · 4 downloadsSheetA bottom sheet on the browser's <dialog>: half or full height by its handle or a drag, Escape to close.6 views · 6 downloadsShortcutsDialogA dialog listing the page's keyboard shortcuts in groups, opened with ?, with a box to filter them.5 views · 8 downloadsSpotlightTourA guided tour that dims the page and lights one element at a time by id, with a card saying what it is.5 views · 7 downloadsToastA stack of toasts any component adds with toast_show(): tones, an action button, and timers that hold on hover.6 views · 7 downloads
Navigation 36
AccordionSections that open under their titles, on the browser's own <details>: exclusive with a group.5 views · 7 downloadsAlphabetIndexA to Z links into a list sorted by name; letters with nothing under them stay in place, disabled.4 views · 6 downloadsBackToTopA button in the corner that shows once the page is scrolled down and takes it back to the top.6 views · 8 downloadsBottomNavA fixed bar of icon tabs along the bottom of a phone's screen, with counts and the current one marked.6 views · 7 downloadsBreadcrumbsWhere this page sits: a trail of links up to the home page, the last one marked as this page.5 views · 6 downloadsCollapsibleNavSide navigation in groups that fold under their titles, the browser remembering which are open.6 views · 7 downloadsContextMenuA menu where an area is right-clicked, held or Shift+F10 is pressed, with shortcuts, separators and the arrow keys.5 views · 7 downloadsDirectoryNavA long list of names grouped under sticky letter headers, with a row of letters at the top that jumps to each group.5 views · 5 downloadsFilterTabsTabs with counts that filter a list, one selected, moved between with the arrow keys; a hidden input holds the key.5 views · 6 downloadsFooterNavColumns of grouped links for a site's footer, each under its title, wrapping on narrow screens.5 views · 7 downloadsIconTabsTabs with an icon above each label and a count on its corner, the arrow keys moving between them.5 views · 6 downloadsJumpLinksA row of links to the sections of the page, scrolling sideways when narrow and sticking to the top if asked.6 views · 6 downloadsLanguageSwitcherA button showing the page's language that opens the others, each in its own name, as links to the same page in it.5 views · 6 downloadsLinkListA plain list of links, each with a line saying where it leads, an icon and a short note at the right.5 views · 6 downloadsMegaMenuA top bar whose items open wide panels of grouped links under the whole bar, on hover and from the keyboard, with no script.5 views · 8 downloadsMenuA vertical list of links and actions in titled sections, with icons, shortcuts, counts, disabled items and the active one marked.6 views · 7 downloadsMobileNavA menu button that opens the site's navigation over the whole screen, as a dialog: groups, the current page, actions at the bottom.5 views · 6 downloadsNavLinkA link marked current when the page's URL is where it goes, or under it; as text, a pill or underlined.5 views · 6 downloadsNavSearchA search box for a navbar that grows when focused, with / to reach it and Escape to clear; a real form sends it.5 views · 5 downloadsNotificationBellA bell with the unread count on its corner: a link, or a button that opens any panel.5 views · 9 downloadsPagerPrevious and next links with their titles, for the pages of an article, a book or docs.6 views · 6 downloadsPaginationLinks to the pages of a long list: first, last, the ones around this page, and Previous and Next.6 views · 5 downloadsProgressNavNumbered steps as links: the ones done link back, this one is marked, and the ones to come wait their turn.6 views · 5 downloadsScrollTabsA row of tabs that scrolls sideways when there are more than fit, with arrows at the ends and the keyboard.5 views · 9 downloadsScrollspyLinks to the sections of a page that mark the one in view as it scrolls, down the side or in a row.5 views · 9 downloadsSegmentedControlOne choice of a few, as a pill with the picked one raised: real radio buttons that a form sends.4 views · 5 downloadsSideNavAn app's navigation down the side: sections, groups that open, icons, counts; it folds to its icons.4 views · 6 downloadsSitemapListA site's pages as a nested list of links, as deep as the site goes, flowing into columns on wide screens.4 views · 5 downloadsSkipLink"Skip to content": the first link on a page, out of sight until the keyboard reaches it.5 views · 6 downloadsStepsHow far along a process is: steps done with a check mark, this one, and those to come; across or down.5 views · 7 downloadsSubnavA second row of links under the main navigation, for one section's pages, with counts and the current one marked.5 views · 5 downloadsTableOfContentsLinks to a page's headings that mark the section being read as it scrolls, and scroll smoothly there.5 views · 6 downloadsTabsPanels behind a row of tabs, from radio buttons and CSS: no JavaScript, any HTML from the server.5 views · 7 downloadsTreeViewNested items that open and close, with the arrow keys, type-ahead and optional tri-state checkboxes.6 views · 7 downloadsUserMenuAn avatar button that opens the account menu: name and email, links, and sign out; the arrow keys move through it.5 views · 7 downloadsVerticalTabsTabs down the left with icons and a line of detail, and the selected one's panel at the right; a row above it when narrow.4 views · 6 downloads
Data 84
ActivityFeedA stream of what people did, with their pictures, an icon for each kind of action, when, quotes and day headings.5 views · 7 downloadsArticleCardA post to click into: image, category, title, excerpt, author, date and reading time; image on top or to the side.5 views · 7 downloadsAuditLogWho did what to what and when, newest first, filtered by person and action, searched, and paged.5 views · 7 downloadsAvatarA picture, or initials on a colour of the person's own, with a status dot; and overlapping groups with +N.6 views · 5 downloadsAvatarStackOverlapping avatars with names in tooltips, links to each person, and a +N that names the rest.5 views · 10 downloadsBarcodeA Code 128 barcode drawn as SVG from text, switching to the compact digit set for long numbers, with the text under it.4 views · 10 downloadsBoardingPassA boarding pass with from and to, flight, date and times, gate, seat, boarding group, a barcode area and a stub.4 views · 5 downloadsBulkEditorPicks rows by checkbox or filter, then sets, replaces, prefixes, suffixes or adjusts a column, with a before and after preview, apply, undo and redo.2 views · 8 downloadsChangelogReleases with version, date and label, their changes grouped by kind: Added, Changed, Fixed, Security and the rest.6 views · 7 downloadsChatThreadA conversation: grouped messages with avatars, days, a typing indicator, and a box where Enter sends.4 views · 5 downloadsCodeBlockCode in a <pre> with a file name, line numbers, highlighted lines and a Copy button.5 views · 6 downloadsComparisonTableFeatures down the side and options across, with ticks, crosses and values in the cells, and one option picked out.5 views · 6 downloadsContactCardA person's contact details as tel:, mailto: and map links, with a vCard to download in one tap.5 views · 7 downloadsCsvImporterTakes pasted or dropped CSV: detects the delimiter, quotes and header, guesses the column for each field, checks every row and lists the bad ones with the reason.2 views · 8 downloadsCsvTableA table made from CSV text, with quoted fields, a header row, numbers lined up on the right and a row limit.6 views · 8 downloadsDataGridSort, search, filter by a column's values, pick rows and page through them, in one table.5 views · 9 downloadsDataListRecords as rows with a title, a line of facts, a status badge and actions as links or buttons.6 views · 9 downloadsDataProfilerReports each column of a list of rows: inferred type, missing, distinct, range, commonest values and warnings in plain words.3 views · 8 downloadsDataTableRows of data sorted by their headers, with search, pages, number, money, percent and date columns.5 views · 10 downloadsDescriptionListTerms and their details, stacked or in two columns that stack on phones, on a real <dl>.5 views · 7 downloadsDiffViewThe lines added and removed between two texts, unified or side by side, with line numbers.7 views · 6 downloadsDuplicateFinderFinds near-duplicate rows by normalised text and edit distance with an adjustable threshold, marks what differs, and lets you pick the row to keep.3 views · 7 downloadsEditableTableA grid edited in place: text, number, select, checkbox and date cells, checked, sorted, with rows added and deleted.7 views · 6 downloadsEmailPreviewAn email as a client shows it: subject, labels and star, sender with picture, to and cc, the date, the message and attachments to download.6 views · 7 downloadsExpandableTableRows with a button that opens a panel of details under them: labelled fields, a note, or your own markup.5 views · 6 downloadsFeedItemA social-feed item: avatar, name, handle, time, text, a picture or any media, and like, comment and share buttons with counts.6 views · 8 downloadsFileListFiles as a table or a grid, with kind icons, sizes and dates, sorted, picked, downloaded or deleted.7 views · 6 downloadsFilePreviewA look at a file before opening it: an image, a PDF in an object, the start of a text file, a player, or an icon, with name, size and a download link.5 views · 7 downloadsFlowStepsA process as boxes joined by arrows, with words on the arrows, tones and done, current or coming steps; horizontal, or vertical where narrow.6 views · 8 downloadsFolderGridFolders and files as tiles picked like a file manager: click, Ctrl/⌘ and Shift, arrow keys by row, Space, Ctrl+A, Enter or double-click to open.6 views · 9 downloadsFormulaGridA small spreadsheet: formulas with ranges and SUM AVG MIN MAX COUNT IF, dependency-ordered recalculation, exact decimals, keyboard movement and errors in the cell.2 views · 6 downloadsGroupSummaryGroups rows by chosen columns with sum, average, minimum, maximum, count and distinct: nested subtotals, a grand total, folding groups and CSV, all exact.3 views · 5 downloadsGroupedTableRows under a heading per group, with a subtotal row after each group and a grand total, from a flat list.6 views · 7 downloadsIdCardAn ID badge with a lanyard slot: photo or initials, name, role, organisation, number, issued and expiry dates, an Expired stamp, and a barcode slot.5 views · 6 downloadsInvoiceA printable invoice: parties, number and dates, lines with quantity and unit price, totals, paid and balance, notes and terms.6 views · 6 downloadsJsonExportTableJSON records as a table with a type for each column (numbers, money, dates, yes/no, links, nested), sorted by type, exported as CSV, TSV, JSON, JSON Lines, Excel, Markdown, HTML, SQL or XML.8 views · 8 downloadsJsonQueryRuns a JSONPath over a JSON document as you type: wildcards, recursive descent and filters, each result with its path, and a clear message where a path fails.2 views · 8 downloadsJsonTableJSON as a table: open nested objects and arrays in place or as the table, search at every depth, export as JSON or CSV, thousands of lines kept fast.9 views · 8 downloadsJsonViewerA map or list as collapsible JSON, coloured by type, with sizes, expand all and the path of any value.7 views · 7 downloadsKanbanBoardColumns of cards moved by dragging, by keyboard (Space, the arrows, Space) or with each card's arrows.9 views · 6 downloadsKpiCardA number with its label, the change since last period coloured by whether that is good, and a small trend as a line or bars.7 views · 7 downloadsLeaderboardPeople ranked by score with medals for the top three, shared places for ties, and your own row kept in view.7 views · 7 downloadsListGroupA bordered list of items with descriptions, badges and notes, as links, buttons or text, one active and some disabled.7 views · 6 downloadsLogExplorerReads raw logs in logfmt, JSON lines or plain text, keeps traces together, and searches them like level:error status:5xx "timeout".3 views · 6 downloadsLogViewerLog lines with each level in its colour, buttons to show or hide levels, a search that marks matches, wrapping and following the end.8 views · 7 downloadsMapViewA map (Leaflet's) with prices or dots for places on a list, one picked, and a pin to drag where something is.7 views · 8 downloadsMatchHighlightMarks where the words of a search appear in a text, in any case, every time they do.7 views · 6 downloadsMetricTrendA value with an up or down arrow and its change, coloured by whether the move is good; it can work the percentage out.7 views · 6 downloadsMilestoneListMilestones down a line with dates, done, current, coming or late, a progress bar on those under way, and the whole project's progress.6 views · 7 downloadsMonthCalendarA month of days to edit, each with a state and a price or a name: pick some (shift-click for a run), then act on them.5 views · 6 downloadsNewsListHeadlines in a compact list with source, time and a small picture; numbered for a most-read list.8 views · 7 downloadsNotificationListNotifications grouped by day (Today, Yesterday, then dates), read or unread, with links, mark-read and dismiss buttons and Mark all as read.7 views · 6 downloadsOrgChartA tree of people as boxes joined by lines, drawn with CSS on nested lists, with pictures, titles, notes and the reader's place marked.7 views · 6 downloadsPivotTableFlat records turned sideways: rows by one field, columns by another, each cell the sum, count or average of a third, with totals.7 views · 7 downloadsPriceBreakdownWhat a price is made of, a line each (a discount in green), and the total.6 views · 4 downloadsProfileCardA person at a glance: picture, name, title, bio, a row of stats and action buttons, stacked or in a row.7 views · 4 downloadsProgressListItems each with a label, a bar and its value or percentage, marked in red when one goes over its limit.6 views · 5 downloadsPropertyGridGrouped name and value rows that fold, each value edited by the control its type asks for, with changes marked and undone.7 views · 5 downloadsQrCodeA QR code drawn as SVG by an encoder written in Quillo: any text as UTF-8, level M, versions 1 to 10, the same on the server and in the browser.10 views · 9 downloadsQueryBuilderBuilds nested AND/OR filters with operators by field type, and gives a JSON filter and parametrised SQL, with a live count of the sample rows that match.3 views · 5 downloadsRankingListA ranked list with how each item moved since last time: up, down, the same or new, said in words to screen readers.7 views · 6 downloadsRatingSummaryThe average rating out of 5, how many ratings, and a bar per star count, each a filter button or link if you like.6 views · 5 downloadsReceiptA narrow till-style receipt in a monospace face: shop, date, lines, totals, payment and change, a footer and a torn edge.6 views · 6 downloadsRecordCardA record's fields as labelled values in a card, with a title, status, formatted values and actions in a footer.7 views · 5 downloadsRecordMergerMerges versions of a record field by field: agreed fields settle, conflicts are marked, and one click takes the newest, non-empty or longest values.4 views · 7 downloadsReviewCardOne review: stars (halves too), title, text, reviewer and date, a Verified mark, images, the seller's reply and a Helpful vote.7 views · 6 downloadsReviewListReviews sorted by a select (newest, highest, most helpful), filtered by stars with counts, shown a page at a time.6 views · 7 downloadsRoadmapColumns (Now, Next, Later) of items with a status badge, tags, a target date and votes; side by side, stacked where narrow.8 views · 7 downloadsSchemaInferrerReads JSON samples and infers fields, types, optional and nullable, enums and formats, merging across samples and nested data, as a table and JSON Schema.3 views · 5 downloadsScorecardA score out of a maximum as a filled ring, with a letter grade, a verdict and the parts it is made of.8 views · 6 downloadsSearchListA list that filters as you type, marks what matched, counts the results and is walked with the arrow keys.7 views · 6 downloadsSelectableTableRows with checkboxes, a select-all that shows when only some are checked, a count of the selected, and hidden inputs for a form.7 views · 7 downloadsStatA KPI tile: a label, a value, how it changed (coloured by whether that is good), and a tiny trend line.6 views · 7 downloadsStatGroupSeveral numbers that matter in one bordered row, each with its change coloured by whether that is good.7 views · 7 downloadsTagA chip for labels and filters people pick: tones, links, a dot, toggles and a remove button.7 views · 6 downloadsTagCloudTags sized and shaded by how much each is used, as links or text, in name or weight order, on a linear or log scale.6 views · 4 downloadsTeamCardA person in a team grid: square photo or initials, name, role, a line, and icon links to email, GitHub, LinkedIn, X or a site.6 views · 8 downloadsTerminalOutputA terminal-like window with a title, commands after a prompt and their output, errors in red, for docs and tutorials.7 views · 7 downloadsTestimonialCardA customer's quote with their picture, name, title and company or logo, and stars if they gave some.5 views · 6 downloadsTicketAn event ticket with a tear line and stub: event, date, venue, section, row and seat, the holder, a code or a QR as children.6 views · 7 downloadsTimelineWhat happened, in order, down a line of coloured dots, as an <ol> with <time> elements.6 views · 7 downloadsTreeTableRows that open to show the rows under them, indented by depth, with the arrow keys as an ARIA treegrid.6 views · 9 downloadsVirtualListA list of thousands of items that stays fast by drawing only those in view, with keyboard picking.6 views · 8 downloadsVirtualTableA table of thousands of rows that draws only those in view, sorted and searched across all of them.6 views · 8 downloads
Charts 67
AreaChartFilled areas for one or more series, overlapping or stacked into a total, with a hover crosshair listing every value.6 views · 8 downloadsBarChartBars up or across, one series or several grouped or stacked, on round ticks, with values on hover and a table for screen readers.7 views · 7 downloadsBollingerChartPrices with Bollinger bands of a period and a number of deviations, closes outside them marked, as a line or candles.7 views · 6 downloadsBoxPlotQuartiles, median, whiskers and outliers for each group, worked out from the raw values, with the five numbers on hover.5 views · 8 downloadsBrushChartA large chart of a range with an overview below, where a window dragged or moved by keys picks the range shown.6 views · 5 downloadsBubbleChartPoints placed by two numbers and sized by a third, in coloured groups, labelled when big enough, with all three numbers on hover.7 views · 9 downloadsBulletChartMeasures as thin bars against a target mark over grey bands from poor to good, a row each, with the band named on hover.5 views · 7 downloadsBumpChartRankings over time as curved lines between numbered places, from places or from values, with each line picked out on hover.6 views · 6 downloadsCalendarHeatmapA year of daily counts as weeks of shaded days, with month names, a less-to-more legend and each day named on hover.6 views · 6 downloadsCandlestickChartOHLC candles, green up and red down, with a volume pane, a date axis, moving averages and the details of each candle on hover.5 views · 7 downloadsChartAdvisorLooks at rows, picks a chart by the shape of the data, says why, lets the reader switch, and draws it as SVG.4 views · 6 downloadsChordDiagramFlows between groups around a circle, an arc per group and a ribbon per pair, with a group's ribbons kept on hover.6 views · 10 downloadsComboChartBars on a left axis and lines on a right axis over the same labels, for two measures of different size, with every value on hover.6 views · 6 downloadsDepthChartAn order book's bids and asks as stepped areas of the size waiting at each price or better, around the mid price, with the spread.5 views · 8 downloadsDonutChartThe parts of a whole as a ring or a pie, the total in the middle, and a legend with values and shares; hovering picks a part out.5 views · 7 downloadsDotPlotValues as dots along one axis per row; with two or more series joined as a dumbbell, sorted by change if asked, with the change on hover.6 views · 8 downloadsFunnelChartStages of a process narrowing like a funnel, each with its count and share of the first, and the share that went on between them.5 views · 7 downloadsGanttChartTasks as bars over dates, filled by progress, in groups with spanning bars, with milestones and a today line.7 views · 7 downloadsGaugeChartA half-circle dial of good, warning and bad bands with a needle at the value, and the value and its band's name under it.6 views · 7 downloadsGroupedBarChartA bar per series side by side for each label, below zero too, with the group's values on hover and the bar under the pointer picked out.6 views · 4 downloadsHeatmapChartA grid of cells coloured by value, in one colour or two either side of a middle, with a colour scale and each cell's value on hover.6 views · 5 downloadsHeikinAshiChartHeikin-Ashi candles worked out from OHLC, which smooth the noise so trends show as runs of one colour, with the real close on hover.5 views · 6 downloadsHistogramValues counted into bins, by number or width, as touching bars with each bin's range, count and share on hover, and the mean marked.7 views · 8 downloadsHorizontalBarChartBars across with the labels down the side, sorted if asked, one picked out, values at their ends and on hover.6 views · 6 downloadsInteractiveLineChartLines with a crosshair and tooltip that follow the pointer or the keyboard, legend items that hide series, and drag to zoom.6 views · 6 downloadsLineBreakChartA three-line break chart from closing prices: lines go on while the close makes new ends, and turn only past the last three lines.5 views · 6 downloadsLineChartLines for one or more series over the same labels, with an area fill or points, a hover crosshair with every value, and a legend.5 views · 6 downloadsLiveCandlesCandles built from ticks as they come: the open candle grows, a new one starts each interval, with the last price and the time left.6 views · 6 downloadsLollipopChartValues as thin stems with a dot, up or across, sorted if asked, with each value on hover or beside its dot.5 views · 6 downloadsMacdChartMACD from closing prices: the MACD and signal lines and the histogram between them, under a price chart or on its own.7 views · 6 downloadsMarimekkoChart100% stacked bars as wide as their totals, so every part's area is its value, with its shares on hover.5 views · 5 downloadsMarketHeatmapA treemap of stocks sized by market value and coloured by their change, grouped by sector, with each one's details on hover.6 views · 7 downloadsNetworkGraphNodes and links laid out by a force simulation run on the server, coloured by group and sized by their links.6 views · 11 downloadsOhlcChartOHLC bars with an open tick on the left and a close tick on the right, a volume pane, moving averages and the details on hover.6 views · 7 downloadsOrderBookAn order book's bid and ask ladders with size bars, the spread and mid price, grouping into coarser steps, and levels that flash as they change.6 views · 6 downloadsParallelCoordinatesEach record as a line across several upright axes, each with its own scale, coloured by group, picked out on hover.6 views · 8 downloadsParetoChartCauses as bars sorted largest first with the running share as a line on a 0 to 100% axis, and the few that reach 80% picked out.7 views · 7 downloadsPieChartA pie with each slice named and its share beside it, small slices gathered into Other, and the slice under the pointer pulled out.5 views · 5 downloadsPnlChartProfit and loss per day as green and red bars, with the running total and its drawdowns shaded, and the key figures above.6 views · 6 downloadsPolarAreaChartSlices of equal angle whose length shows each value on rings of round ticks; hovering a slice or its legend picks it out.6 views · 9 downloadsPortfolioAllocationA donut of a portfolio's holdings beside a table of each one's weight, value and gain, with the totals.6 views · 6 downloadsPriceTickerA strip of symbols, prices and changes that scrolls by itself with CSS, stops on hover and stands still for reduced motion.6 views · 6 downloadsRadarChartSeries as shapes over axes around a circle, with rings for the scale, to compare profiles; hovering a shape or its legend picks it out.6 views · 4 downloadsRadialBarChartBars bent into rings around a centre, each as long as its value against a limit, with a legend that picks a ring out on hover.6 views · 5 downloadsRangeChartA low and a high per label as floating bars or a band, with an optional middle value, and each range on hover.6 views · 4 downloadsRealtimeChartA live line that scrolls as values come, a window of the last N, with the latest value, its change and a pause.6 views · 6 downloadsRenkoChartRenko bricks of one box size from closing prices, a brick for each whole box the price moves, with each brick's range on hover.5 views · 7 downloadsRsiChartThe relative strength index of closing prices with overbought and oversold lines, under a price chart or on its own.5 views · 8 downloadsSankeyChartFlows between nodes in columns as bands as wide as their amounts, laid out to cross little, with each flow on hover.5 views · 6 downloadsScatterChartPoints placed by two numbers, in coloured groups, with a least-squares trend line for each and every point's numbers on hover.7 views · 5 downloadsSlopeChartA line per item from its value then to its value now, coloured by rise or fall, with labelled ends that keep apart.6 views · 4 downloadsSmallMultiplesThe same small line, area or bar chart for each group in a grid, on one shared scale, with each value on hover.6 views · 7 downloadsSparklineA small inline chart of a list of numbers: a line, an area or bars, safe with no data or flat data.6 views · 7 downloadsStackedBarChartBars of parts piled up to a total, or each scaled to 100% to compare shares, with the parts and total on hover.5 views · 6 downloadsStepChartLines that hold each value flat and move in steps, for one or more series, with an optional fill and every value on hover.6 views · 5 downloadsStockChartA full trading chart: candles, line or area, volume, range buttons, a crosshair with the OHLC readout, wheel zoom and drag pan, indicators and RSI and MACD panes.6 views · 6 downloadsStreamGraphSeries stacked as flowing layers around a centre line, or wiggled flat, with every layer's value at a moment on hover.6 views · 7 downloadsSunburstChartA hierarchy as rings of arcs sized by value, shaded by level, with the hovered part's share in the middle.6 views · 8 downloadsSymbolCardA symbol with its name, last price, change and percent, a sparkline over the previous close, the day's range and volume.6 views · 6 downloadsTradeFeedTime and sales: trades as they happen, newest first, buys green and sells red, large ones picked out, capped at a number of rows.6 views · 11 downloadsTreemapParts of a whole as rectangles sized by value, squarified, optionally in groups of their own colour, with each value and share on hover.7 views · 6 downloadsTrendForecastFits a least-squares trend and any seasonal pattern to a series, forecasts it with a band, and warns plainly when the fit is poor.2 views · 8 downloadsViolinPlotThe shape of each group's values as a mirrored kernel density, with quartiles and median inside and the numbers on hover.5 views · 7 downloadsVolumeProfileVolume traded at each price level as bars beside the price, split into buying and selling, with the point of control and the value area marked.6 views · 6 downloadsWaffleChartParts of a whole as a 10×10 grid of squares, one per percent, with a legend of values and shares; hovering picks a part out.7 views · 6 downloadsWatchlistSymbols with last price, change, percent and a sparkline, in columns that sort, with prices that flash as they change.6 views · 6 downloadsWaterfallChartA start value, its rises and falls as floating bars joined by steps, subtotals and an end total, with the running total on hover.7 views · 7 downloads
Media 24
AudioPlayerAn audio clip with play, a seek bar that says the time, and a button cycling through playback speeds.6 views · 7 downloadsCameraCaptureTakes a photo with the camera into a hidden input as a data URL, with retake, and says so when there is no camera.6 views · 6 downloadsCoverImageA wide picture with a title, subtitle and actions over a gradient, in three heights.7 views · 7 downloadsEmbedFrameAnother page in a frame that keeps its shape and fills its width, with a title, permissions and a sandbox.5 views · 5 downloadsFigureAn image (or anything) with a caption and a credit under it, as a figure with its figcaption.8 views · 9 downloadsFileIconA file's icon by its extension, written on it and coloured by its kind: document, sheet, PDF, image, code and more.6 views · 9 downloadsIconEighty common icons by name, drawn inline as SVG in the text's colour, in five sizes or any pixel size.7 views · 6 downloadsIconGridEvery icon of the kit with its name in a grid, narrowed as you type, each one a click away from its name.6 views · 7 downloadsImageAn image that keeps its shape while it loads, shimmering, and shows a fallback with its alt when it cannot.6 views · 9 downloadsImageCompareBefore and after pictures one over the other, with a divider to drag (or move with the keys) between them.6 views · 9 downloadsImageCropA crop box over a picture, dragged and resized by its corners or the keys, with the crop in hidden inputs a form sends.9 views · 7 downloadsImageGalleryA grid of thumbnails (the last can say "+N") opening a framed viewer with captions, next and previous, the keys and a strip.6 views · 7 downloadsImageHotspotsA picture with numbered points that show a note on hover or focus, with no script: a plan, a product, a photo.7 views · 6 downloadsLogoCloudA row of logos, grey until hovered, with a line saying what they are; each can be a link.6 views · 5 downloadsMarqueeContent scrolling sideways without end, in CSS alone: seamless, paused on hover, still when motion is reduced.8 views · 6 downloadsMediaCardA card with a picture (or any media) on top or at the side, then a meta line, title, text and actions.6 views · 6 downloadsPdfViewerA PDF in the page with the browser's own viewer, a bar with its name, open and download links, and a fallback.6 views · 7 downloadsPlaylistNumbered tracks with the one playing marked, each one's length and the total; with sources it plays them in turn.6 views · 5 downloadsThumbnailA small image in five sizes and three shapes, with a line of text over it, a "+N" veil, or a link.7 views · 9 downloadsTickerA news ticker: a labelled strip of headlines sliding past, each a link when it has one, in CSS alone.6 views · 9 downloadsVideoPlayerA video with the kit's own controls: play, seek, time, volume, full screen and the keyboard.7 views · 7 downloadsVolumeControlA mute button and a level slider with an icon that shows how loud it is; a real range, so forms and keyboards work.6 views · 7 downloadsYouTubeEmbedA YouTube video that loads nothing but its poster until the play button is clicked, then starts at once.6 views · 7 downloadsZoomImageA picture that zooms in where the pointer is; a click holds it, and the keyboard zooms and moves around too.6 views · 4 downloads
Commerce 35
AddressCardA saved address with a Default badge and Edit and Remove, as submit buttons in a plain form or callbacks.6 views · 7 downloadsBestCouponWorks out the lowest total from several coupons, trying each combination and order under their rules, and explains the winner and why each other coupon lost.3 views · 7 downloadsBoxPackerPicks the smallest box that takes items with rotation, or splits across boxes, works out dimensional and billable weight, and says when an item fits none.4 views · 7 downloadsBundleBuilderPicks a bundle from groups with minimums and maximums: tiered discount, the cheapest way to the next tier, the saving over buying alone, and totals exact to the cent.4 views · 7 downloadsCartItemOne line of a cart: picture, name and options, a quantity control, the line's total and Remove, as inputs a form sends.6 views · 6 downloadsCartSummarySubtotal, shipping, tax, a discount and the total added up, with a Checkout button as a link, a form or a callback.6 views · 7 downloadsCheckoutStepsCart → Details → Payment → Done: the steps of a checkout, those done as links back, the current one marked.5 views · 7 downloadsCouponInputA promo code box with Apply: on_apply(code) says whether it took, and an applied code shows with Remove.6 views · 5 downloadsDeliveryEstimate"Arrives Tue 4 – Thu 6 Nov", worked out from how many days delivery takes, working days if asked.6 views · 8 downloadsDiscountBadge"−20%" or "Save $10" as a small label, in tones, solid, soft or outline, or pinned to an image's corner.7 views · 8 downloadsFreeShippingMeterHow far a cart is from free shipping or the next reward, and the cheapest item or set that gets it there, with tiers per currency, exact when reached.3 views · 5 downloadsMarginCalcCost, price, margin and markup bound together: edit any and the rest follow from the two set last, with a price for a target margin and a warning under cost.3 views · 6 downloadsMiniCartA bag icon with the count that opens a small panel of the items, the subtotal and the way to the cart and checkout.5 views · 8 downloadsOrderHistoryPast orders with number, date, status and total, each opening on <details> to show its items and links.6 views · 7 downloadsOrderTrackerOrdered → shipped → out for delivery → delivered, with when each happened, the expected date and the tracking link.5 views · 6 downloadsPaymentMethodsWays to pay as radio cards with their marks: card (with the brands taken), PayPal, Apple Pay, Google Pay, bank, cash.6 views · 6 downloadsPlanAdvisorUsage sliders against plans with included amounts, overage and an annual discount: the actual cost of each, the cheapest, and at what usage the answer changes.5 views · 5 downloadsPlanToggleMonthly or yearly billing as a pill of two radios, with the saving shown on the yearly side.6 views · 5 downloadsPriceAn amount written in its currency, with the old price struck through and the discount worked out.6 views · 5 downloadsPriceTagA bold price with its period (/month) and a note under it, for plans, rooms and seats.6 views · 4 downloadsPricingCardOne plan: name, price and period, what it includes, and a button; highlighted with a badge when it is the one to pick.7 views · 6 downloadsPricingTablePlans across and features down, with ticks, dashes and values in the cells and the recommended plan marked.7 views · 6 downloadsProductCardA product in a shop's grid: picture, name, price with the discount, stars, a badge and Add to cart, as a plain form or a callback.6 views · 6 downloadsProductConfiguratorBuilds a product from option groups with requires and excludes rules: clashes disabled with the reason, what a change dropped explained, a live price and what is missing.3 views · 5 downloadsProductGalleryA product's pictures: one large, the rest as thumbnails that switch it, with the arrow keys, swipes and a counter.6 views · 6 downloadsProductGridProducts as ProductCards in a grid that fits as many across as there is room for, from a list of records.6 views · 5 downloadsProrationCalcWorks out a mid-period change of plan by the day: credit for the time left, charge for the new plan and what is due, across month lengths, leap years and downgrades.2 views · 8 downloadsShippingOptionsShipping methods as radio cards, each with its price and how long it takes; a plain form sends the choice.7 views · 7 downloadsSizeAdvisorTakes measurements in cm or inches and a size chart, recommends a size per garment, says how it fits by measurement, and settles between-sizes by a stated preference.3 views · 6 downloadsStockStatusIn stock, only a few left, out of stock, pre-order or back-order, with a coloured dot and the count.7 views · 5 downloadsSubscriptionCardThe plan someone is on: price, status, renewal date, usage bars and the links to manage, change or cancel it.6 views · 6 downloadsTrustBadgesSecure payment, free returns, a guarantee: reassurance icons with a line each, in a row, a grid or a list.6 views · 6 downloadsUnitPriceComparePacks in different sizes and units normalised to one, ranked by price per unit, with the best value and its saving marked and mixed weight and volume flagged.4 views · 7 downloadsVariantPickerSizes as buttons and colours as swatches, sold-out ones crossed out: radio groups for the keyboard, hidden inputs for forms.6 views · 6 downloadsWishlistButtonA heart that saves a product for later: a pressed-state toggle, named for screen readers, with a hidden input for forms.7 views · 6 downloads
Finance 50
AccountCardA bank account at a glance: type, nickname, masked number, current and available balance, what is on hold, and quick actions.8 views · 7 downloadsAccountDetailsThe details to share to get paid: account name and number, IBAN in groups of four (checked), BIC, sort code or routing number, each with a copy button.6 views · 6 downloadsAccountPickerChoose the account to pay from as radio cards with each one's masked number and available balance, those short of the amount marked.7 views · 7 downloadsAmortizationTableA loan's payment schedule worked out from its amount, rate and term: each month's principal, interest and balance, grouped by year with the year's totals.7 views · 7 downloadsAssemblyNoticeA general assembly notice: date and time, the venue or online link, the quorum, a numbered agenda and an RSVP form.6 views · 6 downloadsBankStatementA monthly statement that prints: the period, opening and closing balance, totals paid in and out, and each transaction with the balance after.7 views · 6 downloadsBillListUpcoming bills soonest first, overdue and due-soon ones marked, autopay on or off, with the total to pay and a Pay button each.7 views · 5 downloadsBillSplitterSplits a bill with tax and tip equally, by shares or by items, cents shared out by largest remainder so the parts add up exactly.3 views · 6 downloadsBreakEvenCalcFinds break-even units and revenue from costs and price, the margin of safety at a volume, a chart, and the price a target profit needs.4 views · 6 downloadsBudgetPlannerPlans a month in envelopes with the 50/30/20 check, what is left to assign, overspending warnings and exact moves between envelopes.3 views · 5 downloadsCardControlsA card's controls beside its masked face: freeze it, set daily spending and cash limits, and allow online, ATM, contactless and abroad use.7 views · 6 downloadsCashCountCounts a drawer by notes and coins to a total and an over or short variance, and makes change in the fewest pieces from what is in it.2 views · 8 downloadsChequeViewA cheque drawn as printed: payee, the amount in figures and in words, date, memo, signature and the MICR line.8 views · 5 downloadsCollateralListWhat secures a loan: each item's valuation and documents, and the loan-to-value ratio as a meter against the lender's limit.7 views · 5 downloadsCompoundCalcGrows a balance year by year with contributions and interest apart, after inflation, and finds the rate needed to reach a target.4 views · 8 downloadsCoopBallotA board election ballot: candidates as cards with a short statement, up to N ticked and no more, sent as a plain form post.7 views · 8 downloadsCreditScoreA credit score on a gauge of its bands from poor to excellent, the band it falls in, the change since the last report and the factors that move it.7 views · 8 downloadsCrossRatesA matrix of cross rates among a few currencies, each worked out from their rates against one base, the diagonal left blank.6 views · 6 downloadsCurrencyConverterAn amount and two currencies with a swap button, the rate both ways and the converted amount, crossed through the base from the rates given.8 views · 11 downloadsCurrencyPairCardOne currency pair: the bid and ask large with the pip digits biggest, the spread, the day's change, low and high, and a sparkline of the day.7 views · 6 downloadsCurrencyStrengthThe relative strength of the major currencies as bars, strongest first, given or worked out from pairs' changes.7 views · 7 downloadsCurrencyWalletBalances in several currencies with the total in a base currency, each with its rate, its worth and share, and convert and send actions.9 views · 6 downloadsDebtPayoffCompares avalanche and snowball on several debts with an extra payment: months, interest, payoff order, each month, and warns of a debt that never clears.3 views · 6 downloadsDividendStatementA member's dividend on share capital and patronage refund for a year: bases, rates and amounts, the withholding tax and the net.7 views · 8 downloadsFxPositionsOpen currency positions: pair, long or short, size, entry and current rate, profit or loss in pips and money, coloured, with the total.7 views · 6 downloadsFxQuoteTicketAn order ticket for a currency deal: buy or sell, the amount, the quoted rate counting down to its expiry, the other currency's amount and Confirm.8 views · 6 downloadsFxRateTableA board of exchange rates: each pair with its flags, bid, ask, the spread in pips and the day's change from the open, coloured.7 views · 8 downloadsInvoiceBuilderBuilds an invoice with line and order discounts, inclusive or exclusive tax, due dates by terms, a tax summary by rate and totals that reconcile.3 views · 6 downloadsLoanApplicationStepsWhere a loan application stands, from submitted to disbursed: the steps done with their dates, the current one, and what is needed next.7 views · 10 downloadsLoanCalculatorA loan's amount, rate and term as sliders and boxes, with the monthly payment, total interest and total paid following as they move.7 views · 5 downloadsLoanCommitteeQueueLoan applications before the credit committee: member, amount, purpose, the votes so far, where each stands, and approve or decline per row.7 views · 10 downloadsLoanEligibilityFour questions (income, debts, work, amount) and, as they are answered, whether a loan is likely, the amount within reach and why.7 views · 6 downloadsLoanOffersLoan offers side by side: each lender's APR, term, monthly payment, fees and total cost, with the cheapest in total marked.8 views · 7 downloadsLoanSummaryA loan in a card: the outstanding balance out of the amount borrowed, how much is paid off as a bar, the rate, and the next payment and when it is due.8 views · 7 downloadsMemberCardA co-op or credit union member's card: photo or initials, name and number, member since, share capital and status.8 views · 6 downloadsMembershipApplicationA co-op membership application in steps: personal details, ID, beneficiaries adding up to 100%, the share pledge, and a review.7 views · 6 downloadsPatronageRefundCalcWorks out a co-op member's dividend on shares and patronage refund on interest paid or purchases, to the total, as they type.7 views · 5 downloadsPayeeListSaved payees with bank, masked account and what was last paid when, a Pay button each, and a search.7 views · 4 downloadsPaymentHistoryTwenty-four months of payments as a grid of years and months, on time, 30, 60 or 90 days late, or nothing due, as credit reports show them, with a legend.7 views · 7 downloadsRateAlertsSet an alert on an exchange rate, a pair above or below a rate, and see the alerts set, how far each is, and remove them.8 views · 6 downloadsRefinanceCalcCompares a loan with a new one month by month: payment, closing costs, break-even month, interest over the stay, and when it is not worth it.2 views · 6 downloadsRemittanceQuoteSending money abroad: you send, the fee, the rate against the mid-market rate, what they get and when it arrives, worked out as the amount changes.8 views · 5 downloadsRepaymentScheduleA loan's installments, past and to come: paid, due or overdue with the days late and the penalty, and a pay button on the next one.8 views · 7 downloadsSavingsGoalA savings goal: target and saved so far, the progress, the deposit needed each month to reach it by the date, and the last deposits.7 views · 6 downloadsSettleUpWorks out each person's balance from shared expenses and the fewest transfers that settle the group, exact to the cent.3 views · 8 downloadsShareCapitalLedgerA member's share capital contributions with a running balance, and the progress toward the share capital the co-op requires.6 views · 5 downloadsShareCertificateA printable share certificate: the co-op, the member, the shares in words and figures, par value and total, the date and signature lines.7 views · 4 downloadsTaxBracketsWorks out progressive tax from brackets as data: tax by bracket, effective and marginal rate, take-home, credits, and what a raise really adds.2 views · 8 downloadsTransactionListTransactions grouped by day with category, money in and out, the running balance, pending ones marked, and a search that filters as you type.7 views · 6 downloadsTransferFormA transfer between your accounts or to a payee: from, to, amount, date and memo, checked, then a review with the fee and the balance after.7 views · 9 downloads
News 17
AdSlotAn advertisement's place kept at its size so the story never jumps: standard sizes by name, another on phones, a clear label, a placeholder, sticky in a rail.6 views · 8 downloadsArticleHeaderThe top of a story: its label and section, the headline, the dek, every author grouped by role, published and updated times, and the reading time.8 views · 9 downloadsBreakingNewsA breaking-news banner: the label in a block of colour, the headline and a line more, how long ago it came in, kept up to date, and a close that can be remembered.9 views · 8 downloadsCorrectionNoticeA correction, clarification, update, editor's note or retraction on a story, dated, with a link to the corrections policy; boxed on top or a line at the end.8 views · 8 downloadsElectionResultsOne race's results: candidates in party colours with votes and share bars, the share of the vote counted, the margin, and the winner once it is called.8 views · 8 downloadsExtractiveSummaryKeeps a text's best sentences, scored by word frequency and position, in their order, with a length slider and the chosen ones marked. No AI service.2 views · 6 downloadsFactCheckA fact-check: the claim and who said it, the rating large and on its scale from true to false, what was found, the sources, with ClaimReview markup.8 views · 12 downloadsGiftArticleGift this article: a panel with the gift articles left this month, a link anyone can read the story with, Copy and Email, and when more come once used up.9 views · 8 downloadsHeadlineAnalyzerScores headlines for length, word balance, numbers, power and weak words, shows where search and phones cut them, and compares variants side by side.4 views · 8 downloadsKeyPointsThe story in a few lines at the top of an article: points with links, marks or numbers, when they were updated, and the rest folded under Show more.8 views · 10 downloadsLiveBlogA live blog: timestamped updates with a pinned summary on top, key events that jump to their entry, key-events-only and oldest-first switches, and paging.8 views · 8 downloadsMatchScoreA game's score: both teams with crests or colours, the score and scorers, and where it stands: kick-off, live with the minute, half time, full time or postponed.10 views · 9 downloadsNewsQuizThe week's news quiz: a question at a time, each pick marked right or wrong with the story behind it, then the score with a mark per question and Play again.8 views · 8 downloadsPaywallMeterA metered paywall: a slim bar counting the free articles read, a warning on the last, then the gate with the offer, its price, benefits and sign-in.8 views · 8 downloadsSeatChartA parliament as a half circle of seats coloured by party, undeclared seats in grey, the majority marked, and a legend with seats won and lost.8 views · 7 downloadsSectionFrontA section's front: the lead story large with its picture and dek, the next stories beside it, and a column of more headlines; one column where narrow.9 views · 10 downloadsWeatherStripThe weather for a news page: the temperature now with the sky drawn, the high and low, the hours or days ahead with rain chances, and a °C/°F switch.9 views · 8 downloads
Travel 16
BaggageSelectorChecked bags for each passenger with counters, what the first, second and third bag cost, the cabin allowance, the total and the saving against the airport.9 views · 8 downloadsCarRentalCardA hire car offer: class and model or similar, seats, bags, gearbox and air conditioning, mileage and fuel policy, supplier rating, pick-up and the price a day and in all.10 views · 11 downloadsEntryRequirementsVisa and entry rules for a passport: visa-free, travel authorisation, eVisa or visa required, the stay allowed, passport validity, documents and health rules.9 views · 9 downloadsFareCalendarA month of the cheapest fare each day: prices coloured cheap to dear, the lowest day marked, months with fares to move between, and a day to pick.8 views · 8 downloadsFareOptionsFare families side by side, Basic to Flex: the price a person and over the cheapest, what each includes, costs extra or leaves out, and the total for everyone.8 views · 11 downloadsFlightResultA flight in search results: departure and arrival times, the time in the air, stops and layovers, cabin and bags, and the fare with Select.9 views · 9 downloadsFlightSearchA flight search form: return or one way, from and to with a swap button and airport suggestions, dates, travellers and cabin, checked before it searches.8 views · 7 downloadsFlightStatusA flight's status today: on time, delayed, boarding, in the air or cancelled, with the new times beside the old, gate changes and the baggage belt.9 views · 12 downloadsHotelCardA hotel in search results: photo, stars, the review score badge, location, amenities, cancellation terms and the price a night with the stay's total.9 views · 10 downloadsLayoverTimelineA journey's flights and the layovers between them, with times, terminals and flags for short connections, overnight waits and changes of terminal or airport.9 views · 10 downloadsPackingListWhat to pack, in groups: a checkbox for each thing with how many, a bar of how much is packed, things to add or take off, packed ones hidden and all unpacked again.7 views · 8 downloadsRoomPickerA hotel's rooms with their rates (non-refundable, free cancellation, breakfast) and a counter for each, rooms left, the stay's total, who it sleeps and Reserve.9 views · 9 downloadsSeatMapA plane's cabin to pick a seat for each passenger: aisles, window and aisle seats, taken seats, exit and extra legroom rows, a price per seat and the total.8 views · 7 downloadsTourCardA tour or activity: photo, badge and save heart, duration, stars and reviews, free cancellation and pickup, languages, the next start and the price from per person.8 views · 9 downloadsTripBudgetAdds up costs per person, night and day in several currencies from rates given as data: a total at home, a split to the cent, what is over budget, and a daily allowance.3 views · 5 downloadsTripItineraryA trip day by day: flights, trains, stays, activities and meals in order of time, with booking references, status, today's day marked and the trip counted up.9 views · 10 downloads
Blogging 19
AuthorBioThe box at the end of a post about its author: picture or initials, name and role, a short bio, links elsewhere, their post count and a follow link.8 views · 9 downloadsBlogrollThe blogs a writer recommends, in groups: name, a line about each, its latest post and how long ago, its feed, and the list as OPML.9 views · 8 downloadsClapButtonApplause 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.8 views · 9 downloadsFeedSubscribeFollow this blog: its RSS, Atom or JSON feeds with their addresses to copy, links into feed readers, what a feed is, and an email box.8 views · 7 downloadsKeywordExtractorFinds a text's top words and two-word phrases without each language's common words, warns of stuffing, and copies them as tags.2 views · 4 downloadsPostArchiveA blog's posts by year and month, newest first: each year a disclosure with its count, its months and their posts, or only the months as links.10 views · 8 downloadsPostHeaderThe top of a post: category, title and standfirst, the authors with their pictures, published and updated dates, reading time, tags and a cover.8 views · 6 downloadsPostStatsHow a post is doing, for its author: views, reads, read ratio and reading time against the period before, a bar a day, where readers came from.8 views · 6 downloadsPostUpdatesThe note that a post changed since it came out: Updated Oct 28, how many changes, and each one newest first, with corrections marked.8 views · 9 downloadsPublishPanelThe editor's panel that puts a post out: its status, who may read it, now or scheduled, its address, then Save draft and Publish or Schedule.8 views · 9 downloadsReadabilityMeterLive Flesch reading ease and grade, counts, reading time and the hardest sentences, and it says so when a text cannot be scored.2 views · 8 downloadsReaderSettingsA post's text the way each reader likes it: size, serif or sans, line length, line spacing and light or dark, kept for their next visit.9 views · 7 downloadsRelatedPostsRead next: other posts at the end of one, those sharing the most tags first, with picture, title, excerpt, date and the shared tags marked.8 views · 7 downloadsSeoAuditAudits a post's title, description, slug and HTML or Markdown body: lengths, headings, alt text, keyword placement and links, with a score and how to fix each failure.3 views · 6 downloadsSeoPreviewA post's title and description for search and sharing, with counts that say short, good or too long, and a live search result and link card.7 views · 8 downloadsSeriesNavWhere a post stands in a series: Part 2 of 5, a bar of the parts, the list of them all with this one marked, and the parts before and after.9 views · 7 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.7 views · 6 downloadsSidenoteNotes in the margin beside the line they belong to, numbered or not; on a narrow page they fold, and the number opens each under its line.8 views · 7 downloadsTextLintMarks passive voice, filler, repeated words, double spaces, long sentences and cliches as you type, each with its place and a one-click fix where there is one.4 views · 8 downloads
Marketing 18
AbTestCalcReads an A/B test from visitors and conversions: lift, z-test, p-value, interval and a plain verdict, refusing to call too small a sample.2 views · 7 downloadsAnnouncementBarA slim bar at the top with one message, a badge and a link, closed for good once dismissed.6 views · 5 downloadsBlogListPosts as cards in a grid or rows down the page: picture, tags, title, excerpt, author and date.8 views · 7 downloadsCtaSectionA call-to-action band: a title, a line and the buttons, filled, tinted or outlined, centred or split.7 views · 7 downloadsFaqQuestions that open to their answers on <details>, with a search box that keeps only the ones matching.6 views · 7 downloadsFaqFinderSearches questions and answers by term weighting, tolerant of typos and word endings, with synonyms as data, shows why each answer was found, and helps when none was.5 views · 9 downloadsFeatureGridA grid of a product's features, each an icon, a title and a sentence, from a list or written by hand (Feature).7 views · 4 downloadsFeatureListFeatures in alternating rows of words and a picture (or code), with ticked points and a link each.7 views · 6 downloadsFunnelAnalyzerStep counts to drop-off, conversion and the biggest leak, with a what-if on any step carried through to the end, and a warning when a step grows.2 views · 6 downloadsHeroA landing page's opening: eyebrow, headline, lead, buttons, and a picture or code on the side.6 views · 7 downloadsHowItWorksNumbered steps with icons, titles and text, in a row joined by a line, or down a column.6 views · 8 downloadsMailMergeFills a template with {{name}} and fallbacks from CSV or JSON rows: a preview for each row, the missing and unused variables, and the rows that would send an empty value.3 views · 8 downloadsSampleSizeCalcVisitors per variant and days to run for an A/B test, with the formula shown, refusing inputs that have no answer.3 views · 6 downloadsSocialLinksIcon links to accounts on X, GitHub, LinkedIn, YouTube, Mastodon, Bluesky and more, each named for screen readers.6 views · 4 downloadsStatsBandBig numbers with their labels across a tinted, filled, outlined or plain band, as a <dl>.6 views · 5 downloadsTeamGridThe team as a grid of people: picture or initials, name, role, a line about them and links.6 views · 8 downloadsTestimonialsQuotes from people with their picture, role and company, in a row that scrolls or a grid that wraps.9 views · 7 downloadsUtmBuilderBuilds a campaign link with consistent case, warns on spaces and mixed conventions, keeps the query and fragment, and remembers recent values.3 views · 8 downloads
Dashboard 22
AccessCheckerWorks out allow or deny from roles, grants and denies given as data, names the rule that decided, and shows a matrix of everything.3 views · 6 downloadsAlertRuleBuilderBacktests an alert rule on a sample series, drawing each firing and warning of a rule that flaps or never fires.3 views · 8 downloadsAnomalyFinderFlags outliers by median absolute deviation, gaps and level shifts in a time series, plots them, and says why each was flagged.3 views · 6 downloadsApiKeyFieldA secret shown masked in a read-only field, with Show and Copy buttons and a hidden input for forms.5 views · 6 downloadsAutoInsightsReads rows and says in plain sentences what stands out, ranked by strength, and says nothing rather than something weak.2 views · 5 downloadsCloudCostEstimatorPrices cloud resources through graduated tiers, compares reserved with on-demand, and says what drives the bill most.3 views · 8 downloadsCohortTableSignup and activity events to a retention triangle by week or month, heat-coloured, with a weighted average and unfinished periods left blank.2 views · 8 downloadsDangerZoneA red-bordered block of destructive actions (DangerAction), each a form, link or callback that asks before it acts.6 views · 8 downloadsDashboardGridWidgets on a twelve-column grid, each spanning columns and rows (DashboardCell), stacking on a phone.7 views · 10 downloadsDecisionMatrixRanks options on weighted criteria, cost counting against them, shows ties as ties, and says how far each weight must move to change the winner.3 views · 7 downloadsOnboardingChecklistSteps to finish setting up, with a progress bar, a tick on each done and a link to where the rest get done.7 views · 5 downloadsPermissionsMatrixRoles across, permissions down, a checkbox at each: a form sends the pairs ticked, a column box ticks a whole role.6 views · 6 downloadsQuickActionsA grid of big icon buttons for the common actions: links, submit buttons in a form, or on_select.6 views · 6 downloadsQuotaBarSeveral quotas in one list, each a bar with its numbers, amber near its limit and red at it.7 views · 6 downloadsRiskMatrixRisks on a 5 by 5 heat grid with keyboard placement: score, band, the mitigated position beside the inherent one, a sorted register, and a filter by cell.2 views · 8 downloadsServerStatusServices with up, degraded, down or maintenance, their uptime and the last days as bars, summed up in one line.6 views · 7 downloadsSessionListSigned-in devices with browser, system, place and time, this one marked, and Sign out for each or all the others.6 views · 5 downloadsSettingsSectionA titled block of settings rows, each a label and hint with its control at the right (SettingsRow).5 views · 7 downloadsSloCalculatorFrom a target and a window, works out allowed downtime, the error budget left, the burn rate, when it runs out, and burn alert thresholds.4 views · 7 downloadsTokenListAPI tokens with name, prefix, created, last used, scopes and expiry, and a Revoke that asks first.6 views · 8 downloadsUsageMeterUsed of allowed as a bar with the numbers, amber near the limit, red at it, and plain when there is no limit.6 views · 8 downloadsWidgetA dashboard panel: a title row with a menu slot, the body, and a footer line or link, as a named region.7 views · 7 downloads
Social 16
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.6 views · 7 downloadsCommentOne comment: avatar, name, role, time, text, Like and Reply, with its replies nested inside it.6 views · 9 downloadsCommentThreadNested comments with Like and Reply, a reply box that opens under the comment answered, and branches that fold.5 views · 6 downloadsHashtagA #tag that links to its page, with an optional count, and HashtagList, the trending tags ranked with their post counts.6 views · 8 downloadsMessageBubbleOne chat message, yours on the right or theirs on the left, with the time and sent, delivered, read or failed ticks.6 views · 9 downloadsPostCardA post in a feed: author, time, text, picture, like, comment and share counts, and the three buttons.5 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.6 views · 6 downloadsProfileHeaderThe top of a profile: cover, avatar, name, handle, bio, facts, counts and a Follow button that becomes Following.6 views · 5 downloadsRankedVoteCounts ranked ballots by instant runoff, round by round, showing each transfer and exhausted ballot, with a stated rule for breaking ties.2 views · 10 downloadsReactionsEmoji reaction chips with counts, yours marked, and an add button that opens a row of emoji to pick from.6 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.6 views · 6 downloadsStoryRingA row of avatars in rings, bright for stories not yet seen and grey once seen, with your own first to add one.6 views · 6 downloadsTeamBalancerSplits people into teams balanced by rating, with keep-together and keep-apart rules, shows each total and the spread, and says when the rules cannot be met.2 views · 5 downloadsTournamentBracketA single-elimination draw from seeds, with byes and correct pairing: clicking winners moves them on, and changing a result clears what rested on it.2 views · 4 downloadsTypingIndicator"Ana is typing…" with pulsing dots, naming one, two or more people, and nothing at all when nobody is.6 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.6 views · 5 downloads
Scheduling 23
AgendaListEvents grouped by day with the date at the left, each with its time, title and place; today and tomorrow named.6 views · 6 downloadsAvailabilityGridDays across and hours down: click or drag across the cells to mark when you are available; the slots go in a hidden input.7 views · 8 downloadsBookingSummaryWhat was booked: the place and picture, dates in and out with the nights counted, guests, price lines, total and status.6 views · 7 downloadsBusinessDaysCalcCounts the working days between two dates, or finds a date N working days away, with your own weekends and holidays, listing each day it skipped.4 views · 8 downloadsCriticalPathRuns the forward and backward passes over tasks and dependencies: slack, the critical path and real dates with weekends off, naming cycles and missing tasks.3 views · 6 downloadsDayViewOne day as a column of hours with its events drawn at their times, side by side when they overlap, and all-day events above.7 views · 7 downloadsEventCardAn event as a card: a date block, title, time, place, a line about it, an optional picture and badge, and a button.7 views · 6 downloadsHabitTrackerA grid of days per habit that works out streaks, completion and grace days, on chosen weekdays only, and tells streaks apart across a missed day.3 views · 7 downloadsOpeningHoursA week's opening hours with today marked and whether it is open now, closing soon, or when it opens next.6 views · 6 downloadsRelativeTime"3 minutes ago" or "in 2 hours" from an ISO time, kept up to date in the browser, with the full date on hover.6 views · 5 downloadsRoundRobinFair fixtures by the circle method, with home and away balanced, a bye for an odd number and double rounds, and standings with stated tiebreaks from scores entered.3 views · 6 downloadsShiftPlannerPeople by shifts across a week: checks rest, hours, skills and coverage, marks each breach with its reason, and auto-fills fairly, saying what it could not fill.3 views · 6 downloadsSlotFinderFinds common free slots from several people's busy lists, in working hours in a chosen time zone, ranking the closest by who is affected when none suits all.3 views · 6 downloadsSpacedRepetitionFlashcards scheduled by SM-2: grade each answer, see the next due date, keep ease and interval as data, with today's queue under new and review limits.3 views · 6 downloadsSprintPlannerWorks out team capacity from days off, fits the backlog by priority keeping dependencies, says why the rest did not fit, and tracks capacity as items move by hand.3 views · 7 downloadsStopwatchA stopwatch to the hundredth: Start, Lap, Stop and Reset, with the laps listed and the fastest and slowest marked.7 views · 5 downloadsTimerA countdown set in minutes with Start, Pause and Reset, a ring that empties, presets, and a silent alert at zero.7 views · 8 downloadsTimesheetGridA week by projects: type 7.5, 7:30 or 22:00-06:00 and it rounds to the quarter, takes off breaks, totals the days and splits out overtime by rule.3 views · 5 downloadsTimezoneOverlapCities in rows across a day with working hours marked: finds the overlap, lets you drag a meeting across it, and says what that hour means in each city, right on a clock-change day.3 views · 5 downloadsWeekViewA week of hour columns with events drawn at their times, side by side when they overlap, and all-day events across the top.5 views · 6 downloadsWorkloadViewPeople by weeks with their assignments: marks who is over or under allocated, and suggests which assignment to move to whom, keeping skills.2 views · 7 downloadsWorldClockThe time now in several cities, ticking, with the day there and how far ahead or behind the first one each is.7 views · 7 downloadsYearCalendarA year as twelve small months, with dates and runs of dates marked in colours, today ringed, and a key.7 views · 4 downloads
Mobile 200
ActionSheetA list of actions rising from the bottom, with a destructive style and Cancel: swipe down or the phone's back gesture closes it; on a tablet, a card by what opened it.3 views · 9 downloadsActivityRingsProgress rings inside each other that go round again past 100%, drawn once, with a legend and a sentence each for screen readers.3 views · 7 downloadsAdaptiveDialogA sheet on a phone and a centred dialog on a tablet or desktop: the same content, chosen by width, changing live on rotation.3 views · 5 downloadsAlertInboxAlerts by severity, swiped to acknowledge or snooze, with buttons and keys to the same, and a badge that stays right as snoozes run out.3 views · 8 downloadsAlphaRailListA long list with sticky letter headers and an A to Z rail scrubbed by finger, with a bubble showing the letter and a haptic per step.1 view · 6 downloadsAmountPadBig amount entry for money: digits fill from the right, currency rules for decimals, limits, a shake on a refused key.2 views · 6 downloadsAnchoredPopoverA popover with an arrow tied to its button on a tablet and a sheet on a phone, re-anchored on rotation and when a keyboard opens.3 views · 5 downloadsAppTabBarBottom tabs for a phone app: badges, safe-area padding, a second press scrolls to the top, each tab keeps its place, gone while the keyboard is up; a rail on a tablet.3 views · 8 downloadsApprovalQueueOne request at a time, swiped to approve or reject, with a required reason, undo and a count of what is left.3 views · 6 downloadsAssetLookupScan or type an asset tag to see its record, history and what to do, with near matches and a report for a tag nobody knows.3 views · 7 downloadsBalanceCardBalances that hide with a tap and show for a hold, swiped between accounts, in decimals, with when they were read.3 views · 6 downloadsBatteryBadgeShows the battery's level and low-power state from the app or the web, and asks the page to go easy when it is low.2 views · 7 downloadsBillRemindersUpcoming bills in order, marked when close, to pay or snooze, with the ends of months handled.3 views · 6 downloadsBoardingPassCardA boarding pass with its code ready at full brightness, the gate and time large, a countdown, and offline working.3 views · 8 downloadsBookSpreadReader pages, one column upright and a two-page spread turned, by swipe or edge tap, the place kept by text and not page number.2 views · 7 downloadsBottomAppBarA bottom bar with actions and a notched floating button, hiding on scroll and standing clear of the safe area; a floating toolbar on a tablet.3 views · 6 downloadsBottomSheetA sheet with peek, half and full stops, dragged by finger: it resists past its ends, snaps by speed, shares the finger with the list inside and rises above the keyboard.4 views · 7 downloadsCalendarSheetA month on a sheet that folds to a week by drag, with the day's agenda under it.3 views · 4 downloadsCardStackCards in a fan: a tap lifts one, a switch freezes it, and its details are hidden, shown and copied a field at a time.2 views · 9 downloadsCartSheetA cart in a sheet with quantities, swipe to remove with undo, live totals in decimals, a free-shipping note and a checkout button.2 views · 9 downloadsChatScreenMessages grouped by sender and day, keeping your place while older ones load, at the bottom as new ones come, and clear of the keyboard.3 views · 7 downloadsCheckoutSheetA one-screen checkout in a sheet with address, delivery, payment and a live total, every part validated, and a slide to pay.3 views · 6 downloadsCoachOverlayA one-time spotlight of a real element, tracking it through scroll and rotation, advancing by tap, always skippable.2 views · 7 downloadsCommentSheetComments in a sheet: threads, a reply bar above the keyboard, sort, and a count that stays right. A column at the side on a tablet.2 views · 8 downloadsCompassDialA dial from the device's orientation with calibration advice, smoothed across north, and the permission iOS requires.2 views · 8 downloadsComposerBarA message box that grows to a limit, swaps send and voice, keeps attachments in a tray, rides above the keyboard and is safe to paste into.3 views · 9 downloadsConfirmWithPinA step-up before something risky: what is about to happen, a PIN pad, tries counted, and a clock.1 view · 5 downloadsConflictSheetThis device's version against the server's, chosen field by field, explained in plain words.2 views · 6 downloadsContactListPeople grouped by letter with avatars from initials, fast search across names and numbers, a call and message action per row.3 views · 8 downloadsContextPreviewA long press lifts a card with the page blurred behind it, showing a preview and actions: slide to one and let go, or let go to close.3 views · 6 downloadsConversationListChats with unread counts, a muted state, pinned at the top, typing indicator, swipe to archive, and relative times from a prop.3 views · 6 downloadsDataSaverToggleA setting to keep lighter images and off autoplay, following the phone's save-data, with what it changes.4 views · 6 downloadsDateWheelsMonth, day and year wheels that keep each other valid, with limits, and a value in ISO.2 views · 6 downloadsDefectReportSeverity, a location by a tap on the drawing with its grid square and room, photos, and a clear summary to send.4 views · 6 downloadsDevicePreviewA phone or tablet frame sized by model for showing a component, rotation, safe areas drawn, dark or light.3 views · 5 downloadsDocumentCapturePhotographs pages one by one, with reorder, drop, and a crop by four corners by finger that flattens the page, kept as a list of images.4 views · 7 downloadsDoubleTapLikeDouble tap a photo card to like it, a heart bursting at the finger, with a plain Like button as the equal.3 views · 5 downloadsDownloadsListItems with size, progress, pause and retry, the storage used, and a Wi-Fi only setting that holds to the network.3 views · 5 downloadsDraftKeeperKeeps what was typed on this device through a reload and a crash, offers it back, and clears on send.2 views · 8 downloadsDragBetweenPanesDrag an item from one pane to another by finger or pen, with a drop preview, a keyboard route and on_move.3 views · 5 downloadsDragReorderPut a list in order by long press and drag, scrolling at its edges, and by keys or buttons too.2 views · 7 downloadsEdgeDrawerA navigation drawer pulled from the screen's edge: follows the finger, snaps by speed, holds the focus, closes on Back; stands beside the content on a tablet.4 views · 7 downloadsEmptyScreenEmpty states for first use, none-found and all-done, each with what to do next.3 views · 9 downloadsErrorScreenA full screen for failure with the reason, retry, and offline told apart from server trouble.3 views · 9 downloadsExpandingRowA row that opens in place with content pushed down smoothly, keeps only one open if asked, and scrolls itself into view.4 views · 7 downloadsFilterChipsBarA sideways scroller of filter chips staying under the header, the active chip kept in view, a count of results, and clear.2 views · 6 downloadsFilterSheetFacets in a sheet, with result counts updating live, clear, apply, the count on the button, and a state kept for next time.3 views · 6 downloadsFocusTimerSessions with a keep-awake, a streak, time that survives the background, and an end alert.3 views · 9 downloadsFolderBrowserFolders with breadcrumbs, a Back, and move and rename in sheets.3 views · 7 downloadsForceUpdateCompares versions as numbers, shows a soft or a hard update screen, and the store's link by platform.3 views · 7 downloadsFullscreenPickerA full-screen list to pick from, with search and a header with Done, that stays clear of the on-screen keyboard; on a tablet, a card.2 views · 6 downloadsGalleryPickerPicks several photos through the system's picker, with thumbnails, an order, caps by count and size, HEIC refused with a reason, and previews freed after.2 views · 5 downloadsGeofenceStatusInside or outside of areas given as data, by real distance, with a band at each edge so that it does not flap, and poor fixes held.3 views · 5 downloadsGestureTutorialTeaches a gesture with a looping hand over the real thing, checks it was done there, then does not come back.4 views · 8 downloadsGroupedListiOS-style inset grouped rows with headers, footers and disclosure chevrons, full-row tap targets, and dark mode.2 views · 7 downloadsHandwrittenNoteRuled pages for a pen: a finger scrolls and swipes, the pen writes, and each page exports.4 views · 7 downloadsHapticButtonA button with the phone's own feel, falling back to vibrate and then to nothing, with nine named patterns.2 views · 7 downloadsHoverCursorRowRows with the iPad pointer's lift on a trackpad or mouse, none on touch, and right-click menus.3 views · 6 downloadsInAppBannerA notification-style banner sliding from the top: tap to open, swipe up to dismiss, a queue for several, held while touched.4 views · 5 downloadsInfiniteFeedA long feed that loads pages as you near the end: loading, retry on failure, end of list, keeps its place on return, and stays light by windowing.3 views · 5 downloadsInspectionFormA checklist of pass, fail and N/A with big targets, a note and stamped photo needed on a fail, a score, and a draft kept.2 views · 5 downloadsInspectorPanelA right-hand panel of properties for the selected thing, in sections, live both ways, and a sheet on a phone.3 views · 5 downloadsKeepAwakeToggleHolds the screen on with the app or the Wake Lock, takes it again on coming back, and says when it was refused.2 views · 5 downloadsKeyboardAvoiderKeeps a focused field in view above the on-screen keyboard by visualViewport, on both systems, handing back on close.2 views · 6 downloadsKeyboardBarA bar that sits on top of the on-screen keyboard by visualViewport, with previous, next and done, moved with the keyboard on both systems.3 views · 8 downloadsKeyboardHudHold a modifier on an attached keyboard to see the screen's shortcuts, found from data, conflicts reported, focus left alone.3 views · 7 downloadsKioskScreenA locked-down screen for a shared tablet: full screen, back to the start when idle, a hidden staff exit with a PIN.3 views · 6 downloadsLargeTitleBarAn iOS large title that shrinks into the bar as content scrolls, with back and action slots, tied to the scroller without jank.3 views · 6 downloadsLiveLocationFollows a position over time with a smoothed path, distance, speed and accuracy, and stops on leaving the screen.2 views · 5 downloadsLocationButtonAsks for a place from the phone or the web, shows how close it is, and handles asking, refused, off and timed out, with a way to Settings.2 views · 8 downloadsLongPressMenuA long press opens a menu at the finger, with a haptic, no text selected and no browser callout.4 views · 5 downloadsMapSheetA list in a sheet over a Leaflet map, each synced to the other, pins and rows, with the sheet dragged down to see more of the map; on a tablet, a list beside it.4 views · 6 downloadsMarkupOverlayAnnotate an image or a page with pen, highlighter, text and arrows, with undo, kept as data apart from it.4 views · 5 downloadsMentionTrayTyping @ opens a tray of people above the keyboard, fuzzy-ranked and placed at the cursor, and the name goes in as one thing.3 views · 6 downloadsMeterReadingA round of meter readings on a big keypad, each checked against the last value and a sane range, with a photo on anything odd.4 views · 6 downloadsMiniPlayerA bar above the tabs with progress and play, expanding to the full player by a swipe up.2 views · 6 downloadsNavRailA Material navigation rail for medium widths, with a menu, a floating action and badges, turning into a bottom bar on a phone.2 views · 7 downloadsNavStackA stack of screens pushed and popped with a slide, each keeping its state and scroll, with a real Back through the browser's history; a column beside the rest on a tablet.2 views · 6 downloadsNearbyListPlaces by real distance from a position, in km or miles, with walking time, sorted live as the position moves, and open now from their hours.2 views · 6 downloadsNetworkStatusConnection type, offline and save-data, with a reading of whether the link is slow, updated live, and a stated limit where the phone does not say.3 views · 5 downloadsNoteEditorA note with a toolbar on the keyboard, autosave, checklists and Markdown shortcuts.2 views · 8 downloadsNotifyPromptExplains why, then asks for notifications, handles refused and never-asked, and shows a way to Settings.3 views · 5 downloadsNowPlayingA full player with art, scrub, queue, speed and a sleep timer, tied to the media session.2 views · 5 downloadsNumberPadAn on-screen number pad with a decimal and delete, a hold to delete fast and a haptic, for where the system keyboard is wrong.5 views · 8 downloadsOfflineQueueHolds actions made offline, shows them as pending, sends them in order on return, with failure and retry for each.5 views · 9 downloadsOneTimeCodeA code field using the system's autofill, pasted whole, in separate boxes with correct deletion, an auto-submit and a resend countdown.2 views · 7 downloadsOrderStatusCardThe stages of an order with a progress bar, an estimate from data, and what to do when it is late.3 views · 6 downloadsPageDotsPage dots that follow a swipe or a scroller, shrinking the distant ones when there are many, and told to screen readers.3 views · 6 downloadsPayCodeA QR or code to pay with, refreshing on a timer, screen brightness up while shown, locked until confirmed.2 views · 7 downloadsPaywallSheetPlans with a recommended one, the price per month and per year worked out, restore, terms and honest trial wording.3 views · 8 downloadsPeekSheetA sheet that stays over a map or page and grows with a drag, with what is behind it still in use; on a tablet, a card down the side.3 views · 8 downloadsPendingUploadsA queue of files with progress, pause, retry and a wifi-only rule, surviving a reload as far as a browser can.3 views · 5 downloadsPermissionChecklistCamera, location, notifications and the like, each with its reason, a live state, and a route to Settings.3 views · 5 downloadsPhoneShellThe whole app frame: header, scroller, tab bar, safe areas and keyboard handled once, for one fixed-height screen that does not bounce.2 views · 7 downloadsPhoneSignInSign in with a phone number: country, formatting, a code with autofill, resend, and every failure a person can reach.3 views · 6 downloadsPhotoCaptureTakes a photo through the phone's camera, with preview and retake, made smaller on the phone and upright by its EXIF, as a real file in a form.3 views · 5 downloadsPhotoEditorRotates, crops with handles, changes the light and straightens by finger in a canvas, with undo, and gives back the image as a file.3 views · 8 downloadsPhotoEvidencePhotos stamped with the time and place into the picture, with counts of what is still needed, tags, and a queue for when there is no connection.2 views · 5 downloadsPhotoGridSelectA tight square grid of photos with a run of the finger to pick many, a count, and month headers.2 views · 5 downloadsPickListLines in walking order, confirmed by a scan or a tap, shorts recorded with a reason, progress, and big targets for gloves.4 views · 8 downloadsPinDropperA fixed centre pin with the map moving under it: gives the coordinates and calls on_pick, with arrow keys and buttons as equals of the drag.3 views · 6 downloadsPinPadA passcode keypad with dots, a shake on a wrong entry, a lock-out with a countdown, the code never kept in the page's text.3 views · 6 downloadsPinchZoomImagePinch and double tap to zoom an image, pan to its edges, with a rubber band at the limits and zoom buttons as well.2 views · 7 downloadsPodcastQueueEpisodes reordered by a grip, with played state, resume position, downloads and the time remaining.1 view · 7 downloadsPosRegisterA tablet till: a product grid, ticket, quantity and discount, cash and card, in decimals, keeping the sale through a reload.2 views · 9 downloadsProfileScreenA cover collapsing as you scroll, with stats and sticky tabs over one shared scroller. Two columns on a tablet.2 views · 6 downloadsProfileSetupA few steps after sign-up with a skip: keeps progress, a photo, a name, and ends with what was left undone.2 views · 7 downloadsProofOfDeliveryWho took it, a signature, a photo and the place in one flow, each required by a rule, ending in a receipt.2 views · 4 downloadsPullDownMenuA menu pulled out of a header by a finger, chosen by sliding to an item and letting go, or by its button; on a tablet, a small menu at the end of the header.5 views · 6 downloadsPullToRefreshPull a list down from its top to refresh, with resistance, a spinner, and success and failure states.3 views · 9 downloadsQrPayCardA code to be paid, with the amount, a timer, a way to share it, and what became of it.2 views · 6 downloadsQrScannerScans a QR code with the camera by BarcodeDetector where present, with a viewfinder, a torch and entry by hand where not.3 views · 8 downloadsQuickAddBarType a line and it finds the date, list and priority in the words, marked as you go.3 views · 7 downloadsQuickSettingsGridSettings as big tiles: tap to turn, long press for details, kept as data, and a way to put them in another order.3 views · 6 downloadsQuickTransferRecent people in a row, a keypad amount checked against every limit, and a slide to send.3 views · 8 downloadsRatePromptAsks for a rating only after real use, with limits on how often, and a route to send a problem instead.2 views · 6 downloadsReactionBarA long press raises a bar of reactions to slide along and pick from, one for each person, with counts, and a route for keys.2 views · 7 downloadsReceiptShareA receipt drawn as a picture for the share sheet, the numbers the same as on screen, falling back to text.2 views · 5 downloadsReminderPickerToday, tomorrow, next week or custom, repeating, with a plain sentence of what was set.2 views · 7 downloadsResponsiveSplitMaster and detail as one stack on a phone and side by side on a tablet, changing live on rotation and keeping the selection.2 views · 6 downloadsResumeRefreshRefreshes data on coming back after a time, skipped if recent, keeps the place, and shows a small notice.3 views · 5 downloadsRetryBannerFailed loads with a back-off shown as a countdown, a Try now, cleared on success.3 views · 6 downloadsRotationLayoutTwo arrangements of one set of children, upright and turned: no flash, and focus and scroll kept across the turn.3 views · 6 downloadsRouteStepsTurn-by-turn steps with the current one large, progress, distance left and an ETA from data, moved along by a position, a swipe, buttons or keys.2 views · 7 downloadsSafeAreaPads content for notches and home bars by env(), per side, with a view of the insets under a debug prop.4 views · 7 downloadsScanCountCount stock by scanning: expected against counted, overs and unders, undo, works with no connection, by camera, photo, keyboard or a device's own scanner.3 views · 8 downloadsScanToAddScan a product's code to add it to a list, by the camera, a photo or typing, with a beep, a haptic and a count of repeats.3 views · 7 downloadsScrubBarA seek bar with a large touch area, fine scrubbing by moving a finger away from it, and a time bubble.4 views · 7 downloadsSearchHeaderA header whose search field opens in place with Cancel, recent searches and your results; the keyboard stays up through them; a dropdown panel on a tablet.3 views · 5 downloadsSeatPickerSheetPick seats in a sheet by zoom and tap, with fares, who sits beside you, seats found together and accessible seats.3 views · 5 downloadsSelectionModeLong press starts selecting, tap adds, a toolbar shows the count and actions, and back leaves the mode.4 views · 7 downloadsSendMoneyFlowPayee, amount, note and a last look, keeping what was typed on back, with every limit stated and a receipt.2 views · 6 downloadsSettingsListRows of toggles, values and links from data, with a search across them, and on_change(key, value).3 views · 6 downloadsShakeDetectorDetects a shake from motion with a threshold, the iOS permission and a debounce, with a button as its equal.4 views · 7 downloadsSheetSelectA select that opens as a bottom sheet, with search past a size, multi-select with Done, and a real field in a form.2 views · 9 downloadsShiftClockPunch in and out with a check of the place, breaks and today's hours, safe from double taps and with no connection.3 views · 9 downloadsShortVideoFeedVertical swipes of clips: one plays at a time, the next loads ahead, sound behaves, and a refused autoplay shows a button.4 views · 4 downloadsSizeClassViewTells compact, medium and expanded widths by its own box, so Split View, Slide Over and a turn are one case, and swaps slots without losing what is in them.1 view · 5 downloadsSleepChartStages through a night as a chart read by finger, with totals, right across midnight and a change of the clocks.4 views · 8 downloadsSleepTimerSheetStops playing after a set time, with a fade at the end and an extend while it runs.3 views · 9 downloadsSlideOverA floating panel that slides over from either edge and stays while the page behind stays usable, moved between edges by drag.4 views · 7 downloadsSlideToConfirmDrag a thumb across to confirm something serious, with keys, and a hold for screen readers.2 views · 5 downloadsSnapCarouselProduct pictures snapped by CSS with dots and a count, a tap opening a viewer to zoom, keeping its place, working without script.3 views · 6 downloadsSpendingRingSpending by category as a ring with a tap for each, and the month so far against last month.3 views · 7 downloadsSpiritLevelA bubble level from the device's motion, with a zero, a haptic when level, and a message where there is no sensor.4 views · 7 downloadsSplashScreenHolds the app's mark until ready, without a white flash, in both themes, and yields quickly.3 views · 6 downloadsSplitViewTwo or three panes with a divider to drag, which give way by width, with the selection kept across a turn and a keyboard route for the divider.3 views · 8 downloadsStackedModalModals over modals with the page behind scaled back as cards, dragged down one at a time; on a tablet, cards in the middle of the screen.4 views · 5 downloadsStatusTintSets theme-color for the browser's bar by the page and theme, restored on leaving.3 views · 6 downloadsStepperRowMinus and plus in a row, a hold to repeat and accelerate, typed values, limits, min and max stated to screen readers.3 views · 7 downloadsStickyBuyBarPrice and Buy stuck above the safe area once the page's button scrolls away, hiding near the on-screen keyboard.3 views · 5 downloadsStickySectionFeedSections whose header sticks and is replaced by the next as you scroll, with a date-style floating label, and jump to today.3 views · 5 downloadsStorageMeterSpace used by the app from navigator.storage, by kind, and a clear with a confirm.3 views · 6 downloadsStoryCaptureA stories camera: hold to record, tap for a photo, with a progress ring, a switch of camera, and a screen for a refused permission.2 views · 6 downloadsStoryViewerStories with segmented progress: hold to pause, tap to go on or back, swipe down to leave, with the next ones fetched ahead.3 views · 7 downloadsStylusCanvasDraw with a pen by pressure and tilt, palm rejected, with undo, eraser, zoom, and an image or strokes out.3 views · 4 downloadsSwipeBackPull a screen away from the left edge to go back, with the previous one peeking behind; a Back button for everyone else.3 views · 7 downloadsSwipeDeckA stack of cards flung left or right with a turn of the wrist, undo, and buttons that do the same.3 views · 9 downloadsSwipeDismissListSwipe rows away, the rest closing up, with undo in batches that come back in order.3 views · 5 downloadsSwipeKanbanColumns swiped by page, cards moved to a neighbour by drag near the edge, or from a menu.2 views · 5 downloadsSwipeReplyDrag a message sideways to quote it in the reply, with a tap felt at the threshold, and a menu that does the same.3 views · 6 downloadsSwipeRowA list row with actions behind it each way, a full swipe to run one, and a More button and keys to the same actions.2 views · 9 downloadsSwipeTabsPages swiped sideways in step with their tab strip, the line under the tabs tracking the finger, pages built when reached; tapping and keys do the same.3 views · 7 downloadsSwipeToastA toast sent away by a sideways swipe, with Undo, stacked and timed, standing above the tab bar and the on-screen keyboard.3 views · 6 downloadsSwipeViewerPhotos swiped sideways, pulled down to close and zoomed, the next ones loaded ahead and the place kept.3 views · 7 downloadsSyncStatusBarSaved, syncing, offline or failed, with last-synced as relative time from a prop, and a retry.4 views · 6 downloadsSyncedLyricsLines lit by time, a tap to seek, and the lit line kept centred without jumps.4 views · 7 downloadsTableFloorPlanRestaurant tables on a floor plan with status, moved in an edit mode, tapped to open a check, scaled to fit either way up.2 views · 5 downloadsTabletSidebarA sidebar that folds to icons, then to an overlay, by width class, with sections, badges and a pin kept per device.2 views · 3 downloadsTabletToolbarA top toolbar whose groups overflow into a menu as width shrinks, customisable, with popovers anchored to their buttons.3 views · 7 downloadsTaskRowA task with a round check, swipes for its due day and delete, subtasks, and a smooth move when finished.3 views · 7 downloadsTextSizeSettingA text-size slider with a preview and the page following, respecting the system.2 views · 5 downloadsThemeSheetLight, dark, system and accent in a sheet, with a live preview, kept, and no flash next time.2 views · 8 downloadsThreeColumnViewMail's sidebar, list and detail: columns hide in order as width shrinks, a Back appears when they do, and the open item survives every change.4 views · 6 downloadsTicketWalletTickets stacked by date with past ones kept apart, each code at full size and full brightness, and ready with no network.3 views · 5 downloadsTimeWheelsHour, minute and AM/PM wheels with steps, a 24-hour mode by locale, and limits across midnight.3 views · 10 downloadsTopAppBarA Material top bar that hides as content scrolls down, returns on the way up, and takes a tint once content passes under it.3 views · 7 downloadsTorchToggleTurns the camera's light on through a track's constraints where the phone allows, says so where it does not, and turns off on leaving.2 views · 8 downloadsTouchChartA line chart read by finger with a crosshair and value, pinched to a range, with buttons, keys and a table to the same places.3 views · 7 downloadsTransactionFeedMoney in and out, grouped by day, pending first, searchable, a category on each row, and the details in a sheet.2 views · 6 downloadsTransitBoardDepartures from a stop as a live list from data: minutes away, delays, platforms, cancelled services, and a warning when the data has gone stale.2 views · 7 downloadsTripTimelineThe legs of a trip through time zones, each in local time, with the next one highlighted, waits between legs, and when clocks and days change.2 views · 6 downloadsUnreadMarkerA new-messages line that stays in place, a jump button with a count, and messages marked read as they are seen.2 views · 6 downloadsUpdatePromptNotices a new version of the program, offers a reload at a good moment, without losing input.2 views · 7 downloadsVariantSheetPick size and colour in a sheet, with stock by combination and each unavailable option marked with its reason.3 views · 6 downloadsVideoCaptureRecords a short clip through the camera with a limit and a timer ring, shows it before it is accepted, and falls back to the system's camera where recording is refused.2 views · 5 downloadsVoiceMessageA voice message with its waveform to scrub, speed, whether it was heard, and only one playing at a time.1 view · 7 downloadsVoiceNoteListRecordings with titles, duration, a scrub bar for the finger, and a place for the transcript.3 views · 7 downloadsVoiceRecorderRecords from the microphone with a live level, pause, playback and a limit, says so when refused, and leaves a real file in a form.3 views · 5 downloadsWalletCardA stack of cards pulled apart by tap, with the chosen card lifted, and its number hidden until asked.2 views · 7 downloadsWaterTrackerTap a glass to add what was drunk, with undo, a goal and a day that starts empty at the phone's own midnight.2 views · 7 downloadsWaveformViewDraws an audio file's waveform on the phone, with scrubbing by finger, a current-time line, and a reduced-motion form.4 views · 8 downloadsWeekStripDays in a swiped strip with dots for what is on them, today, and a jump to any day.2 views · 8 downloadsWeightTrendA smoothed trend over noisy weigh-ins, in kg or lb, with a goal line, read by finger, and holes left as holes.4 views · 5 downloadsWelcomeCarouselFirst-run pages swiped by finger with dots, Skip, Get started on the last page, shown once.3 views · 6 downloadsWhatsNewSheetNew features since the version a person last saw, from a list, shown once per version.3 views · 6 downloadsWheelPickerA drum wheel of options scrolled by finger, with the system's momentum, snapping on a row, and a real select underneath.2 views · 5 downloadsWidgetGridA home screen of tiles of different sizes, rearranged by long press, with a keyboard and button route, and kept as a list of data.3 views · 7 downloadsWorkOrderCardA job with status, priority, parts and steps, moved along with big buttons for gloves, that cannot be finished with required steps left.3 views · 6 downloadsWorkoutTimerIntervals of work and rest with a large countdown, felt as well as seen, the screen kept on, and time that stays right when the screen sleeps.3 views · 7 downloads
Utilities 19
AdaptiveQuizA quiz whose next question depends on the last answer, with an estimated level and confidence, an explanation for each answer, and no repeats.2 views · 5 downloadsConfettiA burst of confetti over the page on a canvas, fired by a button, on mount, or by confetti_fire().6 views · 10 downloadsDraggableA box dragged anywhere in its container with the pointer or the arrow keys, kept inside it, with on_move(x, y).8 views · 8 downloadsGradeCalculatorWorks out a weighted current grade from the marks so far, and the mark needed on what is left to reach each target, or that it is out of reach.2 views · 7 downloadsHttpRequestBuilderBuilds an HTTP request as curl, fetch and HTTPie with correct shell escaping, warns on a body on GET and a missing content type, and hides secrets until asked.3 views · 6 downloadsIdleTimerCalls on_idle() after a time without mouse, key, touch or scroll, with a warning dialog and a Stay button first.6 views · 8 downloadsInfiniteScrollCalls on_more() when the end of its list scrolls into view, with Loading more… and That's all states and a Load more button.6 views · 10 downloadsJsonFormatterFormats, minifies and sorts JSON, keeps numbers exactly, names the line and column of an error, and repairs trailing commas and single quotes.3 views · 5 downloadsJwtInspectorDecodes a JSON Web Token locally, reads its dates relative to now, warns on alg none and a missing exp, and says the signature was not verified.3 views · 7 downloadsKeyboardShortcutsBinds key combinations such as ⌘S or ? to functions on the page, leaving text boxes alone, and lists them.6 views · 8 downloadsLazyLoadPuts its content on the page only once it is scrolled near, holding its height until then.6 views · 7 downloadsLiveAnnouncerA hidden aria-live region the page writes messages to with live_announcer_say(), politely or at once.6 views · 6 downloadsOfflineBannerA banner across the top of the page for as long as the browser is offline, gone by itself when the connection is back.5 views · 5 downloadsReadingTime"4 min read", worked out from a text or a word count, with the wording and the reading speed yours to set.6 views · 8 downloadsRecipeScalerScales a recipe to any number of servings: reads fractions and ranges, moves to the next unit, and rounds to what a kitchen can measure, in metric or US.2 views · 8 downloadsScrollProgressA thin bar along the top of the window, or of a scrolling box, that fills as it is scrolled.7 views · 8 downloadsTranslationCheckerSource and translated strings side by side: missing, unchanged and overlong strings, mismatched placeholders, HTML tags and spaces, and each language's completeness.2 views · 7 downloadsUnitConverterConverts length, mass, volume, area, speed, temperature, data and time with exact decimal factors, either way as you type, and shows the formula.3 views · 6 downloadsUrlInspectorSplits a URL into parts with a query table to edit, encodes on rebuild, flags tracking and double encoding, and shows punycode.3 views · 5 downloads
Use the whole kit
$ curl -O https://quillolang.org/components/quillo-ui.qwemain.qwe
use quillo-ui.qweroute GET / = <html> <head><style>{ui_css}</style></head> <body class="ui-root"> <Button href="/start">Get started</Button> <SiteFooter/> </body> </html>Or only what you use
Each component is its own file, and every one needs theme.qwe: put theme_css in the page's style, and each component brings its own CSS to the pages that show it. A few need another file, which their page names. import and use paths count from the folder of the program's main file, and a component's file takes the others it needs itself.
$ mkdir -p ui && cd ui$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/modal.qwemain.qwe
import ui/theme.qwe use theme_cssimport ui/modal.qwe use Modalroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>With git
$ git submodule add https://github.com/quillolang/components vendor/quillo-ui$ git submodule update --remote vendor/quillo-ui # later, for the newestmain.qwe
use vendor/quillo-ui/quillo-ui.qweMake it yours
Every colour, font and radius is a CSS variable from theme.qwe. Set them again after the kit's styles; class="ui-dark" or class="ui-light" on any element fixes the theme inside it.
style.css
:root { --ui-accent: #0a7d55; --ui-radius: 4px; --ui-font: "IBM Plex Sans", sans-serif; }Size and speed
What a program pays for the components it holds, whether or not a page shows them. The kit's scripts/bench.mjs loads its components into one program, then the kit several times over, renamed, as a stand-in for a large app:
| Components in one program | quillo check | Start-up | Memory, running | A page |
|---|---|---|---|---|
| 0 | 0.01 s | 0.01 s | 13 MB | 0.3 ms |
| 100 | 0.07 s | 0.14 s | 70 MB | 0.2 ms |
| 250 | 0.16 s | 0.32 s | 118 MB | 0.2 ms |
| 744 | 0.42 s | 1.09 s | 372 MB | 0.2 ms |
| 2,976 | 1.89 s | 6.58 s | 1443 MB | 0.2 ms |
quillo 0.6.0 (378e64b, 2026-11-01), Apple M5, 16 GB, darwin arm64, 2026-11-01.
- Visitors pay only for what a page shows. A page carries the components it shows and their styles, whatever the program holds.
- The server holds what the program declares. Start-up and memory grow in a straight line, about 1 ms and 0.3 MB a component, once per process (each
--watchreload,--instancescopy and service copy is one). Pages stay fast at any size. - The leanest app takes the files it uses.
quillo-ui.qweis the whole kit in oneuse; picking files keeps a process to what the app shows. Each component's page gives the commands, with the files it needs.