Monsoon v0.2.0
Made by Alexandre Kohler Star

Components

Components

167 components in 7 groups, built with native HTML and no JavaScript. Every one follows --seed, light and dark mode, and can be adjusted with utilities.

Forms 26

InputText, email, password, number, search, url and tel inputs with sizes, tones, ghost and filled variants.13 classes
Date and timeThe .input class styles date, time and datetime pickers, with a picker icon that follows the theme.1 classes
TextareaMulti line text with the same sizes and tones as inputs, plus an autosize variant that grows with its content.14 classes
SelectA styled native select with a theme aware chevron, sizes, tones and variants.13 classes
Multiple selectWith multiple or size the select becomes a list box without the chevron.1 classes
Custom selectAdd select-custom to opt in to the customizable select (appearance: base-select) with a styled picker where supported; other browsers keep the native select.1 classes
CheckboxCustom drawn checkbox with checked and indeterminate states, tones, sizes and an animated check.12 classes
RadioCustom drawn radio buttons with tones and sizes.12 classes
ToggleA switch drawn on a native checkbox, with tones and sizes.12 classes
RangeSlider with a custom track and thumb in every engine, a filled track and tones.12 classes
File inputA native file input with a styled selector button.7 classes
Color inputA native color picker shown as a rounded swatch.3 classes
RatingStar rating built from a radio group, with hover preview and keyboard support.9 classes
One time codeA verification code field. Without JavaScript it is one input with spaced monospace characters over slot marks, so typing, paste and SMS autofill (autocomplete="one-time-code") work natively. Add data-m-otp and monsoon.js to get one cell per character (see Two factor and sign in).23 classes
FieldLabel, control, hint and error message. The error shows on :user-invalid or aria-invalid, and field tones color the control and hint.9 classes
FieldsetGroups related controls under a legend.2 classes
Form layoutA form stack, responsive rows of fields and an actions bar.3 classes
Form controlA checkbox, radio or toggle next to a label and a description.1 classes
Input groupJoins inputs with prefix and suffix addons or buttons; group sizes apply to every child.8 classes
Floating labelThe label sits inside the field and floats up on focus or when it has a value. The input needs a placeholder, a single space is enough.1 classes
Search fieldA search input with a leading icon and an optional keyboard shortcut hint.2 classes
Password fieldA password input with a reveal button. The button needs a few lines of JavaScript: toggle aria-pressed on it and switch the input type between password and text.2 classes
Checkbox cardA selectable card that highlights when its checkbox is checked.1 classes
Radio cardSelectable cards for a single choice, driven by :has(:checked).1 classes
Switch groupA list of settings, each with a label, a description and a toggle.2 classes
Input counterA number input between decrease and increase buttons. The buttons need a few lines of JavaScript: call stepDown() and stepUp() on the input.2 classes

Actions and feedback 26

