THE COMPONENT WORKBENCH Real controls.
Real controls.
Your composition.
The same installed primitives used by ROM Studio, ready for a Svelte application.
Resource form
Compact labels, editable values and explicit state.
CURRENT LOCAL VALUES
{
"title": "Ship something meaningful",
"priority": "normal",
"enabled": true,
"reviewed": false,
"note": ""
}svelte
<script lang="ts">
import { Input, Label, Switch } from "rom-studio/controls";
import "rom-studio/styles";
let title = $state("");
let enabled = $state(true);
</script>
<Label for="title">Title</Label>
<Input id="title" bind:value={title} />
<Label for="enabled">Enabled</Label>
<Switch id="enabled" bind:checked={enabled} />Actions & status
Consistent buttons and clear feedback.
ReadyLocal stateNo backend
ts
import { Button, Badge } from "rom-studio/controls";Bounded values
A labeled range input with an exact numeric value.
svelte
<Input type="range" aria-label="Confidence" bind:value={confidence} min={0} max={100} />Documentation tabs
Built on the installed shadcn-svelte tab primitive.
Controls manage interaction. The application owns authorization, persistence and domain policy.
ts
import * as Tabs from "rom-ui/primitives/tabs";Every public component
Descriptions, public imports and source declarations for ROM UI 0.1.0-alpha.7.
InputControls · Enter a single text or numeric value.ButtonControls · Invoke a command or follow a link.TextareaControls · Enter multiline text.NativeSelectControls · Choose an option with a native select.NativeSelectOptionControls · Define a native select option.NativeSelectOptGroupControls · Group related native options.CheckboxControls · Choose a checked, unchecked or indeterminate state.SliderControls · Select a numeric value or range.LabelControls · Give a control a visible label.BadgeControls · Show a compact status or category.SwitchControls · Change a boolean setting.ResponsiveDetailsCompositions · Present host-owned details with responsive navigation.HistoryListCompositions · Present entries from a host-owned history.SelectionCardCompositions · Present selectable items and explicit host commands.LayoutControlsCompositions · Present host-supplied layout commands.ReferencePickerCompositions · Look up Resource references through a host-supplied lookup.ConversationLayoutCompositions · Arrange a conversation and supporting panels.ConversationLayoutChat · Arrange a conversation and supporting panels.ChatComposerChat · Compose a message and pass submission to the host.ChatMessagesChat · Present host-supplied conversation messages.AgentActivityChat · Present host-supplied agent activity.FlowChoiceNodeFlow · Present choices inside a Svelte Flow graph.FlowFitFlow · Fit a Svelte Flow viewport.MapMaps · Create a MapLibre viewport with host-supplied styles and viewport callbacks.MapMarkerMaps · Place a marker at a geographic coordinate.MarkerContentMaps · Render custom content inside a map marker.MarkerPopupMaps · Show a popup attached to a marker.MarkerTooltipMaps · Show a tooltip attached to a marker.MarkerLabelMaps · Render a text label for a marker.MapControlsMaps · Present viewport controls for zoom, orientation and location.MapPopupMaps · Show a popup at a map coordinate.MapRouteMaps · Render a route from host-supplied coordinates.RouteProgressMaps · Render progress along a route.RouteMarkerMaps · Place a marker along a route.MapClusterLayerMaps · Group nearby GeoJSON points in a map layer.MapArcMaps · Render arcs between geographic points.MapGeoJSONMaps · Render host-supplied GeoJSON data as map layers.ResourceMapMaps · Present Resource points through MapLibre.ROMUIFlexFlex · Compose resizable panels using a host-owned controller.AlertPrimitives · Alert renders the alert part of the alert composition.AlertDescriptionPrimitives · AlertDescription renders the alert description part of the alert composition.AlertTitlePrimitives · AlertTitle renders the alert title part of the alert composition.AlertActionPrimitives · AlertAction renders the alert action part of the alert composition.AlertDialogPrimitives · AlertDialog renders the alert dialog part of the alert-dialog composition.AlertDialogTitlePrimitives · AlertDialogTitle renders the alert dialog title part of the alert-dialog composition.AlertDialogActionPrimitives · AlertDialogAction renders the alert dialog action part of the alert-dialog composition.AlertDialogCancelPrimitives · AlertDialogCancel renders the alert dialog cancel part of the alert-dialog composition.AlertDialogPortalPrimitives · AlertDialogPortal renders the alert dialog portal part of the alert-dialog composition.AlertDialogFooterPrimitives · AlertDialogFooter renders the alert dialog footer part of the alert-dialog composition.AlertDialogHeaderPrimitives · AlertDialogHeader renders the alert dialog header part of the alert-dialog composition.AlertDialogTriggerPrimitives · AlertDialogTrigger renders the alert dialog trigger part of the alert-dialog composition.AlertDialogOverlayPrimitives · AlertDialogOverlay renders the alert dialog overlay part of the alert-dialog composition.AlertDialogContentPrimitives · AlertDialogContent renders the alert dialog content part of the alert-dialog composition.AlertDialogDescriptionPrimitives · AlertDialogDescription renders the alert dialog description part of the alert-dialog composition.AlertDialogMediaPrimitives · AlertDialogMedia renders the alert dialog media part of the alert-dialog composition.BadgePrimitives · Show a compact status or category.BreadcrumbPrimitives · Breadcrumb renders the breadcrumb part of the breadcrumb composition.BreadcrumbEllipsisPrimitives · BreadcrumbEllipsis renders the breadcrumb ellipsis part of the breadcrumb composition.BreadcrumbItemPrimitives · BreadcrumbItem renders the breadcrumb item part of the breadcrumb composition.BreadcrumbSeparatorPrimitives · BreadcrumbSeparator renders the breadcrumb separator part of the breadcrumb composition.BreadcrumbLinkPrimitives · BreadcrumbLink renders the breadcrumb link part of the breadcrumb composition.BreadcrumbListPrimitives · BreadcrumbList renders the breadcrumb list part of the breadcrumb composition.BreadcrumbPagePrimitives · BreadcrumbPage renders the breadcrumb page part of the breadcrumb composition.ButtonPrimitives · Invoke a command or follow a link.RootPrimitives · Root renders the card part of the card composition.CardContentPrimitives · CardContent renders the card content part of the card composition.CardDescriptionPrimitives · CardDescription renders the card description part of the card composition.CardFooterPrimitives · CardFooter renders the card footer part of the card composition.CardHeaderPrimitives · CardHeader renders the card header part of the card composition.CardTitlePrimitives · CardTitle renders the card title part of the card composition.CardActionPrimitives · CardAction renders the card action part of the card composition.CheckboxPrimitives · Choose a checked, unchecked or indeterminate state.CommandPrimitives · Command renders the command part of the command composition.CommandDialogPrimitives · CommandDialog renders the command dialog part of the command composition.CommandEmptyPrimitives · CommandEmpty renders the command empty part of the command composition.CommandGroupPrimitives · CommandGroup renders the command group part of the command composition.CommandItemPrimitives · CommandItem renders the command item part of the command composition.CommandLinkItemPrimitives · CommandLinkItem renders the command link item part of the command composition.CommandInputPrimitives · CommandInput renders the command input part of the command composition.CommandListPrimitives · CommandList renders the command list part of the command composition.CommandSeparatorPrimitives · CommandSeparator renders the command separator part of the command composition.CommandShortcutPrimitives · CommandShortcut renders the command shortcut part of the command composition.CommandLoadingPrimitives · CommandLoading renders the command loading part of the command composition.DialogPrimitives · Dialog renders the dialog part of the dialog composition.DialogTitlePrimitives · DialogTitle renders the dialog title part of the dialog composition.DialogPortalPrimitives · DialogPortal renders the dialog portal part of the dialog composition.DialogFooterPrimitives · DialogFooter renders the dialog footer part of the dialog composition.DialogHeaderPrimitives · DialogHeader renders the dialog header part of the dialog composition.DialogTriggerPrimitives · DialogTrigger renders the dialog trigger part of the dialog composition.DialogOverlayPrimitives · DialogOverlay renders the dialog overlay part of the dialog composition.DialogContentPrimitives · DialogContent renders the dialog content part of the dialog composition.DialogDescriptionPrimitives · DialogDescription renders the dialog description part of the dialog composition.DialogClosePrimitives · DialogClose renders the dialog close part of the dialog composition.DropdownMenuCheckboxGroupPrimitives · DropdownMenuCheckboxGroup renders the dropdown menu checkbox group part of the dropdown-menu composition.DropdownMenuCheckboxItemPrimitives · DropdownMenuCheckboxItem renders the dropdown menu checkbox item part of the dropdown-menu composition.DropdownMenuContentPrimitives · DropdownMenuContent renders the dropdown menu content part of the dropdown-menu composition.DropdownMenuPortalPrimitives · DropdownMenuPortal renders the dropdown menu portal part of the dropdown-menu composition.DropdownMenuPrimitives · DropdownMenu renders the dropdown menu part of the dropdown-menu composition.DropdownMenuGroupPrimitives · DropdownMenuGroup renders the dropdown menu group part of the dropdown-menu composition.DropdownMenuItemPrimitives · DropdownMenuItem renders the dropdown menu item part of the dropdown-menu composition.DropdownMenuLabelPrimitives · DropdownMenuLabel renders the dropdown menu label part of the dropdown-menu composition.DropdownMenuRadioGroupPrimitives · DropdownMenuRadioGroup renders the dropdown menu radio group part of the dropdown-menu composition.DropdownMenuRadioItemPrimitives · DropdownMenuRadioItem renders the dropdown menu radio item part of the dropdown-menu composition.DropdownMenuSeparatorPrimitives · DropdownMenuSeparator renders the dropdown menu separator part of the dropdown-menu composition.DropdownMenuShortcutPrimitives · DropdownMenuShortcut renders the dropdown menu shortcut part of the dropdown-menu composition.DropdownMenuSubPrimitives · DropdownMenuSub renders the dropdown menu sub part of the dropdown-menu composition.DropdownMenuSubContentPrimitives · DropdownMenuSubContent renders the dropdown menu sub content part of the dropdown-menu composition.DropdownMenuSubTriggerPrimitives · DropdownMenuSubTrigger renders the dropdown menu sub trigger part of the dropdown-menu composition.DropdownMenuTriggerPrimitives · DropdownMenuTrigger renders the dropdown menu trigger part of the dropdown-menu composition.DropdownMenuGroupHeadingPrimitives · DropdownMenuGroupHeading renders the dropdown menu group heading part of the dropdown-menu composition.InputPrimitives · Enter a single text or numeric value.InputGroupPrimitives · InputGroup renders the input group part of the input-group composition.InputGroupAddonPrimitives · InputGroupAddon renders the input group addon part of the input-group composition.InputGroupButtonPrimitives · InputGroupButton renders the input group button part of the input-group composition.InputGroupInputPrimitives · InputGroupInput renders the input group input part of the input-group composition.InputGroupTextPrimitives · InputGroupText renders the input group text part of the input-group composition.InputGroupTextareaPrimitives · InputGroupTextarea renders the input group textarea part of the input-group composition.LabelPrimitives · Give a control a visible label.NativeSelectPrimitives · Choose an option with a native select.NativeSelectOptionPrimitives · Define a native select option.NativeSelectOptGroupPrimitives · Group related native options.PopoverPrimitives · Popover renders the popover part of the popover composition.PopoverContentPrimitives · PopoverContent renders the popover content part of the popover composition.PopoverDescriptionPrimitives · PopoverDescription renders the popover description part of the popover composition.PopoverHeaderPrimitives · PopoverHeader renders the popover header part of the popover composition.PopoverTitlePrimitives · PopoverTitle renders the popover title part of the popover composition.PopoverTriggerPrimitives · PopoverTrigger renders the popover trigger part of the popover composition.PopoverClosePrimitives · PopoverClose renders the popover close part of the popover composition.PopoverPortalPrimitives · PopoverPortal renders the popover portal part of the popover composition.SelectPrimitives · Select renders the select part of the select composition.SelectGroupPrimitives · SelectGroup renders the select group part of the select composition.SelectLabelPrimitives · SelectLabel renders the select label part of the select composition.SelectItemPrimitives · SelectItem renders the select item part of the select composition.SelectContentPrimitives · SelectContent renders the select content part of the select composition.SelectTriggerPrimitives · SelectTrigger renders the select trigger part of the select composition.SelectSeparatorPrimitives · SelectSeparator renders the select separator part of the select composition.SelectScrollDownButtonPrimitives · SelectScrollDownButton renders the select scroll down button part of the select composition.SelectScrollUpButtonPrimitives · SelectScrollUpButton renders the select scroll up button part of the select composition.SelectGroupHeadingPrimitives · SelectGroupHeading renders the select group heading part of the select composition.SelectPortalPrimitives · SelectPortal renders the select portal part of the select composition.SelectValuePrimitives · SelectValue renders the select value part of the select composition.SeparatorPrimitives · Separator renders the separator part of the separator composition.SheetPrimitives · Sheet renders the sheet part of the sheet composition.SheetClosePrimitives · SheetClose renders the sheet close part of the sheet composition.SheetTriggerPrimitives · SheetTrigger renders the sheet trigger part of the sheet composition.SheetPortalPrimitives · SheetPortal renders the sheet portal part of the sheet composition.SheetOverlayPrimitives · SheetOverlay renders the sheet overlay part of the sheet composition.SheetContentPrimitives · SheetContent renders the sheet content part of the sheet composition.SheetHeaderPrimitives · SheetHeader renders the sheet header part of the sheet composition.SheetFooterPrimitives · SheetFooter renders the sheet footer part of the sheet composition.SheetTitlePrimitives · SheetTitle renders the sheet title part of the sheet composition.SheetDescriptionPrimitives · SheetDescription renders the sheet description part of the sheet composition.SidebarContentPrimitives · SidebarContent renders the sidebar content part of the sidebar composition.SidebarFooterPrimitives · SidebarFooter renders the sidebar footer part of the sidebar composition.SidebarGroupPrimitives · SidebarGroup renders the sidebar group part of the sidebar composition.SidebarGroupActionPrimitives · SidebarGroupAction renders the sidebar group action part of the sidebar composition.SidebarGroupContentPrimitives · SidebarGroupContent renders the sidebar group content part of the sidebar composition.SidebarGroupLabelPrimitives · SidebarGroupLabel renders the sidebar group label part of the sidebar composition.SidebarHeaderPrimitives · SidebarHeader renders the sidebar header part of the sidebar composition.SidebarInputPrimitives · SidebarInput renders the sidebar input part of the sidebar composition.SidebarInsetPrimitives · SidebarInset renders the sidebar inset part of the sidebar composition.SidebarMenuPrimitives · SidebarMenu renders the sidebar menu part of the sidebar composition.SidebarMenuActionPrimitives · SidebarMenuAction renders the sidebar menu action part of the sidebar composition.SidebarMenuBadgePrimitives · SidebarMenuBadge renders the sidebar menu badge part of the sidebar composition.SidebarMenuButtonPrimitives · SidebarMenuButton renders the sidebar menu button part of the sidebar composition.SidebarMenuItemPrimitives · SidebarMenuItem renders the sidebar menu item part of the sidebar composition.SidebarMenuSkeletonPrimitives · SidebarMenuSkeleton renders the sidebar menu skeleton part of the sidebar composition.SidebarMenuSubPrimitives · SidebarMenuSub renders the sidebar menu sub part of the sidebar composition.SidebarMenuSubButtonPrimitives · SidebarMenuSubButton renders the sidebar menu sub button part of the sidebar composition.SidebarMenuSubItemPrimitives · SidebarMenuSubItem renders the sidebar menu sub item part of the sidebar composition.SidebarProviderPrimitives · SidebarProvider renders the sidebar provider part of the sidebar composition.SidebarRailPrimitives · SidebarRail renders the sidebar rail part of the sidebar composition.SidebarPrimitives · Sidebar renders the sidebar part of the sidebar composition.SidebarSeparatorPrimitives · SidebarSeparator renders the sidebar separator part of the sidebar composition.SidebarTriggerPrimitives · SidebarTrigger renders the sidebar trigger part of the sidebar composition.SkeletonPrimitives · Skeleton renders the skeleton part of the skeleton composition.SliderPrimitives · Select a numeric value or range.SwitchPrimitives · Change a boolean setting.TablePrimitives · Table renders the table part of the table composition.TableBodyPrimitives · TableBody renders the table body part of the table composition.TableCaptionPrimitives · TableCaption renders the table caption part of the table composition.TableCellPrimitives · TableCell renders the table cell part of the table composition.TableFooterPrimitives · TableFooter renders the table footer part of the table composition.TableHeadPrimitives · TableHead renders the table head part of the table composition.TableHeaderPrimitives · TableHeader renders the table header part of the table composition.TableRowPrimitives · TableRow renders the table row part of the table composition.RootPrimitives · Root renders the tabs part of the tabs composition.TabsContentPrimitives · TabsContent renders the tabs content part of the tabs composition.TabsListPrimitives · TabsList renders the tabs list part of the tabs composition.TabsTriggerPrimitives · TabsTrigger renders the tabs trigger part of the tabs composition.TextareaPrimitives · Enter multiline text.TooltipPrimitives · Tooltip renders the tooltip part of the tooltip composition.TooltipTriggerPrimitives · TooltipTrigger renders the tooltip trigger part of the tooltip composition.TooltipContentPrimitives · TooltipContent renders the tooltip content part of the tooltip composition.TooltipProviderPrimitives · TooltipProvider renders the tooltip provider part of the tooltip composition.TooltipPortalPrimitives · TooltipPortal renders the tooltip portal part of the tooltip composition.Studio ReferencePickerStudio · Canonical ROM reference normalization around the shared picker
Compose the application around them.
Use public compositions for responsive details, selection, history and conversations.
Read the composition guide