Custom Front-end
Renderer types The renderer types the ObjectUI component packages register, for apps that render their own JSON with the SDK
SDK only
These types exist only inside an app that renders JSON with the ObjectUI SDK. None of them is in
sdui.manifest.json, so an ObjectStack page cannot use them. The components a page can hold are in the
component reference .
Importing @object-ui/components registers these types with the component registry ;
view-switcher, filter-ui and sort-ui register when @object-ui/plugin-view is imported. Each type's
inputs are declared in its ComponentRegistry.register call in the linked source file, and @object-ui/types
holds the schema types.
Type What it draws Source separatorVisual divider between content sections separator.tsx button-groupGroup multiple buttons together with shared styling button-group.tsx paginationNavigate through pages of content pagination.tsx navigation-menuAccessible navigation menu with dropdown support navigation-menu.tsx sidebarAn app-level sidebar region that works in any host sidebar.tsx divDeprecated generic container; use the Shadcn-based renderers instead div.tsx
Type What it draws Source inputBasic text input field for user data entry input.tsx textareaMulti-line text input for longer content textarea.tsx selectDropdown selection from a list of options select.tsx comboboxSearchable dropdown for selecting from a list of options combobox.tsx checkboxToggle selection with checkboxes checkbox.tsx radio-groupA set of checkable buttons where only one can be selected at a time radio-group.tsx switchToggle switch for binary options switch.tsx sliderSelect a value from a range slider.tsx date-pickerInput for selecting dates with a calendar popup date-picker.tsx input-otpOne-time password input with auto-focus input-otp.tsx commandFast command menu with search and keyboard navigation command.tsx formForm container with validation and submission handling form.tsx calendarDate selection component with single, multiple, and range modes calendar.tsx file-uploadModern file upload component with drag-and-drop support file-upload.tsx toggleTwo-state button for toggling options on and off toggle.tsx
Type What it draws Source aspect-ratioMaintain a consistent width to height ratio aspect-ratio.tsx pageFull-page container with title, description, and content sections page.tsx
Type What it draws Source avatarUser profile image or fallback initials avatar.tsx listDisplay a list of items list.tsx breadcrumbDisplay the current location within a navigational hierarchy breadcrumb.tsx kbdDisplay keyboard shortcuts and hotkeys kbd.tsx statisticDisplay key metrics and statistical values with trend indicators statistic.tsx tree-viewHierarchical tree structure for displaying nested data tree-view.tsx
Type What it draws Source loadingLoading spinner to indicate processing loading.tsx progressProgress bar to show completion status progress.tsx skeletonPlaceholder for loading content skeleton.tsx spinnerLoading spinner indicator spinner.tsx emptyEmpty state placeholder with optional action empty.tsx toastBrief notification messages that appear temporarily toast.tsx sonnerToast notifications using Sonner library sonner.tsx
Type What it draws Source dialogModal dialog overlay for focused interactions dialog.tsx drawerSliding panel from edge of screen drawer.tsx tooltipContextual information on hover tooltip.tsx popoverFloating content panel popover.tsx alert-dialogA modal dialog that interrupts the user with important content and expects a response alert-dialog.tsx sheetSlide-in panel from the edge of the screen sheet.tsx hover-cardDisplay rich content in a popup when hovering over a trigger hover-card.tsx context-menuDisplay a menu on right-click or long-press context-menu.tsx dropdown-menuDisplay a menu of actions or options triggered by a button dropdown-menu.tsx menubarHorizontal menu bar with dropdown menus menubar.tsx
Type What it draws Source collapsibleToggle visibility of content collapsible.tsx toggle-groupA group of toggle buttons where one or more can be selected toggle-group.tsx
Type What it draws Source header-barApplication header with sidebar trigger and breadcrumb navigation header-bar.tsx
Type What it draws Source data-tableEnterprise-grade data table with sorting, filtering, pagination, and row actions data-table.tsx carouselSlideshow component for cycling through content carousel.tsx scroll-areaCustomizable scrollable container with styled scrollbars scroll-area.tsx resizableResizable panel groups with draggable handles resizable.tsx filter-builderVisual query builder for constructing complex filter conditions filter-builder.tsx view-switcherSwitch between multiple view configurations in one container index.tsx filter-uiBuild flexible filter panels for list and view toolbars index.tsx sort-uiConfigure sorting with dropdowns or button toggles index.tsx
ObjectStack