ButtonButtons in eight tones, seven styles and five sizes, with loading, active and disabled states and a visible focus ring.24 classes
Button shapesSquare, circle, pill, full width and wide buttons, plus a quiet icon only button.6 classes
Button groupJoined controls that share borders, horizontally or vertically, and a toolbar that spaces groups apart.5 classes
Floating action buttonA floating action button whose speed dial opens on hover or keyboard focus, with no script.9 classes
Copy buttonA compact button for copying code or links, with a confirmed state.2 classes
Segmented controlA single choice control built from radio inputs, keyboard friendly by default.8 classes
Toggle groupA row of joined toggles built from checkboxes, so several can be on at once.8 classes
SwapSwaps two pieces of content when its checkbox is checked, with fade, rotate, scale and flip effects.7 classes
AlertInline messages in soft, outline and solid styles with an icon, title, description, actions and a script free dismiss.19 classes
CalloutA highlighted note for documentation and long form content.10 classes
BannerA full width announcement bar for the top of the page, solid, soft or gradient.13 classes
ToastA fixed stack for toast messages in six positions, with a contained variant for previews.10 classes
BadgeSmall labels for counts and states in solid, soft and outline styles, with an optional status dot.19 classes
ChipCompact tokens for filters, selections and people, removable and selectable without script.17 classes
TagA squarer, smaller chip for metadata such as topics and versions.9 classes
Keyboard keyKeyboard keys and shortcuts in five sizes.6 classes
SpinnerLoading indicators: spinner, ring, dots, bars and pulse, in five sizes and eight tones.18 classes
ProgressA styled native progress element with tones, sizes, stripes and an animated indeterminate state.15 classes
Radial progressA circular progress ring drawn with a conic gradient and driven by the --value custom property.14 classes
MeterA styled native meter that turns green, amber or red from its low, high and optimum values.6 classes
SkeletonShimmering placeholders for content that is still loading: blocks, text lines and circles.4 classes
TooltipA CSS only tooltip read from the data-tip attribute, shown on hover and keyboard focus, in four positions and eight tones.14 classes
IndicatorPlaces a badge or status dot on any corner or edge of another element.8 classes
StatusA small status dot for presence and health, with an optional ping animation.19 classes
Empty stateA friendly placeholder for empty lists and search results, with an icon, text and actions.6 classes
NotificationA notification card with an icon or avatar, message, meta line, actions and an unread marker.8 classes
DrawerA side panel toggled by a hidden checkbox and its labels, with a dimmed overlay that closes it. Works without JavaScript and without a dialog.6 classes
Drawer dialogA modal side panel built on <dialog>, opened with command="show-modal" and closed with command="close" or a click outside (closedby="any"). Slides in from any edge.5 classes
Responsive drawerAn app shell whose drawer is a toggled overlay on small screens and a sticky, always open sidebar from the lg breakpoint.1 classes
ModalA centered dialog over a blurred backdrop. Open it with command="show-modal" (or link to its id for a :target fallback), close it with command="close", a form with method="dialog" or Escape. Five widths, a top aligned variant and a bottom sheet on phones.14 classes
SheetA bottom sheet dialog with a grab handle that slides up from the bottom edge, for share menus and quick actions on touch screens.5 classes
PopoverA floating card on the native popover attribute: light dismiss, Escape and focus return for free. Anchored to its button where anchor positioning is supported, centered otherwise.6 classes
DropdownA menu that opens below a trigger, built on <details> or on a popover for light dismiss. Opens on focus or hover for plain wrappers, with end, top, left and right placements.8 classes
MenuA list of links or actions with titles, icons, shortcuts, an active item, disabled and danger states, nested submenus on <details> and a horizontal layout.11 classes
Context menuThe compact look of a desktop context menu, with labels, separators, shortcuts and a filled highlight. Pair it with a popover to show it.4 classes
Command paletteA search box with grouped results and keyboard hints, shown in a top aligned modal dialog.9 classes
LightboxA full screen dark viewer for one image with a caption, a counter, close and previous or next controls. Uses a <dialog> or :target links.7 classes
NavbarA top bar with start, center and end slots, optional sticky and blurred glass styles and a <details> based mobile menu that replaces the links below the md breakpoint.12 classes
Mega menuA wide navbar panel on <details name> so only one is open at a time, with sections, icon items with descriptions and a featured card.9 classes
SidebarAn app sidebar with a header, titled sections, icon items, badges, collapsible groups on <details>, a footer and a compact icon only mode.11 classes
TabsTabs in line, boxed, pills and lifted styles. Built from radio inputs with panels in .tab-content, so arrow keys switch tabs without JavaScript, or from links for routed pages.15 classes
BreadcrumbsThe path to the current page with chevron or slash separators and an optional pill container.3 classes
PaginationPage links with previous and next, an ellipsis, the current page, disabled items, three sizes and pill or joined styles.14 classes
StepsNumbered progress through a process with completed, current and error states, descriptions, a vertical layout and tones.10 classes
StepperA segmented progress bar with a title and description under each segment, for multi page forms.6 classes
DockA mobile bottom navigation bar (also .bottom-nav) with icon items, labels, an active marker, a fixed position with safe area padding and a floating style.7 classes
LinkText links with a soft underline that firms up on hover, a hover only underline, primary, muted and danger colors and an external marker.6 classes
Table of contentsAn on this page list with nested levels and an active marker on the rail, set with .toc-active or aria-current.4 classes
Scroll spyA sticky, horizontally scrolling bar of section links with an active pill, set with .scroll-spy-active or aria-current.3 classes
Back to topA round button fixed to the corner that fades in after the page scrolls, driven by a scroll timeline where supported. Use .back-to-top-static to place it inline.2 classes
Skip linkA link to the main content that stays out of view until it receives keyboard focus.1 classes
FooterA site footer with a brand column, link columns, a bottom row with legal text and social links, and a centered variant.8 classes

