@blode

Blode UI design-system base built on Base UI.

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

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

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

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

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

An input that suggests matching values while typing.

An image element with a fallback for representing the user.

A compact comparison list that visualises values as horizontal bars.

A small status indicator for labelling and categorising items.

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

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

An interactive element that triggers an action when clicked.

A container that groups related buttons together with shared styling.

A date field component that allows users to pick dates.

A container for grouping related content and actions.

A slideshow component for cycling through a set of content.

A circular indicator that shows the progress of a task.

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

A grouped set of related checkboxes managed with shared state.

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

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

A formatted input field for entering monetary values.

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

A searchable picker for Google Fonts with live previews.

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

A combobox that allows selecting multiple items with tag-style badges.

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

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

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

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

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

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

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

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 popup card that appears when hovering over a trigger element.

A text input field for capturing user data.

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

A one-time password input with individual character fields.

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

An accessible label that associates text with a form control.

A horizontal menu bar with dropdown menus, commonly used for application navigation.

A meter that shows a scalar value within a bounded range.

A responsive navigation component with support for dropdown panels.

A numeric input with increment, decrement, and scrubbing interactions.

A navigation component for paging through content across multiple pages.

A password input with a toggle button to show or hide the password.

An international phone number input with country code selector.

A floating panel that appears next to a trigger element.

A horizontal bar that indicates the completion progress of a task.

A vertical list of progress items with completed and pending states.

A confirmation dialog that asks the user for input before proceeding.

A set of mutually exclusive options where only one can be selected.

A layout component with draggable handles for resizing panels.

A dialog on desktop that becomes a drawer on small screens.

A scrollable container with custom styled scrollbars.

A search field with a clear button and an optional cycling placeholder.

A dropdown control for choosing a single value from a list of options.

A visual divider that separates content into distinct sections.

A button that opens the native share sheet and falls back to copying the link.

A panel that slides in from the edge of the viewport with an overlay.

A collapsible side navigation component with multiple layout variants.

A placeholder animation that indicates content is loading.

A draggable control for selecting a numeric value within a range.

A toast notification component powered by Sonner.

An animated loading indicator for asynchronous operations.

A compact metric card for showing a headline value and label.

A numbered progress indicator for a multi-step flow.

A toggle control for switching between on and off states.

A responsive table for displaying structured data in rows and columns.

A tabbed interface that organises content into switchable panels.

A multi-line text input field for longer form content.

A select of times at a fixed interval, formatted for the locale.

A searchable list of IANA time zones with their current offset and time.

A two-state button that can be toggled on or off.

A set of toggle buttons where one or more can be active.

A popup that displays helpful information when hovering or focusing an element.

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

A styled wrapper around the native HTML select element.

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

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

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

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

An animated status indicator with a morphing glyph and cycling text for thinking states.

A collapsible chain-of-thought stepper with steps, sources, details, and images.

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

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

A row primitive for chat transcripts, pairing an avatar with content, header, and footer, aligned to the start or end.

A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.

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

A compact inline status line for activity feeds and transcripts, with optional icon, separator, and border variants.

An editor for opening hours across the days of the week.

Utility functions including cn() for merging Tailwind CSS classes.

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

A hook that copies text to the clipboard and resets after a timeout.

A hook that exposes Chromium's deferred install prompt.

A hook that detects whether the viewport matches a mobile breakpoint.

A hook that observes and tracks the active tab indicator position.