# Geti UI > Component design system for Intel Geti products ## Components - [Installation](/components/installation.md): This guide explains how to install and start using @geti-ui/ui in a React application. - [Theming](/components/theming.md): How Geti UI extends Adobe React Spectrum's design tokens and how to apply the theme in your app. - [ActionButton](/components/ui/ActionButton.md): ActionButton is a compact, icon-friendly button for toolbar actions, inline controls, and context menus. Use it when you need a low-footprint pressable action, not a primary page-level CTA. React Spectrum ActionButton ↗Geti UI Theming - [Avatar](/components/ui/Avatar.md): Avatar displays a thumbnail representation of a user or entity. Use it in user profile headers, comment threads, collaboration panels, and anywhere a face or identity needs visual context. React Spectrum Avatar ↗Geti UI Theming - [AvatarGroup](/components/ui/AvatarGroup.md): AvatarGroup renders a horizontal row of Avatar components. When the list exceeds the configured maximum, it shows a +N overflow badge instead of clipping. Use it for compact team member lists, annotation author stacks, and collaboration indicators. - [Button](/components/ui/Button.md): Buttons trigger user actions such as save, submit, or delete. Use Button for clear, high-signal actions in forms, dialogs, and page-level workflows. React Spectrum Button ↗Geti UI Theming - [ButtonGroup](/components/ui/ButtonGroup.md): ButtonGroup groups related actions and applies consistent spacing/alignment between buttons. React Spectrum ButtonGroup ↗Geti UI Theming - [Content](/components/ui/Content.md): Content defines the main body region inside overlays such as dialogs. React Spectrum Content ↗Geti UI Theming - [CornerIndicator](/components/ui/CornerIndicator.md): CornerIndicator overlays a small blue dot in the top-right corner of any child element to signal a pending change, unsaved state, or notification. Wrap any UI element with it and toggle isActive to control visibility. - [Divider](/components/ui/Divider.md): Divider is a thin horizontal or vertical line that separates sections of content. Use it to add visual breathing room between distinct groups, not as decoration between every element. React Spectrum Divider ↗Geti UI Theming - [Footer](/components/ui/Footer.md): Footer defines the bottom region of a dialog, typically for action controls. React Spectrum Footer ↗Geti UI Theming - [Heading](/components/ui/Heading.md): Heading renders section and page titles with Spectrum heading semantics. React Spectrum Heading ↗Geti UI Theming - [Icon](/components/ui/Icon.md): Icon wraps Spectrum icons so they can be styled and sized consistently in Geti UI components. React Spectrum Icon ↗Geti UI Theming - [Image](/components/ui/Image.md): Image renders an accessible image with support for alt text, object-fit modes, and decorative image handling. Use it wherever you need an image that integrates with Spectrum layout props and Geti theming. React Spectrum Image ↗Geti UI Theming - [PhotoPlaceholder](/components/ui/PhotoPlaceholder.md): PhotoPlaceholder renders a circular or custom-shaped placeholder for a user photo. It shows the first initial of the name on a deterministic background color derived from the indicator string. Use it as a fallback when no profile image is available. - [PressableElement](/components/ui/PressableElement.md): PressableElement attaches press interaction semantics (mouse, touch, keyboard) to any arbitrary container element. Use it when a non-button UI block needs to be interactive but ActionButton or Button is not the right semantic fit. React Aria Pressable ↗Geti UI Theming - [Text](/components/ui/Text.md): Text renders inline or block text with Spectrum typography semantics and styling. React Spectrum Text ↗Geti UI Theming - [ToggleButton](/components/ui/ToggleButton.md): ToggleButton is a button that maintains a selected/deselected state. Use it for persistent binary controls - show/hide a panel, lock/unlock an element, or enable/disable a mode. React Spectrum ToggleButton ↗Geti UI Theming - [ToggleButtons](/components/ui/ToggleButtons.md): ToggleButtons renders a group of mutually exclusive buttons - only one option is active at a time. Use it for view mode switching, filter selection, or any compact segmented control where a single choice must be made. - [View](/components/ui/View.md): View is a general-purpose layout container built on Spectrum style props. Use it when you need a div-like box with design-token-aware padding, background color, borders, or positioning - without writing raw CSS. React Spectrum View ↗Geti UI Theming - [Checkbox](/components/form/Checkbox.md): Checkbox is a binary form control for opt-in/opt-out choices. Use it for individual boolean settings, multi-select item lists, and form agreement fields. React Spectrum Checkbox ↗Geti UI Theming - [CheckboxGroup](/components/form/CheckboxGroup.md): CheckboxGroup manages a set of related checkboxes with a shared label and a single value array. Use it when users can select any combination of options from a named list. React Spectrum CheckboxGroup ↗Geti UI Theming - [DropZone](/components/form/DropZone.md): DropZone is a target area where users can drop files or dragged objects. Use it alongside FileTrigger to build upload UIs that support both drag-and-drop and click-to-browse flows. React Spectrum DropZone ↗Geti UI Theming - [FileTrigger](/components/form/FileTrigger.md): FileTrigger attaches native file picker behaviour to any child element. When the child is pressed, the system file dialog opens. Use it to build upload buttons, image pickers, and document import flows. React Aria FileTrigger ↗Geti UI Theming - [Form](/components/form/Form.md): Form is a layout container that groups related form controls and propagates shared validation behaviour. Use it to wrap any collection of inputs that are submitted together. React Spectrum Form ↗Geti UI Theming - [NumberField](/components/form/NumberField.md): NumberField is a text input constrained to numeric values with built-in increment/decrement stepper buttons. Use it for threshold values, quantities, confidence scores, and any other numeric parameter input. React Spectrum NumberField ↗Geti UI Theming - [PasswordField](/components/form/PasswordField.md): PasswordField is a masked text input with a show/hide toggle. Use it for login forms, account creation, and any field where the user enters a sensitive credential. - [RadioGroup](/components/form/RadioGroup.md): RadioGroup presents a named set of mutually exclusive options. Use it in forms and settings panels when a user must pick exactly one option from a visible list. React Spectrum RadioGroup ↗Geti UI Theming - [RangeSlider](/components/form/RangeSlider.md): RangeSlider is a dual-handle slider for selecting a numeric range. Use it when users need to set both a lower and upper bound - confidence filters, score ranges, date-free numeric intervals. React Spectrum RangeSlider ↗Geti UI Theming - [SearchField](/components/form/SearchField.md): SearchField is a text input purpose-built for search and filter interactions. It includes a magnifier icon and a clear button, and fires onSubmit on Enter. Use it for any live or submitted search pattern. React Spectrum SearchField ↗Geti UI Theming - [Slider](/components/form/Slider.md): Slider is a single-handle range control for selecting a numeric value within a bounded range. Use it for settings with continuous or stepped values where drag interaction is more natural than typed input. React Spectrum Slider ↗Geti UI Theming - [Switch](/components/form/Switch.md): Switch is a binary toggle for settings that take effect immediately - without requiring a form submit. Use it for live preferences and feature flags, not for choices that are batched in a form. React Spectrum Switch ↗Geti UI Theming - [TextArea](/components/form/TextArea.md): TextArea is a multi-line text input for longer freeform content. Use it for descriptions, comments, notes, and any field where the user needs more than a single line. React Spectrum TextArea ↗Geti UI Theming - [TextField](/components/form/TextField.md): TextField is the standard single-line text input. Use it for names, emails, URLs, short labels, and any field requiring freeform text entry on a single line. React Spectrum TextField ↗Geti UI Theming - [Calendar](/components/form/date-controls/Calendar.md): Calendar shows a full month grid and lets users select a single date. RangeCalendar extends this to allow selecting a start–end date range. Both are standalone components without a popover trigger - use them inline or compose them into custom overlays. React Spectrum Calendar ↗React Spectrum RangeCalendar ↗Geti UI Theming - [DateField](/components/form/date-controls/DateField.md): DateField provides a segmented keyboard input for entering a date value, with each date segment (day, month, year) editable independently. TimeField is a co-located companion for time-only values. React Spectrum DateField ↗React Spectrum TimeField ↗Geti UI Theming - [DatePicker](/components/form/date-controls/DatePicker.md): DatePicker combines a segmented DateField with a Calendar popover, letting users enter or pick a date (and optionally time). Use it in forms that require a precise date value. React Spectrum DatePicker ↗Geti UI Theming - [DateRangePicker](/components/form/date-controls/DateRangePicker.md): DateRangePicker lets users select a contiguous date range using two segmented inputs and a shared RangeCalendar popover. Use it whenever a start and end date are both required. React Spectrum DateRangePicker ↗Geti UI Theming - [RangeCalendar](/components/form/date-controls/RangeCalendar.md): RangeCalendar is a standalone calendar for selecting a start and end date. Use it when range selection should be visible inline, rather than hidden in a popover. React Spectrum RangeCalendar ↗Geti UI Theming - [TimeField](/components/form/date-controls/TimeField.md): TimeField is a segmented keyboard input for time-only values. Use it when users should type or step through hours/minutes/seconds without opening a calendar popover. React Spectrum TimeField ↗Geti UI Theming - [ColorArea](/components/form/color-controls/ColorArea.md): ColorArea renders a two-dimensional gradient surface that lets users adjust two color channels simultaneously by dragging a thumb. Use it as the main color-picking surface in a color editor. React Spectrum ColorArea ↗Geti UI Theming - [ColorField](/components/form/color-controls/ColorField.md): ColorField is a text input for entering a hex color or an individual color channel value. Use it as a keyboard-precise companion to graphical color pickers. React Spectrum ColorField ↗Geti UI Theming - [ColorPickerDialog](/components/form/color-controls/ColorPickerDialog.md): ColorPickerDialog is a color picker that combines a swatch trigger with a popover containing a ColorEditor (color area, hue slider, and color fields) and a ColorSwatchPicker for quick preset selection. Built on top of React Spectrum's ColorPicker and ColorEditor. Geti UI Theming - [ColorSlider](/components/form/color-controls/ColorSlider.md): ColorSlider lets users adjust a single channel of a color value along a gradient track. Use it as a building block inside a custom color editor or inline to expose a specific channel (e.g. opacity/alpha). React Spectrum ColorSlider ↗Geti UI Theming - [ColorSwatch](/components/form/color-controls/ColorSwatch.md): ColorSwatch renders a small filled square that previews a color value. Use it anywhere a color needs a visual representation - in pickers, palettes, or alongside labels. React Spectrum ColorSwatch ↗Geti UI Theming - [ColorSwatchPicker](/components/form/color-controls/ColorSwatchPicker.md): ColorSwatchPicker renders a keyboard-navigable grid of ColorSwatchPickerItem swatches and lets the user select one. Use it as a preset palette in a color editor or settings panel. React Spectrum ColorSwatchPicker ↗Geti UI Theming - [ColorThumb](/components/form/color-controls/ColorThumb.md): ColorThumb is a small square that displays a solid color preview. It is a lightweight Geti-native component (not from React Spectrum) built on View. Use it wherever a compact color chip is needed - for example, next to a label name or in a list row. Geti UI Theming - [ColorWheel](/components/form/color-controls/ColorWheel.md): ColorWheel renders a circular hue track that lets users change the hue channel of an HSL or HSB color by rotating a thumb around the ring. Pair it with ColorArea for a full HSB color editor. React Spectrum ColorWheel ↗Geti UI Theming - [ComboBox](/components/form/pickers/ComboBox.md): ComboBox combines a text input with a dropdown list, letting users type to filter options or select from the full list. Use it when the option set is large or when free-text filtering improves usability. React Spectrum ComboBox ↗Geti UI Theming - [Picker](/components/form/pickers/Picker.md): Picker is a dropdown select component for choosing a single option from a list. Use it when the option set is static and the number of choices is too large for radio buttons. React Spectrum Picker ↗Geti UI Theming - [ActionBar](/components/data/ActionBar.md): ActionBar provides a contextual toolbar that appears when one or more items in a list or table are selected. Use it to surface bulk operations - edit, delete, export - without cluttering the default view. React Spectrum ActionBar ↗Geti UI Theming - [CardView](/components/data/CardView.md): CardView renders a responsive grid of Card components from a data array. Use it when you need to display a collection of summary items - projects, models, datasets - in a fixed-column grid layout. Geti UI Theming - [ListBox](/components/data/ListBox.md): ListBox displays a list of options from which users can select. It is used as a standalone selection surface - typically inside popovers, panels, or custom pickers - rather than inside forms (use Picker or ComboBox for form contexts). React Spectrum ListBox ↗Geti UI Theming - [ListView](/components/data/ListView.md): ListView renders an interactive list of items with built-in keyboard navigation, selection, and density variants. Use it for any ordered list where users need to pick one or more items, or trigger actions per row. React Spectrum ListView ↗Geti UI Theming - [TableView](/components/data/TableView.md): TableView renders a data table with sortable columns, row selection, and virtualized scrolling. Use it when data is naturally tabular - rows and named columns - and you need sorting or multi-select. React Spectrum TableView ↗Geti UI Theming - [Tag](/components/data/Tag.md): Tag displays a small categorisation label with an optional accent dot, prefix element, or suffix element. Use it to show metadata inline - annotation labels, model types, status categories - without needing a full Spectrum TagGroup. Geti UI Theming - [TagGroup](/components/data/TagGroup.md): TagGroup renders a collection of tag items from data. Tags can optionally be removed by the user. Use it when you have a list of categorisation items - selected filters, applied labels, chosen categories - that the user may need to dismiss. React Spectrum TagGroup ↗Geti UI Theming - [TreeView](/components/data/TreeView.md): TreeView renders a hierarchical list of items that users can expand and collapse. Use it to navigate tree-structured data - file systems, label hierarchies, nested categories. React Spectrum TreeView ↗Geti UI Theming - [VirtualizedHorizontalGrid](/components/data/VirtualizedHorizontalGrid.md): [!WARNING] Deprecated: migrate to @geti-ui/blocks media primitives (MediaRow, MediaGrid, MediaColumn). VirtualizedHorizontalGrid renders a horizontally scrolling virtualized grid. Geti UI Theming - [VirtualizedListLayout](/components/data/VirtualizedListLayout.md): [!WARNING] Deprecated: migrate to @geti-ui/blocks media primitives (MediaGrid, MediaColumn, MediaRow). VirtualizedListLayout renders a vertically scrolling list that only mounts the items currently in view. Geti UI Theming - [Badge](/components/feedback/Badge.md): Badge displays a short colour-coded label for categorisation and status indication. Use it to call attention to a category or condition on a data item - model state, annotation status, severity level. React Spectrum Badge ↗Geti UI Theming - [IllustratedMessage](/components/feedback/IllustratedMessage.md): IllustratedMessage shows an empty/placeholder state with an illustration and supporting text. Use it when a region has no content yet, when search has no results, or when users need a clear next step. React Spectrum IllustratedMessage ↗Geti UI Theming - [InlineAlert](/components/feedback/InlineAlert.md): InlineAlert displays a non-modal message associated with content in the current view. Use it to surface validation errors, warnings, or contextual info directly in the page rather than in a toast or dialog. React Spectrum InlineAlert ↗Geti UI Theming - [IntelBrandedLoading](/components/feedback/IntelBrandedLoading.md): IntelBrandedLoading renders the Intel branded loading animation with a dedicated container. Use it for branded loading moments such as initial app bootstrap or major workflow transitions. Geti UI Theming - [Loading](/components/feedback/Loading.md): Loading renders a progress spinner (or the Intel branded animation) in one of three layout modes: inline within a container, as a full-screen overlay, or as an absolutely-positioned overlay over a parent. Use it consistently for all loading states across Geti. Geti UI Theming - [Meter](/components/feedback/Meter.md): Meter shows a visual representation of a quantity as a filled bar with a threshold-based colour. Use it to communicate levels - storage used, model accuracy, training progress - where the absolute value and threshold state both matter. React Spectrum Meter ↗Geti UI Theming - [ProgressBar](/components/feedback/ProgressBar.md): ProgressBar shows task progress in a horizontal track. Use it when users need a quick percentage-style signal for long-running operations. React Spectrum ProgressBar ↗Geti UI Theming - [ProgressCircle](/components/feedback/ProgressCircle.md): ProgressCircle communicates progress with a circular indicator. Use it in compact spaces such as cards, tiles, and inline status regions where a horizontal bar is too wide. React Spectrum ProgressCircle ↗Geti UI Theming - [Skeleton](/components/feedback/Skeleton.md): Skeleton renders a shimmering placeholder in place of content that is still loading. Use it to preserve the visual structure of a layout before data arrives - preventing jarring layout shifts and reducing perceived wait time. Geti UI Theming - [StatusLight](/components/feedback/StatusLight.md): StatusLight pairs a coloured dot with a text label to communicate the state of an entity. Use it in data rows, dashboards, and detail panels to show at a glance whether something is active, failed, in progress, or in another named state. React Spectrum StatusLight ↗Geti UI Theming - [Toast](/components/feedback/Toast.md): Toast provides programmatic transient notifications. Call toast.positive, toast.negative, toast.info, or toast.neutral from anywhere in your app and the message appears in the ToastContainer. Use toasts for brief feedback on actions that have completed - saves, errors, uploads, not for blocking decisions. React Spectrum Toast ↗Geti UI Theming - [ActionMenu](/components/navigation/ActionMenu.md): ActionMenu combines an icon-button trigger (⋯) with a dropdown menu in a single component. Use it for compact contextual action sets on cards, table rows, and list items where showing individual buttons would be too wide. React Spectrum ActionMenu ↗Geti UI Theming - [Breadcrumbs](/components/navigation/Breadcrumbs.md): Breadcrumbs show the user's current location in a hierarchy and let them navigate back to any ancestor page. Use them at the top of deep content hierarchies such as project → dataset → media views. React Spectrum Breadcrumbs ↗Geti UI Theming - [Link](/components/navigation/Link.md): Link renders a styled anchor for navigating to internal pages or external URLs. Use it wherever plain text navigation is needed - documentation, breadcrumb helpers, or inline contextual references. React Spectrum Link ↗Geti UI Theming - [MediaViewModes](/components/navigation/MediaViewModes.md): MediaViewModes provides a compact icon button that opens a menu to switch between grid and list view modes. Use it in media galleries, dataset browsers, and any content grid where users should be able to choose how items are displayed. - [Menu](/components/navigation/Menu.md): Menu presents a list of actions or options in a floating panel triggered by a button press. Use it for contextual actions on a selected item, editor commands, or any operation set that would be too wide to display inline. React Spectrum Menu ↗Geti UI Theming - [Tabs](/components/navigation/Tabs.md): Tabs organise sibling content into labelled panels. Only one panel is visible at a time. Use tabs when the sections are parallel - for example Overview / Details / Settings - rather than hierarchical. React Spectrum Tabs ↗Geti UI Theming - [AlertDialog](/components/overlays/AlertDialog.md): AlertDialog is a modal overlay for short messages that require an explicit user decision before proceeding. Use it for destructive confirmations, warnings, and informational acknowledgements, not for complex forms. React Spectrum AlertDialog ↗Geti UI Theming - [ContextualHelp](/components/overlays/ContextualHelp.md): ContextualHelp places a small icon button next to a UI element that opens a popover with additional guidance. Use it to clarify form fields, feature labels, or settings without cluttering the layout with persistent text. React Spectrum ContextualHelp ↗Geti UI Theming - [CustomPopover](/components/overlays/CustomPopover.md): CustomPopover is a fully styled popover built on react-aria-components. Unlike Popover, it gives you direct control over the panel appearance including optional arrows and custom widths. Use it when the standard Dialog-based structure is too restrictive. React Aria Popover ↗Geti UI Theming - [Dialog](/components/overlays/Dialog.md): Dialog presents content in a modal overlay that requires the user's attention before returning to the page. Use it for confirmation prompts, input forms, detail views, or any workflow that should visually interrupt the current context. React Spectrum Dialog ↗Geti UI Theming - [DialogContainer](/components/overlays/DialogContainer.md): DialogContainer hosts a Dialog that is opened and closed programmatically - without a persistent trigger element. Use it when the element that opens the dialog may unmount before the dialog closes, or when the dialog must be triggered from application logic rather than a direct user interaction. React Spectrum DialogContainer ↗Geti UI Theming - [FullscreenAction](/components/overlays/FullscreenAction.md): FullscreenAction provides a quiet icon button that opens its content in a fullscreen takeover dialog. It is intended for immersive experiences such as image viewers, video players, or rich editing tools that need the full screen. Geti UI Theming - [Popover](/components/overlays/Popover.md): Popover is a floating overlay that anchors to a trigger element and displays contextual content without leaving the current page. It is a thin wrapper around React Spectrum's DialogTrigger with type="popover" defaulted. React Spectrum DialogTrigger ↗Geti UI Theming - [Tooltip](/components/overlays/Tooltip.md): Tooltip shows a short text label when the user hovers or focuses a trigger element. Use it to clarify the purpose of icon buttons, truncated labels, or any UI element whose meaning is not immediately obvious. React Spectrum Tooltip ↗Geti UI Theming - [Accordion](/components/layouts/Accordion.md): Accordion groups multiple collapsible sections into a single stack. By default, opening one section closes the others. Use it for long settings pages, FAQs, or any content where showing everything at once would overwhelm the user. React Spectrum Accordion ↗Geti UI Theming - [Card](/components/layouts/Card.md): Card is a bordered, padded container for displaying a unit of summary content. Use it for project tiles, model list items, dataset summaries, or any item that should stand out visually as a discrete entity. - [Disclosure](/components/layouts/Disclosure.md): Disclosure is a single collapsible section consisting of a labelled heading and a panel that expands or collapses when the heading is pressed. Use it for optional supplementary content, advanced settings, or any section the user may not always need to see. React Spectrum Disclosure ↗Geti UI Theming - [Flex](/components/layouts/Flex.md): Flex is a CSS flexbox container that accepts Spectrum dimension tokens for gap, width, height, and other spacing values. Use it to build horizontal or vertical layouts with consistent Spectrum-aligned spacing. React Spectrum Flex ↗Geti UI Theming - [Grid](/components/layouts/Grid.md): Grid is a CSS grid container that accepts Spectrum dimension tokens for column and row templates, gap, and alignment. Use it when you need a two-dimensional layout such as a card gallery, form with multiple columns, or structured dashboard panel. React Spectrum Grid ↗Geti UI Theming - [Well](/components/layouts/Well.md): Well is a read-only content container that visually separates non-editable information from the surrounding UI. Use it for code samples, system-generated output, preformatted configuration text, or any content the user should read but not edit. React Spectrum Well ↗Geti UI Theming ## Blocks - [Installation](/blocks/installation.md): @geti-ui/blocks contains reusable application-level building blocks composed from @geti-ui/ui primitives. Use blocks for patterns like logs, project lists, and other workflows that are too opinionated for primitive UI components. - [Application logs](/blocks/logs.md): @geti-ui/blocks now provides composable, UI-only log viewer building blocks. No API/SSE fetching is built in - these components only render and filter logs you pass in as props. Use LogsContent to visualize application logs. This component allows users to search, filter, and copy logs. It also uses virtualized rendering to stay performant even when viewing thousands of log lines. Dialog integration Use LogsContent inside a Dialog opened by DialogTrigger from @geti-ui/ui. This dialog example intentionally renders 10000 log lines to demonstrate performance in an overlay context. Virtualized rendering and container height LogsContent virtualizes rows by rendering only the visible window plus a small buffer, rather than mounting every log line at once. For this to work correctly, the component must receive a bounded height from its parent. If the parent has no height constraint, the virtualizer cannot establish a stable viewport. Use this when logs are part of a dashboard card or split panel with a predictable size. A fixed height gives the virtualizer a stable viewport, improving scroll performance for large lists. Use this when logs share space with headers, toolbars, or side panels. The minHeight: 0 rule lets the virtualized viewport shrink correctly so scrolling remains smooth. Use this for investigation workflows where logs should take the full available dialog/page space. A larger viewport reduces scroll churn while keeping virtualized rendering efficient for thousands of rows. - [Overview](/blocks/tabs/overview.md): Use this composition when your app needs both: managed tab actions (rename/delete/export on active tab), andresponsive overflow handling (collapse hidden tabs into a picker). In practice, many dataset/project pages need both patterns at the same time. - [Managed tabs](/blocks/tabs/managed-tabs.md): Use ManagedTab when a selected tab should expose contextual actions (rename, export, delete, etc.) directly in the tab header. Typical application flow: Your app owns tab data and selected key.ManagedTab renders each tab label.The selected tab opens a menu with actions for that dataset/project.Your app handles action side effects (state updates, API calls, confirmation dialogs). - [Overflowable tabs](/blocks/tabs/overflowable-tabs.md): Use OverflowableTabs when tab count can exceed the available width. It keeps the selected tab visible and moves hidden tabs into a compact N more picker. This is useful for dataset/project lists that grow at runtime while keeping a stable header layout. - [Media overview](/blocks/media/media-overview.md): This page shows a realistic media browser that combines filtering, sorting, search, chips, a thumbnail grid with drag-and-drop uploads, and view mode controls - all wired together in a single surface. - [Media grid](/blocks/media/media-grid.md): Use MediaGrid to build production media browsers: dataset pages, selection surfaces, annotation queues, and review workflows. MediaGrid is UI-only. You bring data fetching, pagination, and domain actions. MediaGrid follows a tell-don't-ask API: provide totalItemsprovide getItemAt(index)provide renderItem(context) The grid does not assume how thumbnails should be rendered. - [Media column](/blocks/media/media-column.md): MediaColumn is a composition of MediaGrid with columns fixed to 1. Use it for vertical, one-item-per-row workflows (review queues, moderation inboxes, shot-by-shot inspection) while keeping the same data/selection model as MediaGrid. - [Media row](/blocks/media/media-row.md): MediaRow is a single-row, horizontally virtualized media layout. Use it for carousel-like timelines and strips (frame pickers, filmstrips, horizontal result browsers) while reusing the same item composition API as MediaGrid. - [Media table](/blocks/media/media-table.md): MediaTable presents media as one item per table row, with a thumbnail column enabled by default. Use it when users need media metadata scanning, sorting, and bulk actions in a denser layout than a thumbnail grid. If you need custom row composition, provide EntryComponent. The default implementation is exported as MediaEntry. - [Media grid dropzone overlay](/blocks/media/media-grid-dropzone.md): Use this pattern to combine MediaGrid custom item composition with drag-and-drop uploads. When the user drags files over the virtualized grid, show an overlay message: Drop videos or images here This pattern is useful for dataset ingestion pages where users can browse existing media and drop new files into the same surface. - [Media grid item](/blocks/media/media-grid-item.md): MediaGridItem is the composable item shell used inside MediaGrid. It provides: selectable pressable containerfour overlay slots (topLeft, topRight, bottomLeft, bottomRight)hover/selected behavior for top cornerspersistent top-right actions while menu is open Use it when you need domain-specific overlays and interactions (checkboxes, action menus, quality/status badges, IDs) but still want consistent grid item behavior. - [Media grid item parts](/blocks/media/media-grid-item-parts.md): @geti-ui/blocks provides small, styled building blocks for MediaGridItem overlays: MediaGridItemCheckboxMediaGridItemMenuMediaGridItemInfoMediaGridItemStatus Use these to keep corner UI consistent without repeating local styling. In application code, prefer these parts over ad-hoc corner markup so behavior remains consistent across media surfaces. - [Media grid thumbnail item](/blocks/media/media-grid-thumbnail-item.md): MediaGridThumbnailItem is the default thumbnail-focused item implementation for MediaGrid. It wraps MediaGridItem and renders image content with object-fit: cover. Use it when your application needs a fast default item renderer and you only want to customize overlays/actions. - [Media filter overview](/blocks/media/media-filter-overview.md): Use media filter blocks when you need both: user-friendly active filter chips,a rule-based filter dialog with field/operator/value rows,immediate apply behavior in your page. - [Filter chips](/blocks/media/media-filter-chips.md): FilterChips renders active filter rules as removable chips. - [Filter dialog](/blocks/media/media-filter-dialog.md): FilterDialog renders only the dialog content and emits valid rules immediately. You provide the trigger/popover wrapper (for example, with DialogTrigger). - [Filter row](/blocks/media/media-filter-row.md): FilterRow combines field, operator, and value editors into one reusable row. Use it directly or inside FilterDialog. - [Filter value editors](/blocks/media/media-filter-value-editors.md): FilterValueEditor renders default editors by field.valueType. Built-in editors: FilterValueTextFilterValueNumberFilterValueDateFilterValueSingleSelectFilterValueMultiSelect For custom fields, provide renderValueEditor and return your own editor component. - [Toolbar](/blocks/annotation/toolbar.md): https://react-spectrum.adobe.com/v3/MenuTrigger.html#long-press - [Zoom](/blocks/annotation/zoom.md): An interactive pan-and-zoom viewport for 2D content such as images, videos, and annotation canvases. Supports scroll-wheel zoom, pinch-to-zoom, middle-mouse-button panning, Ctrl+drag panning, and programmatic zoom control. - [Annotation](/blocks/annotation/annotation.md): SVG annotation renderer for overlaying shapes on images and canvases. Supports bounding boxes, circles, polygons, and oriented (rotated) bounding boxes with interactive hover highlighting, click-to-select, and a dimming mask that focuses attention on the hovered annotation. - [Prediction](/blocks/annotation/prediction.md) - [Model list](/blocks/models/model-list.md) - [Advanced Training Parameters](/blocks/models/advanced-training-parameters.md) - [Project list](/blocks/projects/project-list.md) - [Project menu](/blocks/projects/project-menu.md) ## Assets - [Assets](/assets/index.md): @geti-ui/ui ships production-ready SVG icons, illustration images, domain visuals, and primary-tool thumbnails as static assets. - [Icons](/assets/icons.md): The icons subpath exports every Geti custom SVG icon as a named React component, plus a curated set of Adobe Spectrum workflow icon re-exports. - [Images](/assets/images.md): Illustration SVGs and background/loading webp images for common Geti UI states. - [Domains](/assets/domains.md): SVG thumbnails representing each Geti annotation domain type. - [Primary Tools](/assets/primary-tools.md): Webp preview images for each Geti annotation primary tool. ## Charts - [Installation](/charts/installation.md): Install the charts package: @geti-ui/charts is published separately from @geti-ui/ui to keep chart dependencies (Recharts, D3) optional for teams that don't need them. - [Overview](/charts/overview.md): @geti-ui/charts provides Geti-themed chart components built on top of Recharts. All components are dark-mode first and integrate with the Geti design token system. - [Selection](/charts/selection.md): Chart selection is a reusable interaction layer for click-drag gestures. It is designed so charts can use the same primitives for: filtering subsetsregion inspectionfuture zoom/pan window selection - [Highlights](/charts/highlights.md): Interactive highlighting lets users focus on one or more data series by dimming the rest. The chart library supports two highlight modes - transient and pinned - and several interaction triggers. - [Theming](/charts/theming.md): @geti-ui/charts ships its own theme layer built on top of Geti design tokens. It integrates with ThemeProvider from @geti-ui/ui but can also be used standalone. - [Dataset subsets](/charts/theming/dataset-subsets.md): Use the built-in dataset subset palette utilities to keep training / validation / testing colors consistent across charts. Default mapping: train → greenvalidation / val → redtest → yellow - [Colors](/charts/theming/colors.md): Charts expose reusable color-scale presets and interpolation utilities so component-level color controls are consistent across the package. - [Primitives](/charts/primitives.md): Primitives are low-level building blocks. Use them when you need to assemble a chart layout that is not covered by the composition components. - [Legend](/charts/primitives/legend.md): GetiLegend is the themed legend primitive exported from @geti-ui/charts/primitives. It wraps Recharts Legend with Geti typography and default positioning so legend items match chart styling out of the box. - [Line chart](/charts/primitives/line-chart.md): Use Recharts LineChart with Geti primitives when you need custom low-level control. - [Area chart](/charts/primitives/area-chart.md): Use Recharts AreaChart with Geti primitives for custom fills and layered styling. - [Bar chart](/charts/primitives/bar-chart.md): Use Recharts BarChart primitives when you need full control over stack groups and mixed layers. - [Scatter chart](/charts/primitives/scatter-chart.md): Use Recharts ScatterChart with Geti primitives when you need bespoke scatter behavior. - [Pie chart](/charts/primitives/pie-chart.md): Use Recharts PieChart + Pie with Geti primitives when you want complete low-level control. - [Donut chart](/charts/primitives/donut-chart.md): Use Recharts PieChart + Pie with a non-zero innerRadius for full low-level control. - [Radar chart](/charts/primitives/radar-chart.md): Use Recharts RadarChart primitives when you need full control over polar axes, grid, and radar styling. Use PolarRadiusAxis domain={[0, 1]} for normalized scores, and PolarRadiusAxis domain={[0, 100]} for percentage-style metrics. - [RadialBar chart](/charts/primitives/radial-bar-chart.md): Use Recharts RadialBarChart primitives when you need full control over radial starts/ends, tracks, and labels. - [Meter chart](/charts/primitives/meter-chart.md): Use Recharts PieChart primitives to build custom half-donut meters with full control. - [Treemap chart](/charts/primitives/treemap-chart.md): Use Recharts Treemap primitives when you need custom content, tooltip behavior, and manual data shaping. - [Sparkline chart](/charts/primitives/sparkline-chart.md): Sparkline is exported from primitives and can be used as a compact inline primitive. - [Compositions](/charts/compositions.md): Compositions are fully assembled chart components. Import and render them with data - no Recharts wiring required. - [Line chart](/charts/compositions/line-chart.md): LineChart is a ready-to-use composition. It wires responsive container, axes, grid, tooltip, and series rendering for you. - [Area chart](/charts/compositions/area-chart.md): AreaChart is a ready-to-use composition with themed defaults, optional stacking, and optional fade gradients. - [Bar chart](/charts/compositions/bar-chart.md): BarChart is a ready-to-use composition for grouped or stacked categorical comparisons. - [Scatter chart](/charts/compositions/scatter-chart.md): ScatterChart is a ready-to-use composition for 2D point data, including optional Voronoi hover. - [Pie chart](/charts/compositions/pie-chart.md): PieChart is a ready-to-use composition for part-to-whole categorical distributions. - [Donut chart](/charts/compositions/donut-chart.md): DonutChart is a pie-style composition with a hollow center, useful for share-of-total summaries and score distributions. - [Radar chart](/charts/compositions/radar-chart.md): RadarChart is a ready-to-use composition for multi-metric profile comparisons across categories. Use radiusAxisProps={{ domain: [0, 1] }} for normalized scores, and radiusAxisProps={{ domain: [0, 100] }} for percentage-style metrics. - [RadialBar chart](/charts/compositions/radial-bar-chart.md): RadialBarChart is a ready-to-use composition for radial progress comparisons and score bands. - [Meter chart](/charts/compositions/meter-chart.md): MeterChart is a half-donut score indicator with a centered value label. - [Treemap chart](/charts/compositions/treemap-chart.md): TreemapChart is a composition for hierarchical proportional data. - [Sparkline chart](/charts/compositions/sparkline-chart.md): Sparkline is a compact, axis-free trend chart for inline usage. - [Training metrics chart](/charts/compositions/training-metrics-chart.md): TrainingMetricsChart is an ML-focused composition for train/validation/test metric timelines. - [Run comparison chart](/charts/compositions/run-comparison-chart.md): RunComparisonChart is an ML-oriented bar composition for comparing experiment runs. - [Confusion matrix chart](/charts/compositions/confusion-matrix-chart.md): ConfusionMatrixChart renders class-vs-class prediction quality using a color-intensity matrix. - [Precision recall curve](/charts/compositions/precision-recall-curve.md): PrecisionRecallCurve is an ML composition for evaluating classifier trade-offs across thresholds. - [ROC curve](/charts/compositions/roc-curve.md): RocCurve is an ML composition for visualizing true-positive-rate vs false-positive-rate trade-offs. - [Class AP chart](/charts/compositions/class-ap-chart.md): ClassAPChart visualizes per-class average precision as sortable horizontal bars. - [IoU distribution chart](/charts/compositions/iou-distribution-chart.md): IoUDistributionChart visualizes intersection-over-union quality as a histogram. - [Distribution ridge chart](/charts/compositions/distribution-ridge-chart.md): DistributionRidgeChart overlays multiple distribution curves with semi-transparent area fills. - [Error breakdown chart](/charts/compositions/error-breakdown-chart.md): ErrorBreakdownChart visualizes model error categories (false positives, false negatives, localization errors, classification errors). - [Confidence histogram](/charts/compositions/confidence-histogram.md): ConfidenceHistogram shows the distribution of prediction confidences and helps select thresholds. - [Class distribution chart](/charts/compositions/class-distribution-chart.md): ClassDistributionChart helps visualize long-tail class imbalance in datasets. - [Image brightness distribution](/charts/compositions/image-brightness-distribution.md): ImageBrightnessDistribution visualizes dataset brightness characteristics and highlights under/over exposure ranges. - [Image aspect ratio distribution](/charts/compositions/image-aspect-ratio-distribution.md): ImageAspectRatioDistribution visualizes dataset skew across image width/height ratios. - [Reliability diagram](/charts/compositions/reliability-diagram.md): ReliabilityDiagram compares predicted confidence against observed accuracy to assess calibration. - [Confidence vs IoU chart](/charts/compositions/confidence-vs-iou-chart.md): ConfidenceVsIoUChart helps diagnose overconfident incorrect predictions by plotting confidence against IoU. - [Embedding distance distribution](/charts/compositions/embedding-distance-distribution.md): EmbeddingDistanceDistribution visualizes nearest-neighbor distance distributions in embedding space. - [Latency percentile chart](/charts/compositions/latency-percentile-chart.md): LatencyPercentileChart visualizes P50/P95/P99 latency trends across runs or batch sizes. - [Throughput vs latency chart](/charts/compositions/throughput-vs-latency-chart.md): ThroughputVsLatencyChart helps analyze deployment trade-offs between throughput and latency. - [BBox size distribution chart](/charts/compositions/bbox-size-distribution-chart.md): BBoxSizeDistributionChart helps detect small-object bias and shape skew in detection datasets. - [Parallel coordinates](/charts/compositions/parallel-coordinates.md): ParallelCoordinates renders one polyline per row across multiple numeric axes (e.g. PCA components). It is useful for visually scanning clusters, outliers, and trends in high-dimensional embeddings. - [Custom Charts](/charts/custom-charts.md): Use primitives directly to build charts that are not covered by the composition components. ## Smart tools - [Installation](/smart-tools/installation.md): Install the package: - [OpenCV](/smart-tools/opencv.md): Smart tools use a custom OpenCV WASM build with a curated allow list of APIs. - [GrabCut](/smart-tools/grabcut.md): buildGrabcutInstance() creates a GrabCut tool instance backed by OpenCV. - [Inference Image](/smart-tools/inference-image.md): buildInferenceImageInstance() exposes OpenCV helpers for image preprocessing/postprocessing used in model workflows. - [Intelligent Scissors](/smart-tools/intelligent-scissors.md): buildIntelligentScissorsInstance() provides live-wire contour tracing based on image gradients. - [SSIM](/smart-tools/ssim.md): buildSSIMInstance() performs structural similarity matching in a region of interest. - [Watershed](/smart-tools/watershed.md): buildWatershedInstance() segments marker-driven regions into output polygons. - [RITM](/smart-tools/ritm.md): RITM is an iterative click-based segmentation model. - [Segment Anything](/smart-tools/segment-anything.md): Segment Anything in this package exposes encoder/decoder flows via a wrapper. ## Examples - [UI kitchensink](/examples/kitchensink-ui.md): Source of truth for UI kitchensink examples (no .stories runtime dependency). - [Form kitchensink](/examples/kitchensink-form.md): Source of truth for form kitchensink examples (no .stories runtime dependency). - [Date controls kitchensink](/examples/kitchensink-date-controls.md): Source of truth for date-control kitchensink examples (split view, no .stories runtime dependency). - [Color controls kitchensink](/examples/kitchensink-color-controls.md): Source of truth for color-control kitchensink examples (split view, no .stories runtime dependency). - [Data kitchensink](/examples/kitchensink-data.md): Source of truth for data kitchensink examples (no .stories runtime dependency). - [Overlays kitchensink](/examples/kitchensink-overlays.md): Source of truth for overlays kitchensink examples (no .stories runtime dependency). - [Feedback kitchensink](/examples/kitchensink-feedback.md): Source of truth for feedback kitchensink examples (no .stories runtime dependency). - [Navigation kitchensink](/examples/kitchensink-navigation.md): Source of truth for navigation kitchensink examples (no .stories runtime dependency). - [Layouts kitchensink](/examples/kitchensink-layouts.md): Source of truth for layouts kitchensink examples (no .stories runtime dependency). ## AI - [AI Integration](/ai/overview.md): Geti UI provides two complementary ways for AI coding agents to access component documentation, usage examples, and design system knowledge. - [MCP Server](/ai/mcp.md): @geti-ui/mcp is an MCP (Model Context Protocol) server that exposes the full Geti UI documentation to AI coding agents. It ships with all documentation bundled, so npx @geti-ui/mcp works out of the box with zero configuration. - [Skills](/ai/skills.md): Geti UI publishes a skills discovery endpoint that lets AI agents install curated instruction sets for the Geti design system libraries. Skills follow the .well-known/skills/ convention - a lightweight standard for distributing AI agent skills over HTTP.