Data display and layout 38

CardA surface that groups related content, with header, media, body, actions and footer parts and several styles.12 classes
Card overlayA card whose body sits over its media on a readable gradient.1 classes
Card sideA horizontal card with the media on the side, here in the compact size.2 classes
AvatarA picture or initials for a person, with sizes, shapes, a ring and a status dot.13 classes
Avatar groupOverlapping avatars with a count for the rest.2 classes
ListRows with leading media, text and a trailing action, optionally divided, bordered and hoverable.10 classes
TableData tables with zebra rows, hover rows, compact cells, cell borders, a pinned header and first column, inside a scroll wrapper.8 classes
TimelineEvents on a line with dots or icons, vertical, horizontal or alternating sides.8 classes
StatsKey numbers with a title, value, description, figure and up or down trend.9 classes
CollapseA details element that opens and closes, with an arrow or plus icon.5 classes
AccordionA group of collapse items that share one frame, exclusive when they share a name.2 classes
CarouselA scroll snap slider with centered, full width and vertical modes, plus dot and arrow links to slide ids.9 classes
Rating displayRead only stars filled from the --rating custom property, decimals included.3 classes
DividerA horizontal or vertical rule with optional text, alignment and tones.10 classes
HeroA large opening section with centered content, an optional image overlay and a seed tinted gradient.4 classes
Feature gridAn auto fitting grid of features with icon, title and text.5 classes
PricingA set of plan cards with price, feature list and a featured plan.9 classes
TestimonialA customer quote with the author name, role and avatar.5 classes
ChatMessage bubbles aligned to the start or end, with avatar, header, footer and tones.15 classes
Mockup browserA browser frame with window dots and an address bar.3 classes
Mockup windowA desktop window frame with dots.1 classes
Mockup phoneA phone frame with a camera island; set --phone-w to resize the screen.2 classes
Mockup codeA terminal style code frame where each pre line can take a data-prefix.1 classes
Code blockA code listing with a header for the file name.2 classes
CountdownNumber boxes with labels; the value is text or the --value custom property.4 classes
DiffA before and after comparison; drag the divider, which is a native resize handle.4 classes
MasonryColumn based masonry that keeps each child whole, auto or with 2, 3 or 4 columns.4 classes
MaskClip any element or image to a shape.9 classes
BlockquoteA quotation with an accent rule, an optional filled style and a citation.3 classes
ProseTypography for long form HTML such as articles and Markdown output, in three sizes.3 classes
StackChildren layered on top of each other, the first one in front.1 classes
ArtboardFixed device sized frames for previews, also in landscape.6 classes
Container narrowA centered column at a comfortable reading width with side padding.1 classes
SectionFluid vertical padding for page sections in three sizes, with a muted background option.4 classes
Grid autoAs many columns as fit, each at least --grid-min wide.3 classes
CenterCenters content horizontally inside a readable measure.1 classes
ClusterWrapping inline items with an even gap, such as tags or buttons.1 classes
Sidebar layoutA sidebar next to the main content that stacks when space runs out, without media queries.2 classes

