A lightweight announcement component for highlighting updates, releases, or important notices without interrupting the main flow. Uses a compact label and title pairing to surface timely information, with optional linking for deeper context. Works well inline or in banners and scales from subtle status updates to more prominent callouts.

An Inline Hint is a lightweight, non-intrusive UI pattern that provides helpful guidance, clarification, or best-practice advice directly within or immediately adjacent to a form field, input, or interactive element, without requiring the user to leave the current context.

A flexible messaging component for displaying conversational threads. Supports sent and received messages, timestamps, reactions, and file attachments. Built to handle short exchanges or longer conversations while keeping message hierarchy and sender context clear.

A horizontal divider with optional inline content like labels, tabs, or actions. Used to separate sections while keeping context visible, not just a visual break. Works well in dense layouts like settings pages, docs, and dashboards where structure matters without adding noise.

A multi-select tag picker for filtering or categorizing content. Supports search, selected-state chips, and a clear active state. Simple, compact, and meant to disappear once a choice is made. Good for forms, filters, and lightweight metadata input.

A compact, inline ticker for live or near-real-time values. Shows an identifier, current value, and delta with clear up or down signaling. Designed to sit quietly in headers, dashboards, or feeds without pulling focus. Good for stocks, metrics, or any rolling signal.

A flexible feed item for displaying recent activity in a clear, scannable format. Combines an avatar, primary action text, optional supporting text, and contextual metadata such as timestamps or attachments. Designed to stack cleanly in lists, adapt to different densities, and support both lightweight updates and richer activity states without visual noise.

A flexible feed item for displaying recent activity in a clear, scannable format. Combines an avatar, primary action text, optional supporting text, and contextual metadata such as timestamps or attachments. Designed to stack cleanly in lists, adapt to different densities, and support both lightweight updates and richer activity states without visual noise.

A data-rich component for showing an account balance at a glance, with supporting context over time. Combines a primary balance summary with trend indicators, charts, and optional actions to help users quickly understand current state and recent movement without digging into detailed reports.

A compact data visualization component for showing spending by category over a selected time range. Uses simple bars and inline values to make comparisons easy at a glance, with support for hover details and quick period switching. Suitable for dashboards, reports, and financial overviews.

A compact summary component for individual messages or threads. Shows sender, subject, timestamp, and a short preview of the content. Designed for inboxes, notifications, and lists where users need to scan and prioritize messages quickly without opening the full conversation.

A summary card that shows total spend for a period, with a clear visual cue and a simple category breakdown. Good for dashboards where you want one quick read before details. It answers “how much did I spend and where did it go” at a glance.

A market snapshot card that shows current value, change over time, and basic context. The chart is the focus, with quick filters for time range and a couple of supporting stats. Good for dashboards where you want trend first, details second.

A compact transaction list for recent activity. Shows status filters, clear labels, amounts, and dates at a glance. Works well in dashboards where users need quick confirmation of money in or out, with a simple path to view the full history.

A compact summary block for highlighting a single key metric. Combines a label, primary value, and supporting context like trend direction or time range. Designed to be used alone or in grids to give quick, scannable insight without needing a full chart.

A single step within a progress sequence used to show order, status, and context. Combines a step indicator with a title and optional description, supporting active, pending, and completed states. Designed to stack vertically for onboarding flows, checklists, and multi-step processes where clarity and scanability matter.

A self-contained upload item that shows the status of an individual file during and after upload. Supports clear states for uploading, completed, and failed files, with inline progress, file metadata, and quick actions like cancel or remove. Designed to be stacked into lists for multi-file uploads while keeping each file’s state easy to scan.

A dedicated drop zone for selecting files via drag-and-drop or manual browsing. Communicates accepted file types and size limits up front, with clear hover and focus states to guide interaction. Designed to pair with upload lists or cards, making the start of the upload flow obvious and low-friction.

A compact transaction list for recent activity. Shows status filters, clear labels, amounts, and dates at a glance. Works well in dashboards where users need quick confirmation of money in or out, with a simple path to view the full history.

A collection of file upload patterns covering common upload scenarios. Includes drag-and-drop entry points, inline progress feedback, simplified file lists, and clearly separated upload states. Designed to handle single or multiple files while keeping status, progress, and actions easy to scan and understand. Suitable for forms, onboarding flows, settings, and content management use cases.

A collection of flexible page header patterns that anchor page context and key actions. Includes minimal headers with actions and search, headers with optional cover imagery, tab-based navigation for section switching, and combined layouts with both cover images and tabs. Designed to scale from simple utility pages to richer, content-led views while keeping titles, navigation, and primary actions clear and consistent.

A set of lightweight, inline call-to-action patterns designed to sit naturally within page content. Includes compact text-led CTAs, media-supported variants for added visual emphasis, and email signup layouts for quick conversion. Built to prompt action without breaking reading flow, making them suitable for secondary actions, upgrades, or list growth inside longer pages.

A set of focused dialog patterns used to interrupt flow and prompt a clear user decision. Includes standard centered modals for general actions, destructive variants that emphasize risk and confirmation, and authentication modals optimized for sign-in and account access. Designed to keep attention contained, reduce background distraction, and clearly separate primary and secondary actions.

A set of structured onboarding layouts designed to guide users through a sequence of steps with clear progress and orientation. Includes split layouts and media-assisted variants that balance form inputs with contextual guidance or visual reinforcement. Built to reduce cognitive load, set expectations early, and help users move confidently through longer or more complex setup flows.

A set of progress indicators designed to communicate step-based flow, status, and completion at a glance. Includes horizontal and vertical variants for both in-progress and completed states, ranging from high-level overviews to detailed checklists. Built to set expectations, reinforce momentum, and help users understand where they are, what’s done, and what comes next in longer workflows.

A set of footer patterns designed for task-focused and utility-driven layouts. Includes minimal action bars, single-action footers with progressive reveal, and utility footers with inline controls. Built to keep primary actions accessible without overwhelming the interface, while supporting contextual controls, secondary actions, and lightweight navigation. Suitable for forms, tables, dashboards, and workflow-driven pages.