@blode

A vertically stacked set of interactive headings that reveal or hide associated content.

A modal dialog that interrupts the user with important content and expects a response.

A card for files and images with upload, processing, error, and done states, an optional full-card trigger, and a scrollable group.

A small status indicator for labelling and categorising items.

A message surface for chat interfaces, with variants, alignment, reactions, and composable content.

A container that groups related buttons together with shared styling.

A slideshow component for cycling through a set of content.

A grouped set of related checkboxes managed with shared state.

A saturation area, hue slider, hex input and suggested swatches for choosing a color.

A menu that appears on right-click, providing contextual actions.

A modal window that overlays the main content and requires user interaction.

A menu that opens from a trigger button, displaying a list of actions.

A square preview tile for an attached file — an image thumbnail or a file icon with name.

Fetch and preview Google Fonts, with stylesheet injection and cleanup.

A text input field for capturing user data.

A one-time password input with individual character fields.

A sheet of platform-aware instructions for installing a web app to the home screen.

A stepped questionnaire with single- or multi-select options, free-form answers, and skip.

An input that suggests matching values while typing.

A compact comparison list that visualises values as horizontal bars.

A sticky bar that surfaces actions for the currently selected rows.

A date field component that allows users to pick dates.

A chat transcript entry for user and assistant messages, with attachments and a hover meta row.

A circular indicator that shows the progress of a task.

An autocomplete input that combines a text field with a filterable dropdown list.

A button that copies text to the clipboard with animated feedback.

A context provider for managing text direction (LTR/RTL) across components.

A placeholder displayed when there is no content or data to show.

A searchable picker for Google Fonts with live previews.

A popup card that appears when hovering over a trigger element.

A wrapper that combines an input with addons like icons or buttons.

A flexible list item component for menus, settings, and data rows.

A callout that displays a short, important message to attract attention.

A component that maintains a consistent width-to-height ratio.

An image element with a fallback for representing the user.

A navigation aid that shows the current page location within a hierarchy.

An interactive element that triggers an action when clicked.

A container for grouping related content and actions.

A control that allows the user to toggle between checked and unchecked states.

An interactive component that expands and collapses a panel of content.

A command palette for fast, keyboard-driven searching and navigation.

A formatted input field for entering monetary values.

A panel that slides in from the edge of the screen.

A form field wrapper that pairs a label, input, and helper text.

A form component with validation powered by React Hook Form and Zod.

A draggable slider that wipes between a before and after image.

A chat composer with an auto-resizing textarea, action slots, a send button, and drag-and-drop attachments.

A styled keyboard key indicator for displaying shortcuts and key combinations.