Media and files 10

JS
DropzoneDrag and drop, click to browse or paste files, with type, size and count validation, previews for images, GIFs, video, audio and documents, progress, retry, remove, reorder and a total; the native input stays in sync so a normal form submit sends the files. It needs monsoon.js. Without it the native file input still works.18 classes
JS
Dropzone compactA single row dropzone for tight forms, here for one PDF up to 2 MB. It needs monsoon.js.1 classes
JS
Image cropperMove and resize the crop box with its handles or the keyboard, pick an aspect (free, 1:1, 4:3, 16:9, 3:4, circle), zoom with the slider, wheel or a pinch, rotate, flip, and export to a canvas, Blob, data URL or File. Drop or paste another image to crop it. It needs monsoon.js. Without it the image is shown as is.11 classes
JS
Avatar uploadClick, drop or paste a picture to crop it in a circle inside a dialog; saving puts the cropped File into the file input so FormData sends it, writes a data URL into a hidden input when there is one and updates the picture. It needs monsoon.js. Without it the original file is sent.7 classes
JS
Image viewerOpens linked images in a full screen viewer with zoom (buttons, wheel, pinch, double click or double tap), pan, swipe, arrow keys, captions, a counter, thumbnails and a download button. It needs monsoon.js. Without it each link opens its image.13 classes
JS
Media galleryA grid of thumbnails with selection (Shift click selects a range, Escape clears), select all, delete, drag or Alt and arrow keys to reorder, and the image viewer on click. It needs monsoon.js. Without it the links open the images and the checkboxes submit with the form.8 classes
JS
Media gallery masonryThe same gallery in balanced columns that keep each picture at its own height. It needs monsoon.js.1 classes
JS
Before and after compareTwo pictures (or any two elements) split by a divider that follows the pointer, a finger or the keyboard through a native range input, with optional labels. It needs monsoon.js. Without it a fixed half and half split shows.8 classes
JS
Compare verticalA top and bottom split. It needs monsoon.js.1 classes
JS
Signature padSmooth, speed and pressure aware strokes with pen colors and width, undo, clear, PNG and SVG export, and strokes that survive a resize; the result goes into a hidden input. A typed name field stays available for people who cannot draw. It needs monsoon.js. Without it only the typed name field shows.10 classes

Interactive 24

