Components
151 components, each with a live example, Leptos and Dioxus code, anatomy, keyboard support and props.
Actions
ButtonThe main action control. Use one primary or accent button per view, and say what happens: "Draft summary", not "OK".Icon buttonA square, icon-only button for toolbars and compact actions. Its label is the accessible name and the hover title.ToolbarA row of actions and toggles with one tab stop. Arrow keys move between items; whatever doesn't fit folds into a "More" menu, lowest priority first.Theme menuAn icon button with a menu of Light, Dark and System. It sets data-theme on the page, saves the choice in localStorage and follows the system setting while System is chosen.
Display
AvatarA person or agent. People are jewel-tinted circles, agents are hexagons, and no initials shows an unassigned placeholder.BadgeA small status label for states like Ready or 2 flags. Each tone pairs a soft background with a strong text colour.CardA surface for grouping content. Jewel tones are for feature and highlight cards; interactive cards lift on hover.ChipA compact pill label, smaller than a tag, for dense rows and cards. Monospaced by default for ids, counts and priorities.Code blockAn ink code panel with a language label, a copy button and light syntax colouring. Colouring runs on the server, so code arrives coloured.MarkdownRender a markdown string as styled elements: CommonMark plus GFM tables, task lists and strikethrough. Raw HTML shows as text and unsafe links are dropped, so untrusted input is safe.Doc cardA document in a grid: type tile, title, a three-line snippet, an optional pin and a footer. The whole card opens the document.Due pillA day-month date that turns citrine when it's due within three days and garnet once it's overdue.KbdA keyboard shortcut hint. One key per Kbd; put several side by side for a combination.Priority markP0 to P3 in mono. P0 is solid garnet so urgent work stands out in a dense list.Source chipMono chips that name the files behind an answer or summary. With on_click they become buttons that open the source.Space iconA rounded jewel tile with a line icon that identifies a team, workspace or space. Citrine tiles take ink icons; the rest take white.Status diamondThe rotated-square marker for workflow stages, label colours and legends. Pair it with text; on its own it needs a title.TagA pill with a jewel diamond, for filters, categories and chat suggestions. Clickable tags toggle; removable tags get a remove button.Value diffBefore → after for activity feeds. The old value is struck through; screen readers hear "changed from … to …".CarouselSlides in a scroll-snap strip. Swipe, scroll, use the arrow keys, or press the buttons and dots. Optional autoplay pauses on hover and focus, and never starts under reduced motion.RevealContent that fades in once it scrolls into view. One-way: it stays shown. Visible with no script, and shown at once for people who prefer reduced motion.Media timelineA scrubber over a native audio or video element: play button, buffered and played ranges, chapter ticks, a hover time preview and keyboard seeking.QR codeA QR code encoded in Rust and drawn as one SVG path. Error correction L to H, an optional centre logo and an SVG download.Transcript viewerTimed speech segments that highlight the line being spoken, scroll to follow playback, seek on click and filter by search. Following pauses when the reader scrolls by hand and resumes on request.Audio waveformA peak display for audio you already analysed: bars, a playhead you can click or drag, a selectable range with edge sliders, a loop toggle and a status line that flags bad input. The host owns the clock.Audio playerA compact player over a native audio element: play, seek, volume, playback rate, a status line that explains buffering and failures, a retry button and an optional transcript link.Media galleryA grid of photo and video thumbnails that opens each one in a lightbox. The picture grows out of its thumbnail when motion is allowed.
Forms
CalendarAn inline month grid for picking one date. Keyboard-first, with min/max bounds, blocked days and a today marker.CheckboxTurn an independent option on or off. A parent can show a mixed state when its children disagree.ComboboxA text field that filters a list of options as you type. Use it when the list is too long to scan.Date pickerA date field: type an ISO date, or open a calendar in a popover. Closes on pick or Esc and hands focus back.Color pickerA saturation and brightness area, a hue slider, optional opacity, a hex field and swatches. Pointer or keyboard.Cron builderBuild a schedule in plain language or type a cron expression. Each updates the other, the schedule is read back in words, and the next five runs are listed in UTC.Theme editorEdit hydroxy's design tokens live on top of a preset: colours, corner radii, spacing scale and fonts, with a scoped preview, WCAG contrast warnings and CSS or JSON export.Mention inputA text field where @ lists people and / lists commands, filtered as you type. A picked row becomes a mention that carries an id and is deleted as one piece.Signature padDraw a signature with smoothed, pressure-like strokes, or type a name as the keyboard alternative. Exports SVG path data.Image cropperA movable, resizable crop box with aspect presets, zoom, quarter-turn rotation and keyboard nudging. Reports the crop in source pixels.Date fieldA date typed into day, month and year segments. Digits fill a part and move on; arrows step and wrap.Date range pickerPick a start and end day on two months at once. The days between light up as you move, and it closes on the second click.Duration fieldA length of time typed into hours, minutes and seconds. The value is whole seconds.Quantity stepperA compact minus, value and plus control for counts. The number field's behaviour in a tighter layout.Filter chipA dashed toggle that turns solid amethyst when active. Pair with Menu, using dropdown, for filters with several values.InputA labelled text field with a hint or an error below it. Use mono for money and rates.Markdown editorA textarea with a formatting toolbar and Write / Preview tabs. Toolbar buttons and shortcuts wrap or prefix the selection, and toggle off when it is already formatted.Radio groupPick one option from a short list. Arrow keys move between enabled options and select as they go.Search fieldA search input with a clear button. Use the large size for page-level search.Segmented controlA pill row for switching between a few options. Behaves like a radio group: arrow keys move and select.SelectA native dropdown styled to match Input. The platform handles the picker, typeahead and keyboard.SliderPick a value from a range. A native range input, so the keyboard, assistive tech and forms work without extra code.Range sliderPick a low and a high value on one track. Each thumb stops at the other, and the track moves whichever thumb is nearest.RatingScore something with stars. A radio group with an optional half step, a hover preview and a read-only mode for showing a score.Toggle buttonA button that stays pressed, such as Bold or Pin. Use a switch for settings that read as on and off.File dropzoneDrop files or browse for them, then review and remove them. A native file input does the picking; type, size and count limits are checked before files are added.Upload queueA list of uploads with progress, pause, resume, cancel and retry. The queue only tracks state: it tells you when to start or abort a transfer, and you report progress back.AttachmentA file as a chip or a card: thumbnail or type badge, name, size and an optional remove button. It only displays; keep the list yourself.SwitchAn on/off toggle for settings that apply immediately. Use a checkbox when the choice is submitted later.Tags inputA list of short values typed into one field. Enter or a comma adds a tag; pasted lists are split on commas and new lines.Number fieldType or step a number. Drafts commit on Enter or blur, clamped to the range; arrows and the buttons step on a grid.Money fieldAn amount with a currency. Groups thousands as you type, stops at the currency's precision, reads pasted amounts, and reports integer minor units.Phone fieldAn international phone number: searchable country picker, grouping as you type, E.164 output and a validity check.Time fieldA time of day. A styled native time input: segmented entry, the locale's 12- or 24-hour clock and a phone picker for free.OTP inputA one-time code, one box per character. Typing advances, Backspace goes back, and paste or SMS autofill fills every box.Password fieldA password input with show and hide, a Caps Lock warning, and for new passwords a strength meter and a live checklist of rules.QuestionnaireA survey that asks one question at a time. Single choice, multiple choice, text and scale questions, branching on earlier answers, a progress bar and a review step before submitting.Availability pickerA week grid of time slots. Drag to paint a block available or clear it, or paint with the keyboard. Shows the time zone and a plain-language summary.Voice inputA microphone button that records with getUserMedia and MediaRecorder, shows a live level meter, and hands you the audio as a Blob. Handles the permission prompt and a refusal.Recording controlStart, pause, resume and stop a microphone recording. Counts only the time spent recording, explains a refused or missing microphone, and plays the result back with a download link.Inline editText that becomes a field when you click it. Enter or leaving the field saves, Esc puts the old text back.Async validated inputA text field that checks its value with your async validator once typing pauses. It shows checking, valid and invalid states and ignores answers about text that has since changed.Shortcut recorderClick it and press a key combination to record a shortcut. It is stored in a portable form and shown with the right modifier symbols for the platform.
Data
Spreadsheet gridAn editable sheet with A1 columns and row numbers. Select ranges with the pointer or Shift, type numbers, text or formulas (=SUM(D2:D9), =A1*1.2), copy and paste as tab-separated text, and resize columns. Only the rows in view are rendered, so 10,000 rows scroll smoothly.Week schedulerEvents on a time grid in day, work-week or week view. Drag on empty time to create an event, drag one to move it across times and days, or drag its bottom edge to resize it, all snapping to 15 minutes. Overlapping events sit side by side. Everything works from the keyboard too.Virtual listA listbox that only renders the rows in view, so 100,000 rows scroll as smoothly as 100. Rows can be a fixed height or measured as they render, group headers stick until the next group pushes them off, and the keyboard moves through every row with the active one always announced.Stat cardOne key figure with its name and change. Lead with the number; the diamond ties a card to its chart series.Step trackA linear stage tracker with diamond nodes, for approvals, deploys or onboarding. Filled up to the current step.Kanban boardColumns of cards. Drag a card to reorder it or move it to another column, or pick it up with Space and move it with the arrow keys.Sortable listA list you can reorder. Drag an item, or pick it up with Space and move it with the arrow keys. It shares its move logic with the Kanban board.Filter builderBuild a filter from rows of field, operator and value. The operators depend on the field's type, and the result is a plain value you can store or test records against.Data tableRows and columns in a native table. Sortable headers, checkbox selection with select-all, optional paging and a sticky header.GridAn editable data grid. One cell is in the tab order, arrow keys move in two dimensions, and Enter or F2 edits a cell. Use Data table for sortable, selectable rows.Access editorA sharing panel: add people by email, give each a role, and remove them. The owner's role is fixed and the owner cannot be removed.File managerA folder tree, breadcrumbs and a list or grid of the open folder. Select with the mouse or keyboard, rename in place, delete, and right-click for a context menu. You keep the items; renames and deletes come back as callbacks.Gantt chartA task list beside a timeline of bars on a day or week scale. Drag a bar to move it or an edge to resize it, snapping to days, or pick a bar up with Space and use the arrow keys. Dependencies are drawn as connectors; they are not enforced.Log streamA live, monospace log. It follows the tail until you scroll away, holds new lines while paused, filters by level and text, and keeps only the newest lines so long logs stay cheap.Diff viewerCompare two versions of a text or source file. A Myers line diff with changed words marked inside each line, unified or side-by-side, with unchanged runs folded away until you expand them.JSON inspectorA collapsible JSON tree with values coloured by type. Search highlights matches and opens the way to them, any row copies its value or its path, and long arrays fold into ranges of 100 so huge payloads stay quick.TerminalTerminal-style output with a prompt. ANSI colours (16, 256 and truecolour) and bold, dim, italic, underline and inverse render as styled, copyable text. Up and Down recall history, Ctrl+L clears, and the view follows new output until you scroll up. Your code runs the commands.Node editorA flow builder on a pan and zoom canvas. Nodes have typed ports; drag from one to another to wire them, and only matching types connect. Select, box-select, drag, snap, undo and minimap, all with a keyboard route.WhiteboardAn infinite canvas with rectangles, ellipses, arrows that stay attached to shapes, smoothed freehand ink, sticky notes and text. Resize, rotate, restack, duplicate, undo, and export as JSON or SVG.
Navigation
Table of contentsAn in-page outline of real hash links. The host passes the headings and, optionally, the current one; turn on the spy to follow the page's scroll instead. The last heading wins at the bottom of the page.BreadcrumbThe trail of pages leading here. When space runs out, middle pages fold into a "…" menu, keeping the first page and the last two. Any page can list its neighbours.TabsSwitch between views within a page. One tab is selected; arrow keys move between enabled tabs.WizardA multi-step flow: a step list, one panel at a time and Back / Next. Each step can block Next until it is valid, and linear flows unlock steps in order.Nav itemA sidebar row. The count is a loud amethyst badge for unread items; the quiet count appears only on hover.Nav sectionA collapsible sidebar group with a mono label. It shows its count while folded and an empty line when it holds nothing.Tree viewA hierarchy of items with branches that open and close. One tab stop; arrow keys walk the visible rows.PaginationMove between pages of results. Ellipses stand in for long runs, and the row keeps the same length as the page changes so buttons stay put.MenubarA horizontal bar of menus, like File and Edit in a desktop app. One menu is open at a time; Left and Right move between them, and hovering switches while one is open.Navigation menuA site nav with flyout panels. Hover opens a panel after a short rest and a close delay lets the pointer cross to it; the keyboard opens panels with Down.Saved viewsA dropdown of saved filter presets. Pick one, save the current filters under a name, rename or delete the active one, or make it the view to open with. It keeps ids and names; you keep the filters.
Layout
Master detailA list beside its detail. Wide screens show both; narrow ones show one pane at a time with a Back button that returns focus to the row you left. The host owns the selection, so routing stays yours.App shellA page frame with header, navigation, main, aside and footer. The navigation sits beside the content on wide screens and becomes a native drawer on narrow ones, with a skip link and an optional fixed-height scroll mode.Sidebar layoutAn app shell: a sidebar that collapses to an icon rail, a top bar and the main region. On narrow screens the sidebar is a native popover drawer.Resizable panelsPanels in a row or column with separators you can drag or move with the keyboard. Per-panel minimum, maximum and collapse.Dashboard layoutWidget tiles on a column grid. Drag a tile by its handle, resize it from the corner, or do both from the keyboard. Tiles in the way make room.Dock layoutAn IDE-style workspace: resizable splits whose panes are tab groups. Drag tabs to reorder them or move them between groups, or use the keyboard.
Feedback
CalloutA tinted box for notes, tips, warnings and dangers. Each kind has a fixed colour and icon.Check listAutomated check results with a summary line. Failed and skipped rows say so in words, and running checks breathe.Empty stateFills an empty list or pane: an icon, what is empty, one line on why, and an optional action.Progress barShows how far along a task is. Leave out the value when the amount is unknown.ToastA brief notification in the corner. It closes on its own unless it needs a decision; hovering or focusing it pauses the clock.Approval cardAsks a person to approve or reject an action, with the facts they need to decide. Once decided, it shows who decided and when.SkeletonPlaceholder shapes that hold the layout while content loads, then fade into the real thing. One soft shimmer sweeps across them all; with reduced motion they stay still.Notification centerA bell with an unread count that opens a list of notifications. Mark them read one at a time or all at once, dismiss them, and see an empty state when none are left.
Overlays
TourOnboarding coachmarks. Each step spotlights an element, scrolls it into view and explains it in a popover beside it. Missing targets show centred instead.LightboxA modal viewer for photos and videos. Zoom with the wheel, a pinch or a double-click and drag to pan; swipe or use the arrows to move on.Alert dialogA modal that interrupts to confirm something. Escape and backdrop presses are ignored, so it closes only through its two buttons, and the safe one has focus.Command paletteA modal search over every command, grouped. Type to filter, Enter to run. Open it with a button or ⌘K.DialogA modal for confirmations and focused tasks. It traps focus, makes the page behind inert and returns focus to the trigger on close.MenuA list of actions that opens from a button. Arrow keys move through enabled items; Esc or a click outside closes it.PopoverA non-modal panel anchored to a button, for details or a small form. Escape or a click outside closes it.TooltipA short hint for a control. Shows on hover or keyboard focus and flips to stay on screen.SheetA panel that slides in from an edge of the screen, for details and settings beside the page. A modal native <dialog>, so focus stays inside and returns to the trigger on close.Hover cardA preview card for a link. It opens after the pointer rests on the link, or at once on focus, and stays open while the pointer moves onto the card.Context menuA menu of actions that opens where you right-click. The same keyboard model as Menu, opened from the keyboard with Shift+F10 or the menu key.
Utilities
PacerDebounce, throttle, rate limit, batch and an async queue with priority and cancellation. A clock-free core you drive with timestamps, plus Leptos and Dioxus hooks that expose each controller's state as a signal.HotkeysKeyboard shortcuts from strings like Mod+K (⌘ on a Mac, Ctrl elsewhere) and sequences like G I. Scopes, focus-bound shortcuts, priorities, typing in inputs ignored by default, and a registry that lists everything for a cheat sheet.
Disclosure
Chat
Chat bubbleA message in an assistant chat. The assistant's answers sit on the page with the mark and their sources; the person's messages are inverse bubbles on the right.Voice sessionThe screen for a live voice conversation: a status orb, mute and end controls and a transcript. The audio transport is yours; the component takes the phase and reports what the user asked for.ComposerThe chat input. Enter sends, Shift+Enter adds a line, and the field grows with the message. Suggestions fill the field when picked.ThreadA whole conversation: chat bubbles in a message scroller over a composer, with a typing indicator, streaming text, stop, and copy and retry on each message.Thread listThe conversation sidebar. Each row shows a title, preview and time, with an unread marker. Search filters as you type; rename and delete sit on each row.Assistant composerThe assistant's message box. Messages written while a reply runs wait in a queue and send in order when it ends. Up recalls earlier messages, @ and / open a picker, and files attach as chips with upload progress. Suggestion cards fill an empty thread.Assistant MCPManage the tool servers an assistant can use. Built-in connectors and custom servers sit in two lists, each row connecting on request and listing its tools; custom servers are added from an inline form. A separate card lets a server ask the person for input.Assistant modalA floating chat panel. A round button at the bottom-right of its container opens a panel above it; put a thread and composer inside. The panel stays mounted while closed, so the conversation keeps its place.Assistant threadA conversation with an assistant. Messages hold text, images, sources and runs of reasoning and tool calls that fold into a chain of thought. Each message has an action bar, a branch picker when it has alternatives, and an error line when a run fails. The footer slot takes a composer.Assistant thread listThe conversation sidebar for an assistant. A New thread button sits over an Active and an Archived section. Each row opens, renames in place, archives or restores, and deletes.Message scrollerA scrolling list for messages. It sticks to the bottom as messages arrive, lets go when you scroll up, and offers a jump button with a count of what you missed.Insight noteAn amethyst-tinted summary with the mark, a label and the sources it came from. Say where each figure comes from.Emoji pickerSearch 1,600 emoji by name or keyword, browse by category, pick a skin tone. Recently used comes back from you.Tool traceAn agent run step by step: thinking, tool calls with arguments and results, sub-agents, errors. Updates live as steps arrive.Model pickerA compact control for the model and how it runs: temperature, a token budget and reasoning effort.Citation popoverNumbered markers after cited text. Hover or focus one to see the source, the quoted passage highlighted, and a link out.
Activity
Activity feedA timeline of changes and comments. Each item is a line, often with a value diff, or a bordered comment.Comment threadThreaded comments for a document or record. Replies sit under their comment, a thread can be resolved and reopened, and resolved threads fold away.TimelineA vertical list of events, oldest first. Each has a time, a title, an optional actor and body, and a coloured status marker.Presence barWho's here right now: an overlapping avatar stack, active people first, with the rest behind a +N list.Live cursorsOther people's pointers over a shared surface. You bring the network; positions glide between updates and fade when still.Reaction barEmoji reactions with counts. Press one to add or take back yours; hover or focus to see who reacted.