JS
Date pickerA popover calendar over a native date input: month and year menus, a keyboard grid (arrows, Home, End, Page Up and Page Down), min and max, disabled dates, and month names and week start from the locale. Needs monsoon.js.11 classes
JS
Date range pickerTwo date inputs in one .datepicker pick a range: the first click sets the start, the second the end, with the days between highlighted and presets such as Last 7 days. Needs monsoon.js.4 classes
JS
ComboboxFilter as you type over a native select or an input with a datalist, following the WAI-ARIA combobox pattern. Matches are highlighted, accents are ignored and option groups are kept. Needs monsoon.js.7 classes
JS
Multi select comboboxOn a select with multiple the combobox shows the picks as chips. Backspace in the empty field removes the last one and the listbox stays open while you pick. Needs monsoon.js.6 classes
JS
Select (custom)A fully custom select over a native one, which stays in the form with its value and change events in sync. Options can carry an icon, an image, a color or a description, optgroups become headings, long lists get a search box, multiple shows chips, and it can be clearable. Keyboard and screen readers follow the WAI-ARIA select only combobox pattern, and the size, tone and variant classes of .select carry over. Needs monsoon.js.22 classes
JS
Tags inputChips over a plain text input that keeps a comma separated value. Enter or comma adds, Backspace removes the last tag, a pasted list is split, duplicates flash, and there are suggestions and a maximum. Needs monsoon.js.5 classes
JS
Sortable listReorder with a pointer or the keyboard: Space picks an item up, the arrows move it, Space drops it and Escape puts it back. Siblings slide out of the way and the list scrolls near its edges. Needs monsoon.js.4 classes
JS
Kanban boardSortable lists that share a group become kanban columns: drag cards between them, or pick one up with Space and move it to the next column with the left and right arrows. Column counts update on drop. Needs monsoon.js.6 classes
JS
Dual range sliderTwo thumbs for a minimum and a maximum over two native range inputs, which keep the values for the form. Steps, a minimum gap, formatted tooltips and the WAI-ARIA slider keys. Needs monsoon.js.6 classes
JS
Color pickerA saturation and brightness area, hue and opacity sliders, a hex, rgb or oklch field, swatches and the eyedropper where the browser has one, over a native color input. Needs monsoon.js.18 classes
JS
Data tableSorting by column (numbers, money and dates sort as such), a filter box, pagination, row selection with checkboxes and Shift for ranges, a column menu and a sticky header, on top of an existing table. Needs monsoon.js.18 classes
JS
Tree viewNested lists become a WAI-ARIA tree: Up and Down move, Right expands, Left collapses or goes to the parent, Home, End, type ahead and * to expand siblings. data-open starts a branch expanded. Needs monsoon.js.4 classes
JS
Tree with checkboxesWith data-m-tree-checkbox every item gets a tristate checkbox: checking a branch checks everything below it, and a branch with some checked children shows as mixed. Space or Enter toggles. Needs monsoon.js.2 classes
JS
Split panesResizable panes side by side or stacked: drag the separator, or focus it and use the arrows (Shift for bigger steps), Home, End and Enter to collapse. Minimum sizes, and sizes saved in localStorage when asked. Needs monsoon.js.4 classes
JS
Toast managerMonsoon.toast("Saved", { tone: "success" }) shows a toast in a polite live region. Toasts stack per position, pause while hovered or focused, can carry an action and can be swiped away. A button can show one with data-m-toast. Needs monsoon.js.7 classes
JS
Password strengthWires the .password-field reveal button (aria-pressed and the label follow) and scores the password from length, variety and common patterns into a four step meter with a live label. Needs monsoon.js.5 classes
JS
Number counterThe .input-counter buttons call stepDown() and stepUp(), repeat while held, follow min, max and step, and disable at the limits. Needs monsoon.js.3 classes
JS
Textarea autosizeGrows the textarea with its content. Browsers with CSS field-sizing do it natively; the script measures the others. max-height still caps it. Needs monsoon.js.1 classes
JS
Command searchMakes a .command-palette searchable: items filter by text and data-keywords, empty headings hide, arrows move the selection, Enter runs the item, and a hotkey such as Ctrl K opens the dialog. Needs monsoon.js.9 classes
JS
Infinite scrollA sentinel that fires monsoon:load when it nears the viewport or a scroll container. Append the next items, then call detail.done(), or detail.done(false) at the end. Needs monsoon.js.2 classes
JS
Countdown timerCounts down to a date: each .countdown-value with a data-unit updates every second, the timer label for screen readers changes once a minute, and an event fires at zero. Needs monsoon.js.4 classes
JS
Paste an imageFocus the zone and paste an image with Ctrl V, or drop one: a preview appears, a file input inside receives the file for the form, and Delete clears it. Needs monsoon.js.2 classes
JS
Rating inputA star rating with half stars, drawn as a WAI-ARIA slider over a number input that keeps the value. Hover previews, click sets, clicking the same value clears, and arrows, Home, End and digits work. Needs monsoon.js.4 classes
JS
Autoplay carouselAdds autoplay to the CSS carousel: pauses on hover, on focus, in a background tab and with reduced motion, has a play and pause button, and the current dot fills up until the next slide. Needs monsoon.js.7 classes

Two factor and sign in 17

JS
Verification codeOne cell per character on top of the CSS only .otp-field: auto advance, Backspace goes back, arrows, Home and End, paste or SMS autofill of the whole code from any cell (spaces and dashes are stripped), error shake and success states, masked mode and a monsoon:otp-complete event. The field stays in the form with the full value. Needs monsoon.js.5 classes
JS
Authenticator app setupTwo step setup for a time based authenticator: a QR code drawn in the browser from an otpauth:// URI (no image, no dependency), the setup key in groups of four with a copy button behind a "Can't scan the code?" disclosure, then the first code to confirm. Needs monsoon.js for the QR code and the code cells.20 classes
JS
QR codeA QR code generated in the browser (byte mode, error correction level M, versions 1 to 10, up to 213 bytes) as a crisp SVG. Dark modules stay on a light tile in dark mode too, so every camera can read it. Three sizes. Needs monsoon.js.4 classes
JS
Recovery codesOne time recovery codes in a two column grid with copy all, download as a .txt file and print. Used codes are struck through, and Continue stays disabled until "I saved these codes" is checked. Needs monsoon.js for the actions.9 classes
Method pickerSecond factor choices as selectable cards on native radio inputs: icon, title, a short explanation, a Recommended badge and when it was last used. Arrow keys move between methods; unavailable methods can be disabled.7 classes
JS
Verify screenThe second step after the password: masked destination, code cells that submit when complete, a resend link with a countdown, another method link and a "Don't ask again on this device for 30 days" checkbox. Needs monsoon.js for the cells and the countdown.8 classes
Push approvalCheck your phone: a pulsing device with the incoming request and number matching (the two digits to tap on the phone). State classes for approved, denied and expired change the color, stop the pulse and show a badge.10 classes
Security key and passkeyPrompt for a passkey or a hardware security key: an animated key mark, the steps, platform hints (Touch ID, Windows Hello, Android, USB or NFC keys) and error, retry and success states through classes. The page calls WebAuthn and switches the classes.8 classes
JS
Phone numberPhone number with a country picker: a searchable list with flags and dial codes, formatting as you type for the selected country, typing or pasting +44 or 0044 switches the country, and a hidden field with the E.164 number. Without the script the native select and tel input still work. Needs monsoon.js.13 classes
Two factor statusAccount settings card: on or off badge, the methods in use with manage and remove actions, recovery codes left with a regenerate button and when the account was last verified. The .auth-status-off modifier turns the card into a prompt to switch it on.19 classes
Sign in progressA compact step indicator for the sign in flow: password, second factor, done. Completed steps get .auth-flow-done (with a check), the current one aria-current="step".4 classes
JS
Magic link sentCheck your email: an animated envelope, the masked address, buttons that open the common mail apps, a resend link with a countdown and a way back to the password. Needs monsoon.js for the countdown.6 classes
Trusted devicesActive sessions and trusted devices: device icon, browser and system, location and last activity, a This device badge with a live dot, and revoke buttons, plus a way to sign out everywhere else.7 classes
JS
New passwordPassword with a reveal toggle, a four step strength meter and a live rule checklist: length, lower and upper case, a number, a symbol, and not a common password, keyboard run or repeated character. Needs monsoon.js.5 classes
JS
Sign in, centeredA centered sign in card on a soft backdrop: passkey first, then email and password, the flow progress, and a footer link. Composes the card shell with the native form fields; needs monsoon.js only for the reveal button.7 classes
JS
Sign in, splitTwo columns: the second factor step on one side and an illustration panel with a quote on the other, drawn with inline SVG over the theme colors. The panel hides itself when the container is narrow. Needs monsoon.js for the code cells and the countdown.5 classes
JS
Sign in, compactA compact card for popovers, sidebars and embedded flows: the method switcher and code entry in a tight layout with .auth-card-compact. Needs monsoon.js for the code cells.3 classes

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.