[ { "name": "Button", "slug": "button", "layer": "core", "category": "actions", "group": "Actions", "status": "stable", "aliases": [ "IconButton" ], "summary": "A button for an action, with or without a label; its color says what kind of action it is, and its size follows where it sits.", "documented": true, "exports": [ "Button" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/button", "markdown": "https://raft-design.botiverse.build/components/button.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/button", "related": [ "dropdown-menu", "alert-dialog", "tooltip", "spinner", "composer" ] }, { "name": "FloatButton", "slug": "float-button", "layer": "core", "category": "actions", "group": "Actions", "status": "deprecated", "aliases": [ "FAB", "Floating action button", "FloatButtonGroup" ], "summary": "Deprecated. A button that floats over the page content; actions belong in the page's header or toolbar instead.", "documented": true, "exports": [ "FloatButton", "FloatButtonGroup" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/float-button", "markdown": "https://raft-design.botiverse.build/components/float-button.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/float-button", "related": [ "panel", "button" ], "replacedBy": "panel" }, { "name": "Checkbox", "slug": "checkbox", "layer": "core", "category": "inputs", "group": "Inputs", "status": "stable", "aliases": [], "summary": "A square box for a yes or no that is saved with a form, or an option attached to an action.", "documented": true, "exports": [ "Checkbox", "CheckboxIndicator" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/checkbox", "markdown": "https://raft-design.botiverse.build/components/checkbox.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/checkbox", "related": [ "switch", "radio-group", "field", "composer" ] }, { "name": "Combobox", "slug": "combobox", "layer": "core", "category": "inputs", "group": "Inputs", "status": "stable", "aliases": [], "summary": "A searchable list of values built from parts, for filters with search and for picking a few of many values as chips.", "documented": true, "exports": [ "Combobox", "ComboboxChip", "ComboboxChipRemove", "ComboboxChips", "ComboboxClear", "ComboboxCollection", "ComboboxControl", "ComboboxContent", "ComboboxEmpty", "ComboboxGroup", "ComboboxGroupLabel", "ComboboxHeader", "ComboboxInput", "ComboboxInputGroup", "ComboboxItem", "ComboboxItemIndicator", "ComboboxLabel", "ComboboxList", "ComboboxPopup", "ComboboxPortal", "ComboboxRow", "ComboboxSeparator", "ComboboxTrigger", "ComboboxTriggerCount", "ComboboxTriggerIndicator", "ComboboxValue" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/combobox", "markdown": "https://raft-design.botiverse.build/components/combobox.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/combobox", "related": [ "select", "combobox-select", "picker-trigger-button", "field" ] }, { "name": "ComboboxSelect", "slug": "combobox-select", "layer": "core", "category": "inputs", "group": "Inputs", "status": "experimental", "aliases": [], "summary": "A ready-made searchable select driven by an array of options, for one or a few of many values, with groups, remote search and creation.", "documented": true, "exports": [ "ComboboxSelect" ], "import": "raft-ui/wip", "docs": "https://raft-design.botiverse.build/components/combobox-select", "markdown": "https://raft-design.botiverse.build/components/combobox-select.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/combobox-select", "related": [ "select", "combobox", "field" ] }, { "name": "Field", "slug": "field", "layer": "core", "category": "inputs", "group": "Inputs", "status": "stable", "aliases": [], "summary": "The label, help text and error around a form control, wired to it for assistive technology.", "documented": true, "exports": [ "Field", "FieldControl", "FieldDescription", "FieldError", "FieldItem", "FieldLabel", "FieldValidity" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/field", "markdown": "https://raft-design.botiverse.build/components/field.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/field", "related": [ "input", "input-group", "textarea", "select", "checkbox", "radio-group", "switch" ] }, { "name": "Input", "slug": "input", "layer": "core", "category": "inputs", "group": "Inputs", "status": "stable", "aliases": [ "TextField" ], "summary": "A single-line text field, 44px high with a 1.5px ink border, for typing one value.", "documented": true, "exports": [ "Input" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/input", "markdown": "https://raft-design.botiverse.build/components/input.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/input", "related": [ "field", "input-group", "textarea", "select" ] }, { "name": "InputGroup", "slug": "input-group", "layer": "core", "category": "inputs", "group": "Inputs", "status": "stable", "aliases": [], "summary": "An input with a fixed prefix, suffix, icon or button inside the same bordered box, such as a domain, a unit or a search icon.", "documented": true, "exports": [ "InputGroup", "InputGroupAddon", "InputGroupInput" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/input-group", "markdown": "https://raft-design.botiverse.build/components/input-group.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/input-group", "related": [ "input", "field", "search" ] }, { "name": "Label", "slug": "label", "layer": "core", "category": "inputs", "group": "Inputs", "status": "stable", "aliases": [ "LabelAsterisk", "LabelOptional", "LabelSub" ], "summary": "A standalone form label in the field-label style, with optional markers for a required or optional value and a line of secondary text.", "documented": true, "exports": [ "Label", "LabelAsterisk", "LabelOptional", "LabelSub" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/label", "markdown": "https://raft-design.botiverse.build/components/label.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/label", "related": [ "field", "checkbox", "radio-group", "switch", "input" ] }, { "name": "PickerTriggerButton", "slug": "picker-trigger-button", "layer": "core", "category": "inputs", "group": "Inputs", "status": "stable", "aliases": [ "Filter", "Filter button", "Filter trigger" ], "summary": "The compact 32px button that opens a Select or Combobox as a filter above a list, outlined until the filter is applied and filled once it is.", "documented": true, "exports": [ "PickerTriggerButton" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/picker-trigger-button", "markdown": "https://raft-design.botiverse.build/components/picker-trigger-button.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/picker-trigger-button", "related": [ "select", "combobox", "combobox-select", "button" ] }, { "name": "RadioGroup", "slug": "radio-group", "layer": "core", "category": "inputs", "group": "Inputs", "status": "stable", "aliases": [ "Radio" ], "summary": "A group of round options for choosing one of 2 to 5 answers that is submitted with a form, each with room for a sentence.", "documented": true, "exports": [ "RadioGroup", "RadioGroupIndicator", "RadioGroupItem" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/radio-group", "markdown": "https://raft-design.botiverse.build/components/radio-group.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/radio-group", "related": [ "checkbox", "switch", "select", "segmented-control", "field" ] }, { "name": "Select", "slug": "select", "layer": "core", "category": "inputs", "group": "Inputs", "status": "stable", "aliases": [], "summary": "A field that opens a list of values and shows the one chosen, for picking one of up to 10 values or a few of several.", "documented": true, "exports": [ "Select", "SelectArrow", "SelectContent", "SelectGroup", "SelectGroupLabel", "SelectIcon", "SelectItem", "SelectItemIndicator", "SelectItemLeading", "SelectItemText", "SelectLabel", "SelectList", "SelectPopup", "SelectPortal", "SelectScrollDownArrow", "SelectScrollUpArrow", "SelectSeparator", "SelectTrigger", "SelectValue" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/select", "markdown": "https://raft-design.botiverse.build/components/select.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/select", "related": [ "combobox", "combobox-select", "dropdown-menu", "radio-group", "field", "picker-trigger-button" ] }, { "name": "Switch", "slug": "switch", "layer": "core", "category": "inputs", "group": "Inputs", "status": "stable", "aliases": [], "summary": "A round on/off control for a setting that applies the moment it is flipped.", "documented": true, "exports": [ "Switch", "SwitchThumb" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/switch", "markdown": "https://raft-design.botiverse.build/components/switch.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/switch", "related": [ "checkbox", "radio-group", "list-row", "field" ] }, { "name": "Textarea", "slug": "textarea", "layer": "core", "category": "inputs", "group": "Inputs", "status": "stable", "aliases": [], "summary": "A multi-line text field for forms, at least 96px high, with an optional character counter.", "documented": true, "exports": [ "Textarea", "TextareaCounter", "TextareaGroup" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/textarea", "markdown": "https://raft-design.botiverse.build/components/textarea.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/textarea", "related": [ "input", "field", "composer" ] }, { "name": "ToggleGroup", "slug": "toggle-group", "layer": "core", "category": "inputs", "group": "Inputs", "status": "stable", "aliases": [ "Toggle buttons", "Toolbar toggles" ], "summary": "A compact row of toggle buttons in a gray track, each one on or off on its own, or one of them or none; a pressed button is a yellow sticker.", "documented": true, "exports": [ "ToggleGroup", "ToggleGroupItem", "ToggleGroupLabel" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/toggle-group", "markdown": "https://raft-design.botiverse.build/components/toggle-group.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/toggle-group", "related": [ "segmented-control", "checkbox", "switch", "picker-trigger-button" ] }, { "name": "AppRail", "slug": "app-rail", "layer": "core", "category": "navigation", "group": "Navigation", "status": "stable", "aliases": [ "Rail" ], "summary": "The leftmost desktop column, on the frame — the workspace tile at the top, the product's destinations in the middle, and notifications, help and settings at the bottom.", "documented": true, "exports": [ "AppRailFooter", "AppRailHeader", "AppRailItem", "AppRailItemAttention", "AppRailItemBadge", "AppRailItemIcon", "AppRailItemIndicator", "AppRailItemLabel", "AppRailNav", "AppRailRoot" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/app-rail", "markdown": "https://raft-design.botiverse.build/components/app-rail.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/app-rail", "related": [ "sidebar", "mobile-nav", "tooltip", "notification-center" ] }, { "name": "MobileNav", "slug": "mobile-nav", "layer": "core", "category": "navigation", "group": "Navigation", "status": "stable", "aliases": [ "TabBar", "Tab bar", "Bottom navigation" ], "summary": "The phone tab bar — up to 5 destinations at the bottom of a top-level page, the selected one's icon in a yellow sticker.", "documented": true, "exports": [ "MobileNavItem", "MobileNavLabel", "MobileNavRoot" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/mobile-nav", "markdown": "https://raft-design.botiverse.build/components/mobile-nav.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/mobile-nav", "related": [ "app-rail", "panel" ] }, { "name": "SegmentedControl", "slug": "segmented-control", "layer": "core", "category": "navigation", "group": "Navigation", "status": "stable", "aliases": [ "Segmented button" ], "summary": "2 to 4 segments in a gray track that switch how the same content is shown, in place; the selected segment is a yellow sticker.", "documented": true, "exports": [ "SegmentedControl", "SegmentedControlCount", "SegmentedControlItem", "SegmentedControlLabel" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/segmented-control", "markdown": "https://raft-design.botiverse.build/components/segmented-control.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/segmented-control", "related": [ "tabs", "radio-group", "select" ] }, { "name": "Sidebar", "slug": "sidebar", "layer": "core", "category": "navigation", "group": "Navigation", "status": "stable", "aliases": [ "Sidebar row" ], "summary": "The desktop column next to the rail that lists what the selected destination contains, with rows that mark where you are, what is unread and what mentions you.", "documented": true, "exports": [ "SidebarBody", "SidebarLiveActivity", "SidebarContent", "SidebarGroupLabel", "SidebarHeader", "SidebarHeaderTitle", "SidebarItemAside", "SidebarItemCount", "SidebarItemCountSeparator", "SidebarItemChannelIcon", "SidebarItem", "SidebarItemIcon", "SidebarItemIndicator", "SidebarItemContent", "SidebarItemMeta", "SidebarItemMetaIcon", "SidebarItemStatus", "SidebarItemSubtitle", "SidebarItemThreadCount", "SidebarItemTitle", "SidebarList", "SidebarMenu", "SidebarMenuAside", "SidebarMenuCount", "SidebarMenuIcon", "SidebarMenuTitle", "SidebarRoot", "SidebarControl", "SidebarSection", "SidebarSectionEmpty", "SidebarSectionControl", "SidebarSectionControls", "SidebarSectionDisclosure", "SidebarSectionChevron", "SidebarSectionCount", "SidebarSectionHeader", "SidebarSectionAttention", "SidebarSectionTitle", "SidebarSectionTrailing" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/sidebar", "markdown": "https://raft-design.botiverse.build/components/sidebar.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/sidebar", "related": [ "app-rail", "list-row", "panel", "badge", "avatar" ] }, { "name": "Steps", "slug": "steps", "layer": "core", "category": "navigation", "group": "Navigation", "status": "stable", "aliases": [ "Stepper" ], "summary": "Where someone is in a short flow of 3 to 5 steps — finished steps in ink, the current step as a yellow sticker, the steps ahead outlined.", "documented": true, "exports": [ "OtterIndicator", "Step", "Steps" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/steps", "markdown": "https://raft-design.botiverse.build/components/steps.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/steps", "related": [ "progress", "tabs" ] }, { "name": "Tabs", "slug": "tabs", "layer": "core", "category": "navigation", "group": "Navigation", "status": "stable", "aliases": [], "summary": "A row of tabs for the sections of one page, each with its own content; the selected tab is a yellow sticker, and the row scrolls when the tabs don't fit.", "documented": true, "exports": [ "SortableTabsList", "SortableTabsTab", "Tabs", "TabsLabel", "TabsList", "TabsPanel", "TabsTab" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/tabs", "markdown": "https://raft-design.botiverse.build/components/tabs.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/tabs", "related": [ "segmented-control", "conversation-panel", "mobile-nav" ] }, { "name": "AlertDialog", "slug": "alert-dialog", "layer": "core", "category": "overlays", "group": "Overlays", "status": "stable", "aliases": [ "ConfirmDialog", "Confirmation" ], "summary": "A small centered dialog that asks people to confirm an action that cannot be undone or that interrupts work, with a confirm button colored by the consequence.", "documented": true, "exports": [ "AlertDialog", "AlertDialogAction", "AlertDialogBody", "AlertDialogCancel", "AlertDialogClose", "AlertDialogContent", "AlertDialogDescription", "AlertDialogFooter", "AlertDialogHeader", "AlertDialogOverlay", "AlertDialogPortal", "AlertDialogTitle", "AlertDialogTrigger" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/alert-dialog", "markdown": "https://raft-design.botiverse.build/components/alert-dialog.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/alert-dialog", "related": [ "dialog", "button", "banner", "dropdown-menu", "toast" ] }, { "name": "AnnouncementDialog", "slug": "announcement-dialog", "layer": "core", "category": "overlays", "group": "Overlays", "status": "experimental", "aliases": [ "What's new" ], "summary": "A dialog that tells people about something new in the product, with a small label, a title, an optional picture, a few lines of text and an action to try it.", "documented": true, "exports": [ "AnnouncementDialogContent", "AnnouncementDialogBody", "AnnouncementDialogHeader", "AnnouncementDialogLabel", "AnnouncementDialogTitle", "AnnouncementDialogPicture", "AnnouncementDialogText", "AnnouncementDialogFooter", "AnnouncementDialogAction", "AnnouncementDialogSecondaryAction" ], "import": "raft-ui/wip", "docs": "https://raft-design.botiverse.build/components/announcement-dialog", "markdown": "https://raft-design.botiverse.build/components/announcement-dialog.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/announcement-dialog", "related": [ "dialog", "notification-center", "toast", "banner", "button" ] }, { "name": "ContextMenu", "slug": "context-menu", "layer": "core", "category": "overlays", "group": "Overlays", "status": "stable", "aliases": [ "Right-click menu" ], "summary": "The menu of actions on one thing that opens at the pointer on right-click, or on press and hold on a touch screen.", "documented": true, "exports": [ "ContextMenu", "ContextMenuCheckboxItem", "ContextMenuCheckboxItemIndicator", "ContextMenuContent", "ContextMenuFooter", "ContextMenuItem", "ContextMenuItemLabel", "ContextMenuLabel", "ContextMenuPopup", "ContextMenuPortal", "ContextMenuRadioGroup", "ContextMenuRadioItem", "ContextMenuRadioItemIndicator", "ContextMenuSeparator", "ContextMenuShortcut", "ContextMenuSubmenu", "ContextMenuSubmenuTrigger", "ContextMenuTrigger" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/context-menu", "markdown": "https://raft-design.botiverse.build/components/context-menu.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/context-menu", "related": [ "dropdown-menu", "select", "popover" ] }, { "name": "Dialog", "slug": "dialog", "layer": "core", "category": "overlays", "group": "Overlays", "status": "stable", "aliases": [ "Modal" ], "summary": "A centered overlay on a scrim for a decision or a few fields people must finish before they continue, with a wide size for a large form filled in one pass.", "documented": true, "exports": [ "Dialog", "DialogBody", "DialogClose", "DialogContent", "DialogDescription", "DialogFooter", "DialogHeader", "DialogNav", "DialogOverlay", "DialogPortal", "DialogSurface", "DialogTitle", "DialogTrigger", "AnnouncementDialog", "AnnouncementDialogTrigger", "AnnouncementDialogClose" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/dialog", "markdown": "https://raft-design.botiverse.build/components/dialog.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/dialog", "related": [ "alert-dialog", "form-section", "drawer", "banner", "toast" ] }, { "name": "Drawer", "slug": "drawer", "layer": "core", "category": "overlays", "group": "Overlays", "status": "stable", "aliases": [ "Sheet", "BottomSheet" ], "summary": "A panel that slides in from the right for details and settings people look at for a while, and on a phone a bottom sheet for picking a place to go or reading a short explanation.", "documented": true, "exports": [ "Drawer", "DrawerActions", "DrawerBody", "DrawerClose", "DrawerContent", "DrawerDescription", "DrawerFooter", "DrawerHeader", "DrawerOverlay", "DrawerPortal", "DrawerTitle", "DrawerTrigger" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/drawer", "markdown": "https://raft-design.botiverse.build/components/drawer.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/drawer", "related": [ "dialog", "form-section", "dropdown-menu", "preview-card", "thread-panel" ] }, { "name": "DropdownMenu", "slug": "dropdown-menu", "layer": "core", "category": "overlays", "group": "Overlays", "status": "stable", "aliases": [ "Menu" ], "summary": "A list of actions on one thing, opened from a button, that can also hold a setting-style choice with a check mark on the current value.", "documented": true, "exports": [ "DropdownMenu", "DropdownMenuCheckboxItem", "DropdownMenuCheckboxItemIndicator", "DropdownMenuContent", "DropdownMenuFooter", "DropdownMenuItem", "DropdownMenuItemCount", "DropdownMenuItemLabel", "DropdownMenuLabel", "DropdownMenuPopup", "DropdownMenuPortal", "DropdownMenuRadioGroup", "DropdownMenuRadioItem", "DropdownMenuRadioItemIndicator", "DropdownMenuSeparator", "DropdownMenuShortcut", "DropdownMenuSubmenu", "DropdownMenuSubmenuTrigger", "DropdownMenuTrigger" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/dropdown-menu", "markdown": "https://raft-design.botiverse.build/components/dropdown-menu.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/dropdown-menu", "related": [ "context-menu", "select", "popover", "alert-dialog", "drawer" ] }, { "name": "Lightbox", "slug": "lightbox", "layer": "core", "category": "overlays", "group": "Overlays", "status": "stable", "aliases": [ "Image viewer", "Media viewer", "Attachment preview" ], "summary": "A full-screen viewer over the scrim for images and attachment previews, with previous and next, thumbnails and one button to close.", "documented": true, "exports": [ "Lightbox", "LightboxActions", "LightboxClose", "LightboxContent", "LightboxHeader", "LightboxHeaderLabel", "LightboxHeaderMeta", "LightboxInfoActions", "LightboxInfoBar", "LightboxInfoDock", "LightboxInfoTitle", "LightboxMedia", "LightboxNavigationButton", "LightboxPortal", "LightboxStage", "LightboxThumbnail", "LightboxThumbnailStrip", "LightboxTitle", "LightboxToolbar", "LightboxTrigger" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/lightbox", "markdown": "https://raft-design.botiverse.build/components/lightbox.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/lightbox", "related": [ "dialog", "message-attachment", "file-preview", "drawer" ] }, { "name": "Popover", "slug": "popover", "layer": "core", "category": "overlays", "group": "Overlays", "status": "stable", "aliases": [], "summary": "A small panel that opens next to the element people click, for a little input such as a choice, a field and a button.", "documented": true, "exports": [ "Popover", "PopoverArrow", "PopoverBackdrop", "PopoverClose", "PopoverContent", "PopoverDescription", "PopoverHeader", "PopoverPopup", "PopoverPortal", "PopoverSeparator", "PopoverTitle", "PopoverTrigger", "PopoverViewport" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/popover", "markdown": "https://raft-design.botiverse.build/components/popover.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/popover", "related": [ "preview-card", "tooltip", "dropdown-menu", "drawer" ] }, { "name": "PreviewCard", "slug": "preview-card", "layer": "core", "category": "overlays", "group": "Overlays", "status": "stable", "aliases": [ "Profile card", "Hover card" ], "summary": "The read-only profile card that appears when people hover over or focus a mention or a name, showing a person's or an agent's avatar, name, status line and up to two small buttons.", "documented": true, "exports": [ "PreviewCard", "PreviewCardArrow", "PreviewCardContent", "PreviewCardDescription", "PreviewCardHeader", "PreviewCardPopup", "PreviewCardPortal", "PreviewCardSeparator", "PreviewCardTitle", "PreviewCardTrigger" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/preview-card", "markdown": "https://raft-design.botiverse.build/components/preview-card.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/preview-card", "related": [ "popover", "tooltip", "avatar", "status" ] }, { "name": "Tooltip", "slug": "tooltip", "layer": "core", "category": "overlays", "group": "Overlays", "status": "stable", "aliases": [ "Hint" ], "summary": "One line that appears on hover or keyboard focus and gives something without a visible label its name, its consequence or its shortcut.", "documented": true, "exports": [ "Tooltip", "TooltipContent", "TooltipPortal", "TooltipProvider", "TooltipTrigger" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/tooltip", "markdown": "https://raft-design.botiverse.build/components/tooltip.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/tooltip", "related": [ "preview-card", "popover", "button", "app-rail" ] }, { "name": "Banner", "slug": "banner", "layer": "core", "category": "feedback", "group": "Feedback", "status": "stable", "aliases": [ "Callout" ], "summary": "A soft-tinted notice inside a dialog or form that people read before they act, and, as PanelNotice, a full-width strip under a panel header when something in that panel failed.", "documented": true, "exports": [ "Banner", "BannerAction", "BannerDescription", "BannerTitle" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/banner", "markdown": "https://raft-design.botiverse.build/components/banner.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/banner", "related": [ "panel", "toast", "notification-center", "alert-dialog", "field" ] }, { "name": "EmptyState", "slug": "empty-state", "layer": "core", "category": "feedback", "group": "Feedback", "status": "stable", "aliases": [ "Empty", "Blank slate" ], "summary": "What a view shows when it has no content — a gray icon, a title, one sentence on why it is empty and what to do, and at most one button.", "documented": true, "exports": [ "EmptyState", "EmptyStateActions", "EmptyStateContent", "EmptyStateDescription", "EmptyStateIcon", "EmptyStateTitle" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/empty-state", "markdown": "https://raft-design.botiverse.build/components/empty-state.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/empty-state", "related": [ "skeleton", "button", "search" ] }, { "name": "Progress", "slug": "progress", "layer": "core", "category": "feedback", "group": "Feedback", "status": "stable", "aliases": [ "ProgressBar", "Loading" ], "summary": "A bar that shows how far a measurable task has gone, such as an upload or usage against a limit, with a label and its value.", "documented": true, "exports": [ "Progress", "ProgressHeader", "ProgressIndicator", "ProgressLabel", "ProgressTrack", "ProgressValue" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/progress", "markdown": "https://raft-design.botiverse.build/components/progress.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/progress", "related": [ "spinner", "skeleton", "file-preview", "message-attachment" ] }, { "name": "Skeleton", "slug": "skeleton", "layer": "core", "category": "feedback", "group": "Feedback", "status": "stable", "aliases": [ "Placeholder" ], "summary": "A gray placeholder in the shape of the content that is loading, for lists, cards and panels whose layout is known.", "documented": true, "exports": [ "Skeleton" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/skeleton", "markdown": "https://raft-design.botiverse.build/components/skeleton.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/skeleton", "related": [ "spinner", "progress", "empty-state" ] }, { "name": "Spinner", "slug": "spinner", "layer": "core", "category": "feedback", "group": "Feedback", "status": "stable", "aliases": [ "Loading", "Pixel spinner", "Loader" ], "summary": "The pixel spinner, four square pixels lit in turn, for a wait of unknown length with no layout to hold.", "documented": true, "exports": [ "Spinner" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/spinner", "markdown": "https://raft-design.botiverse.build/components/spinner.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/spinner", "related": [ "skeleton", "progress", "button" ] }, { "name": "Toast", "slug": "toast", "layer": "core", "category": "feedback", "group": "Feedback", "status": "stable", "aliases": [ "Snackbar" ], "summary": "A dark floating notice that confirms the result of something the person just did, disappears after a few seconds, and can offer View or Undo.", "documented": true, "exports": [ "ToastAction", "ToastActions", "ToastArrow", "ToastBody", "ToastClose", "ToastContent", "ToastDescription", "ToastIcon", "ToastPortal", "ToastPositioner", "ToastProgress", "ToastProvider", "ToastRoot", "ToastTitle", "ToastViewport" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/toast", "markdown": "https://raft-design.botiverse.build/components/toast.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/toast", "related": [ "banner", "notification-center", "activity-inbox", "dialog", "spinner" ] }, { "name": "AppShell", "slug": "app-shell", "layer": "core", "category": "layout", "group": "Layout", "status": "stable", "aliases": [ "Shell", "App frame", "App layout" ], "summary": "The outermost layout of an app, with slots for the rail, the sidebar, the main area, a side panel and an overlay, that switches to a single column with the tab bar below 768px.", "documented": true, "exports": [ "AppShellMainSlot", "AppShellOverlaySlot", "AppShellPanelSlot", "AppShellRailSlot", "AppShellRoot", "AppShellSidebarSlot", "AppShellSidebarTrigger" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/app-shell", "markdown": "https://raft-design.botiverse.build/components/app-shell.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/app-shell", "related": [ "app-rail", "sidebar", "panel", "mobile-nav", "resizable" ] }, { "name": "Card", "slug": "card", "layer": "core", "category": "layout", "group": "Layout", "status": "stable", "aliases": [], "summary": "A white container with a hairline that groups one subject on a page — a header with a title and description, content and a footer — or makes a selectable option inside a form.", "documented": true, "exports": [ "Card", "CardContent", "CardDescription", "CardFooter", "CardHeader", "CardLeading", "CardTitle", "CardTrailing" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/card", "markdown": "https://raft-design.botiverse.build/components/card.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/card", "related": [ "list-row", "form-section", "description-list", "panel", "checkbox", "radio-group" ] }, { "name": "FormSection", "slug": "form-section", "layer": "core", "category": "layout", "group": "Layout", "status": "stable", "aliases": [], "summary": "One part of a large form, with a small heading, a quiet status chip, a line on what the part is for, and its fields, used in the wide dialog and in drawer forms.", "documented": true, "exports": [ "FormSection" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/form-section", "markdown": "https://raft-design.botiverse.build/components/form-section.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/form-section", "related": [ "dialog", "drawer", "field", "badge" ] }, { "name": "Panel", "slug": "panel", "layer": "core", "category": "layout", "group": "Layout", "status": "stable", "aliases": [ "NavBar", "Top bar", "Panel header" ], "summary": "A column of the desktop main area with a 56px panel header and its own scrolling content; its header is also the top bar of a phone's pushed pages.", "documented": true, "exports": [ "Panel", "PanelAction", "PanelActions", "PanelActivity", "PanelBody", "PanelFooter", "PanelHeader", "PanelHeaderContent", "PanelHeaderIcon", "PanelHeaderRoot", "PanelHeading", "PanelMeta", "PanelNotice", "PanelNoticeActions", "PanelNoticeContent", "PanelScrollContent", "PanelScrollViewport", "PanelSection", "PanelSectionHeader", "PanelStatus", "PanelTitle", "PanelToggleAction" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/panel", "markdown": "https://raft-design.botiverse.build/components/panel.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/panel", "related": [ "conversation-panel", "thread-panel", "banner", "icon-tile", "drawer" ] }, { "name": "Resizable", "slug": "resizable", "layer": "core", "category": "layout", "group": "Layout", "status": "stable", "aliases": [ "Split view", "Splitter", "Resize handle" ], "summary": "Columns or rows whose split people drag, with the drag handle sitting on the seam between them.", "documented": true, "exports": [ "ResizableGroup", "ResizableHandle", "ResizablePanel" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/resizable", "markdown": "https://raft-design.botiverse.build/components/resizable.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/resizable", "related": [ "app-shell", "sidebar", "panel", "thread-panel" ] }, { "name": "ScrollArea", "slug": "scroll-area", "layer": "core", "category": "layout", "group": "Layout", "status": "stable", "aliases": [ "Scrollbar", "Scroll view" ], "summary": "A region with native scrolling and a thin drawn scrollbar that shows only while it scrolls, for lists and strips inside a fixed frame.", "documented": true, "exports": [ "ScrollArea", "ScrollAreaContent", "ScrollAreaCorner", "ScrollAreaScrollbar", "ScrollAreaThumb", "ScrollAreaViewport" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/scroll-area", "markdown": "https://raft-design.botiverse.build/components/scroll-area.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/scroll-area", "related": [ "message-list", "panel", "sidebar", "composer" ] }, { "name": "Separator", "slug": "separator", "layer": "core", "category": "layout", "group": "Layout", "status": "stable", "aliases": [ "Divider" ], "summary": "A 1px hairline between groups of content in one region, horizontal or vertical, with an optional word in the middle of a horizontal one.", "documented": true, "exports": [ "Separator" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/separator", "markdown": "https://raft-design.botiverse.build/components/separator.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/separator", "related": [ "dropdown-menu", "select", "popover", "panel", "card" ] }, { "name": "Badge", "slug": "badge", "layer": "core", "category": "data-display", "group": "Data Display", "status": "stable", "aliases": [ "unread count", "mention marker", "count" ], "summary": "A small label — above all the pink unread count and the yellow @ marker, plus soft-tinted and hairline labels.", "documented": true, "exports": [ "Badge" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/badge", "markdown": "https://raft-design.botiverse.build/components/badge.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/badge", "related": [ "status", "tasks", "sidebar", "app-rail", "list-row" ] }, { "name": "CodeBlock", "slug": "code-block", "layer": "core", "category": "data-display", "group": "Data Display", "status": "stable", "aliases": [], "summary": "Several lines of code or a log on a framed code surface, with an optional header for the file name and a copy action.", "documented": true, "exports": [ "CodeBlock", "CodeBlockAction", "CodeBlockActions", "CodeBlockBody", "CodeBlockHeader", "CodeBlockTitle" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/code-block", "markdown": "https://raft-design.botiverse.build/components/code-block.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/code-block", "related": [ "inline-code", "copyable-code", "message-item" ] }, { "name": "CopyableCode", "slug": "copyable-code", "layer": "core", "category": "data-display", "group": "Data Display", "status": "stable", "aliases": [ "Command line" ], "summary": "One command people copy and run, on a code surface with a copy button that confirms with a check.", "documented": true, "exports": [ "CopyableCode", "CopyableCodeAction", "CopyableCodeRoot" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/copyable-code", "markdown": "https://raft-design.botiverse.build/components/copyable-code.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/copyable-code", "related": [ "inline-code", "code-block", "toast" ] }, { "name": "DescriptionList", "slug": "description-list", "layer": "core", "category": "data-display", "group": "Data Display", "status": "stable", "aliases": [ "PropertyList" ], "summary": "A list of facts about one item — label and value pairs such as a task's Status, Assignee and Created by — where a value that can be changed opens a picker.", "documented": true, "exports": [ "DescriptionDetails", "DescriptionItem", "DescriptionList", "DescriptionTerm" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/description-list", "markdown": "https://raft-design.botiverse.build/components/description-list.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/description-list", "related": [ "select", "status", "avatar", "timeline", "task-card" ] }, { "name": "InlineCode", "slug": "inline-code", "layer": "core", "category": "data-display", "group": "Data Display", "status": "stable", "aliases": [], "summary": "A name from code inside a sentence — a variable, a key, a file name — set in Space Mono on a sunken fill.", "documented": true, "exports": [ "InlineCode" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/inline-code", "markdown": "https://raft-design.botiverse.build/components/inline-code.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/inline-code", "related": [ "copyable-code", "code-block", "message-item" ] }, { "name": "Kbd", "slug": "kbd", "layer": "core", "category": "data-display", "group": "Data Display", "status": "stable", "aliases": [ "Keyboard shortcut", "Shortcut", "KbdGroup" ], "summary": "A keyboard key or shortcut shown as a hint, in Space Mono inside a hairline box — in menus, tooltips, the search trigger and inputs.", "documented": true, "exports": [ "Kbd", "KbdGroup" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/kbd", "markdown": "https://raft-design.botiverse.build/components/kbd.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/kbd", "related": [ "dropdown-menu", "context-menu", "tooltip", "search" ] }, { "name": "ListRow", "slug": "list-row", "layer": "core", "category": "data-display", "group": "Data Display", "status": "stable", "aliases": [ "AvatarListRow" ], "summary": "The row for the people and agents on a detail page, settings and shortcuts — a leading block, a title and a preview, the time and a badge.", "documented": true, "exports": [ "ListRow", "ListRowBody", "ListRowBottom", "ListRowChevron", "ListRowDescription", "ListRowGroup", "ListRowIcon", "ListRowMeta", "ListRowTitle", "ListRowTop", "ListRowValue" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/list-row", "markdown": "https://raft-design.botiverse.build/components/list-row.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/list-row", "related": [ "sidebar", "inbox-item", "search", "avatar", "icon-tile", "badge", "switch" ] }, { "name": "Markdown", "slug": "markdown", "layer": "core", "category": "data-display", "group": "Data Display", "status": "stable", "aliases": [ "Markdown parts", "Rich text", "Prose", "MarkdownHeading", "MarkdownTable" ], "summary": "The styled elements a Markdown renderer maps its nodes to — headings, paragraphs, links, lists, quotes, tables, images and task checkboxes — for text people and agents write.", "documented": true, "exports": [ "MarkdownBlockquote", "MarkdownCell", "MarkdownCheckbox", "MarkdownHeaderCell", "MarkdownHeading", "MarkdownImage", "MarkdownInlineCode", "MarkdownLink", "MarkdownList", "MarkdownListItem", "MarkdownMark", "MarkdownOrderedList", "MarkdownParagraph", "MarkdownRule", "MarkdownTable", "MarkdownTableRow", "MarkdownTableScroll" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/markdown", "markdown": "https://raft-design.botiverse.build/components/markdown.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/markdown", "related": [ "message-item", "inline-code", "code-block", "checkbox", "table" ] }, { "name": "Status", "slug": "status", "layer": "core", "category": "data-display", "group": "Data Display", "status": "stable", "aliases": [ "StatusChip", "status chip", "StatusDot", "presence light", "attention dot", "runtime chip", "agent tag" ], "summary": "The square status pixel — a presence light, an attention dot or a status color beside a word — and the status chips, agent tag and runtime chip built with it.", "documented": true, "exports": [ "Status" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/status", "markdown": "https://raft-design.botiverse.build/components/status.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/status", "related": [ "badge", "tasks", "avatar", "task-card" ] }, { "name": "Table", "slug": "table", "layer": "core", "category": "data-display", "group": "Data Display", "status": "stable", "aliases": [ "Data table" ], "summary": "Rows and columns of data on native table elements, for the few places that need columns, such as usage, billing and permissions.", "documented": true, "exports": [ "Table", "TableBody", "TableCaption", "TableCell", "TableColgroup", "TableColumn", "TableHead", "TableHeader", "TableRow" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/table", "markdown": "https://raft-design.botiverse.build/components/table.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/table", "related": [ "description-list", "list-row", "code-block" ] }, { "name": "Text", "slug": "text", "layer": "core", "category": "data-display", "group": "Data Display", "status": "stable", "aliases": [ "Typography", "TextHeading", "TextSans", "TextMono", "Heading" ], "summary": "Plain typography parts — Text.Heading, Text.Sans and Text.Mono — for text that no other component holds, in the system's two typefaces.", "documented": true, "exports": [ "TextHeading", "TextMono", "TextSans" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/text", "markdown": "https://raft-design.botiverse.build/components/text.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/text", "related": [ "markdown", "inline-code", "description-list", "panel" ] }, { "name": "Avatar", "slug": "avatar", "layer": "core", "category": "identity", "group": "Identity", "status": "stable", "aliases": [ "PixelAvatar", "avatar stack", "presence light" ], "summary": "The square sticker that stands for one agent or one person — a pixel face for an agent, a photo or initials for a person — with an optional presence light.", "documented": true, "exports": [ "Avatar", "AvatarBadge", "AvatarFallback", "AvatarGroup", "AvatarGroupCount", "AvatarImage" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/avatar", "markdown": "https://raft-design.botiverse.build/components/avatar.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/avatar", "related": [ "icon-tile", "status", "badge", "list-row", "message-item" ] }, { "name": "Icons", "slug": "icons", "layer": "core", "category": "identity", "group": "Identity", "status": "stable", "aliases": [ "MessageIcon", "ChatIcon", "DirectMessageIcon", "ThreadIcon", "Conversation icons" ], "summary": "The four conversation icons raft-ui draws itself — Message, Chat, Direct Message and Thread; every other icon comes from Lucide.", "documented": true, "exports": [ "ChatIcon", "DirectMessageIcon", "MessageIcon", "ThreadIcon" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/icons", "markdown": "https://raft-design.botiverse.build/components/icons.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/icons", "related": [ "sidebar", "message-quoted-preview", "tasks", "icon-tile" ] }, { "name": "IconTile", "slug": "icon-tile", "layer": "core", "category": "identity", "group": "Identity", "status": "stable", "aliases": [ "ChannelIcon", "channel tile" ], "summary": "A neutral square with an icon, sized like an avatar, for a place or a thing without a face — a channel, a system notice, a file, an app, a computer.", "documented": true, "exports": [ "IconTile" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/icon-tile", "markdown": "https://raft-design.botiverse.build/components/icon-tile.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/icon-tile", "related": [ "avatar", "panel", "sidebar", "notification-center" ] }, { "name": "RaftLogo", "slug": "logo", "layer": "core", "category": "identity", "group": "Identity", "status": "stable", "aliases": [ "Logo", "RaftWordmark", "RaftLogoLockup", "Raft mark" ], "summary": "The Raft mark, wordmark and lockup as inline SVGs, for brand pages such as sign-in, creating an account or a server, and loading screens.", "documented": true, "exports": [ "RaftLogo", "RaftLogoLockup", "RaftWordmark" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/logo", "markdown": "https://raft-design.botiverse.build/components/logo.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/logo", "related": [ "avatar", "icon-tile" ] }, { "name": "Composer", "slug": "composer", "layer": "collaboration", "category": "messages", "group": "Messages", "status": "stable", "aliases": [], "summary": "The message box at the bottom of a conversation, with the input, its tools, attachments, @ suggestions and the pink send button inside one ink border.", "documented": true, "exports": [ "Composer", "ComposerActions", "ComposerAttachment", "ComposerAttachmentBody", "ComposerAttachmentFailedOverlay", "ComposerAttachmentFile", "ComposerAttachmentImage", "ComposerAttachmentMeta", "ComposerAttachmentRemove", "ComposerAttachments", "ComposerAttachmentsScrollArea", "ComposerAttachmentTitle", "ComposerAttachmentUploadingOverlay", "ComposerAttachmentUploadProgressBar", "ComposerDropOverlay", "ComposerDropOverlayLabel", "ComposerDropOverlayPrompt", "ComposerIconButton", "ComposerInput", "ComposerMeta", "ComposerRoot", "ComposerSubmit", "ComposerSuggestionAside", "ComposerSuggestionContent", "ComposerSuggestionGroup", "ComposerSuggestionGroupLabel", "ComposerSuggestionIcon", "ComposerSuggestionList", "ComposerSuggestionMeta", "ComposerSuggestionOption", "ComposerSuggestionTitle", "ComposerToolbar", "ComposerToolbarLabel", "SortableComposerAttachment", "SortableComposerAttachments", "SortableComposerAttachmentsScroll" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/composer", "markdown": "https://raft-design.botiverse.build/components/composer.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/composer", "related": [ "button", "checkbox", "textarea", "message-attachment", "conversation-panel", "thread-panel" ] }, { "name": "ConversationPanel", "slug": "conversation-panel", "layer": "collaboration", "category": "messages", "group": "Messages", "status": "stable", "aliases": [ "Channel panel" ], "summary": "The main-area panel for one conversation — a panel header, an optional row of tabs, the message list and the composer.", "documented": true, "exports": [ "ConversationPanelBody", "ConversationPanelContent", "ConversationPanelEmptyState", "ConversationPanelEmptyStateBrand", "ConversationPanelEmptyStateBrandMark", "ConversationPanelFooter", "ConversationPanelRoot", "ConversationPanelTabs" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/conversation-panel", "markdown": "https://raft-design.botiverse.build/components/conversation-panel.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/conversation-panel", "related": [ "panel", "thread-panel", "tabs", "composer", "message-item" ] }, { "name": "MessageAttachment", "slug": "message-attachment", "layer": "collaboration", "category": "messages", "group": "Messages", "status": "stable", "aliases": [ "Attachment", "File card" ], "summary": "Files, images and video attached to a message — a file is a card with its name, size and an action; images and video show inline.", "documented": true, "exports": [ "MessageAttachmentAction", "MessageAttachmentCard", "MessageAttachmentCommentSummary", "MessageAttachmentDiffAddition", "MessageAttachmentDiffDeletion", "MessageAttachmentDiffSummary", "MessageAttachmentGroup", "MessageAttachmentMeta", "MessageAttachmentMetaEnd", "MessageAttachmentMetaStart", "MessageAttachmentSummary", "MessageAttachmentTitle", "MessageImageGallery", "MessageImageGalleryAction", "MessageImageGalleryItem", "MessageImageGalleryMedia", "MessageImageGalleryOverlay", "MessageImageGalleryPreview", "MessageImageGalleryRow", "MessageVideoPreview", "MessageVideoPreviewAction", "MessageVideoPreviewFallback", "MessageVideoPreviewFailureAction", "MessageVideoPreviewFailureContent", "MessageVideoPreviewFailureIcon", "MessageVideoPreviewFailureTitle", "MessageVideoPreviewMedia" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/message-attachment", "markdown": "https://raft-design.botiverse.build/components/message-attachment.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/message-attachment", "related": [ "message-item", "file-preview", "composer", "progress" ] }, { "name": "MessageEmbed", "slug": "message-embed", "layer": "collaboration", "category": "messages", "group": "Messages", "status": "stable", "aliases": [ "Link card", "Embed" ], "summary": "The card that embedded message content is built on — a header, content and footer in a hairline card — used for link cards and as the base of forwarded bundles, action cards and reply summaries.", "documented": true, "exports": [ "MessageEmbed", "MessageEmbedContent", "MessageEmbedFooter", "MessageEmbedHeader" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/message-embed", "markdown": "https://raft-design.botiverse.build/components/message-embed.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/message-embed", "related": [ "message-item", "message-attachment", "message-forwarded-bundle", "message-quoted-preview", "message-action-card", "message-replies" ] }, { "name": "MessageForwardedBundle", "slug": "message-forwarded-bundle", "layer": "collaboration", "category": "messages", "group": "Messages", "status": "stable", "aliases": [ "Forwarded message", "Forwarded bundle" ], "summary": "A card under a message that holds one or more messages forwarded from another conversation, with their authors, times and attachments, folded when it runs long.", "documented": true, "exports": [ "MessageForwardedBundle", "MessageForwardedBundleAttachment", "MessageForwardedBundleAttachmentMeta", "MessageForwardedBundleAttachmentName", "MessageForwardedBundleAttachments", "MessageForwardedBundleFooter", "MessageForwardedBundleGallery", "MessageForwardedBundleGalleryTile", "MessageForwardedBundleHeader", "MessageForwardedBundleHeaderContent", "MessageForwardedBundleHeaderCount", "MessageForwardedBundleHeaderLabel", "MessageForwardedBundleItem", "MessageForwardedBundleItemAuthor", "MessageForwardedBundleItemContent", "MessageForwardedBundleItemMeta", "MessageForwardedBundleItems", "MessageForwardedBundleSource", "MessageForwardedBundleSourceLabel", "MessageForwardedBundleFooterAction" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/message-forwarded-bundle", "markdown": "https://raft-design.botiverse.build/components/message-forwarded-bundle.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/message-forwarded-bundle", "related": [ "message-embed", "message-item", "message-quoted-preview", "message-attachment" ] }, { "name": "MessageItem", "slug": "message-item", "layer": "collaboration", "category": "messages", "group": "Messages", "status": "stable", "aliases": [ "Message" ], "summary": "One message in a conversation — avatar, name, time and body, with attachments, embedded cards and a footer row — used the same way for people and agents.", "documented": true, "exports": [ "MessageReferenceChip", "MessageReferenceIndicator", "MessageReferenceLabel", "MessageReferencePending", "MessageReferenceText", "MessageReferenceUnavailable", "MessageItem", "MessageItemAttachments", "MessageItemAvatarSlot", "MessageItemBadge", "MessageItemBadgeSeparator", "MessageItemBody", "MessageItemContent", "MessageItemContinuationTime", "MessageItemEmbedded", "MessageItemFooter", "MessageItemGutter", "MessageItemHeader", "MessageItemInlineStatus", "MessageItemMeta", "MessageItemReadReceipt", "MessageItemSavedIndicator", "MessageItemSearchMatch", "MessageItemSender", "MessageItemSenderBadges", "MessageItemSenderButton", "MessageItemTime", "MessageItemToolbar", "MessageItemToolbarButton", "MessageMultiSelect", "MessageMultiSelectCheckbox", "MessageMultiSelectToolbar", "MessageReactionAddButton", "MessageReactionChip", "MessageReactionCount", "MessageReactionErrorIndicator", "MessageReactionGlyph", "MessageReactionPickerContent", "MessageReactionPickerStatic", "MessageReactionQuickButton", "MessageReactionQuickRow", "MessageReactionTooltipContent", "MessageReactionTooltipMeta", "MessageReactionTooltipName", "MessageReactionTooltipNames", "MessageReactionTooltipNameText", "MessageReactionTooltipSeparator", "MessageTextSelectionToolbar", "MessageTextSelectionToolbarButton", "MessageTextSelectionToolbarSeparator" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/message-item", "markdown": "https://raft-design.botiverse.build/components/message-item.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/message-item", "related": [ "system-message", "message-replies", "message-attachment", "inline-code", "code-block", "message-action-card", "composer" ] }, { "name": "MessageItemTranslation", "slug": "message-translation", "layer": "collaboration", "category": "messages", "group": "Messages", "status": "stable", "aliases": [ "MessageTranslation", "Translation" ], "summary": "The parts that show a message was translated — a short Space Mono status line under the body that switches between the translation and the original, the original kept below, and the translating and failed states.", "documented": true, "exports": [ "MessageItemTranslationAction", "MessageItemTranslationFailedStatus", "MessageItemTranslationOriginal", "MessageItemTranslationOriginalLabel", "MessageItemTranslationProgressTrack", "MessageItemTranslationRetryAction", "MessageItemTranslationStatus" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/message-translation", "markdown": "https://raft-design.botiverse.build/components/message-translation.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/message-translation", "related": [ "message-item", "progress" ] }, { "name": "MessageList", "slug": "message-list", "layer": "collaboration", "category": "messages", "group": "Messages", "status": "stable", "aliases": [ "Message timeline", "Date divider", "Timeline view" ], "summary": "The scrolling timeline of a conversation or thread, with the date lines, the notice at its start and the marker for limited history.", "documented": true, "exports": [ "MessageList", "MessageListDateDivider", "MessageListHistoryLimited", "MessageListNotice" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/message-list", "markdown": "https://raft-design.botiverse.build/components/message-list.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/message-list", "related": [ "conversation-panel", "thread-panel", "message-item", "system-message", "scroll-area" ] }, { "name": "MessageQuotedPreview", "slug": "message-quoted-preview", "layer": "collaboration", "category": "messages", "group": "Messages", "status": "stable", "aliases": [ "Quoted message", "Message preview", "Permalink preview" ], "summary": "A two-line excerpt of the message a link points to, with its author, place and time, shown under the message that links to it.", "documented": true, "exports": [ "MessageQuotedPreview", "MessageQuotedPreviewAttachments", "MessageQuotedPreviewAttachment", "MessageQuotedPreviewAuthor", "MessageQuotedPreviewAuthorMeta", "MessageQuotedPreviewAuthorName", "MessageQuotedPreviewChannel", "MessageQuotedPreviewContent", "MessageQuotedPreviewHeader", "MessageQuotedPreviewLoading", "MessageQuotedPreviewText", "MessageQuotedPreviewThread", "MessageQuotedPreviewTimestamp", "MessageQuotedPreviewUnavailable" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/message-quoted-preview", "markdown": "https://raft-design.botiverse.build/components/message-quoted-preview.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/message-quoted-preview", "related": [ "message-item", "message-embed", "message-forwarded-bundle", "skeleton", "badge" ] }, { "name": "MessageReplies", "slug": "message-replies", "layer": "collaboration", "category": "messages", "group": "Messages", "status": "stable", "aliases": [ "Thread replies" ], "summary": "The thread under a message — a gray block with the reply count, a pink count of new replies and up to 3 previews — that opens the thread as one control.", "documented": true, "exports": [ "MessageReplies", "MessageRepliesItem", "MessageRepliesItemContent", "MessageRepliesItemSender", "MessageRepliesItemTime", "MessageRepliesSummary", "MessageRepliesSummaryItem" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/message-replies", "markdown": "https://raft-design.botiverse.build/components/message-replies.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/message-replies", "related": [ "message-item", "thread-panel", "system-message" ] }, { "name": "SystemMessage", "slug": "system-message", "layer": "collaboration", "category": "messages", "group": "Messages", "status": "stable", "aliases": [ "Event line" ], "summary": "An event line in a conversation — a date, a claim, a hand-off, a status change — set in Space Mono between hairlines, alone or collapsed into a group.", "documented": true, "exports": [ "SystemMessage", "SystemMessageContent", "SystemMessageGroup", "SystemMessageGroupChevron", "SystemMessageGroupDisclosure", "SystemMessageGroupHeader", "SystemMessageGroupPanel", "SystemMessageGroupSummary", "SystemMessageTime" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/system-message", "markdown": "https://raft-design.botiverse.build/components/system-message.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/system-message", "related": [ "message-item", "message-replies", "timeline" ] }, { "name": "ThreadPanel", "slug": "thread-panel", "layer": "collaboration", "category": "messages", "group": "Messages", "status": "stable", "aliases": [ "Thread" ], "summary": "The side panel for one thread — a header that names it, the original message, the replies and a composer, with no tabs.", "documented": true, "exports": [ "ThreadPanelActions", "ThreadPanelBody", "ThreadPanelContent", "ThreadPanelFooter", "ThreadPanelHeader", "ThreadPanelOriginalMessage", "ThreadPanelReplyCount", "ThreadPanelReplySummary", "ThreadPanelRoot", "ThreadPanelSearch", "ThreadPanelSearchCount", "ThreadPanelSearchTrailing", "ThreadPanelTitle", "ThreadPanelTitleMeta" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/thread-panel", "markdown": "https://raft-design.botiverse.build/components/thread-panel.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/thread-panel", "related": [ "panel", "conversation-panel", "message-replies", "composer" ] }, { "name": "LegacyTaskPanel", "slug": "legacy-task-panel", "layer": "collaboration", "category": "tasks", "group": "Tasks", "status": "deprecated", "aliases": [ "Task panel", "TaskPanel" ], "summary": "A read-only task details panel built on the thread panel; deprecated, because task details are a dialog with a description list.", "documented": true, "exports": [ "LegacyTaskPanelActions", "LegacyTaskPanelBody", "LegacyTaskPanelField", "LegacyTaskPanelFieldLabel", "LegacyTaskPanelFieldText", "LegacyTaskPanelFieldTitle", "LegacyTaskPanelHeader", "LegacyTaskPanelIcon", "LegacyTaskPanelMeta", "LegacyTaskPanelMetaLabel", "LegacyTaskPanelMetaRow", "LegacyTaskPanelMetaValue", "LegacyTaskPanelRoot", "LegacyTaskPanelStatus", "LegacyTaskPanelSection", "LegacyTaskPanelTitle", "LegacyTaskPanelTitleMeta" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/legacy-task-panel", "markdown": "https://raft-design.botiverse.build/components/legacy-task-panel.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/legacy-task-panel", "related": [ "dialog", "description-list", "timeline", "thread-panel" ], "replacedBy": "dialog" }, { "name": "TaskBoard", "slug": "task-board", "layer": "collaboration", "category": "tasks", "group": "Tasks", "status": "stable", "aliases": [ "Kanban" ], "summary": "The board view of tasks — one column per status, in status order, with cards that can be dragged to another column to change their status.", "documented": true, "exports": [ "TaskBoardColumn", "TaskBoardColumnBadge", "TaskBoardColumnChevron", "TaskBoardColumnCount", "TaskBoardColumnEmpty", "TaskBoardColumnEmptyAllowed", "TaskBoardColumnEmptyBlocked", "TaskBoardColumnEmptyIdle", "TaskBoardColumnHeading", "TaskBoardColumnItems", "TaskBoardColumnPanel", "TaskBoardColumnTrigger", "TaskBoardRoot" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/task-board", "markdown": "https://raft-design.botiverse.build/components/task-board.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/task-board", "related": [ "task-card", "task-list", "tasks", "segmented-control" ] }, { "name": "TaskCard", "slug": "task-card", "layer": "collaboration", "category": "tasks", "group": "Tasks", "status": "stable", "aliases": [], "summary": "The card that shows one task — its number, title and a status chip that changes the status — on a task board and in a task list.", "documented": true, "exports": [ "TaskCard", "TaskCardBody", "TaskCardChannel", "TaskCardDescription", "TaskCardLegacy", "TaskCardMeta", "TaskCardNumber", "TaskCardRow", "TaskCardStatus", "TaskCardTitle" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/task-card", "markdown": "https://raft-design.botiverse.build/components/task-card.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/task-card", "related": [ "task-board", "task-list", "tasks", "select", "description-list" ] }, { "name": "TaskDnd", "slug": "task-dnd", "layer": "collaboration", "category": "tasks", "group": "Tasks", "status": "stable", "aliases": [ "Drag and drop", "DnD", "TaskDraggable", "TaskDropZone" ], "summary": "The drag-and-drop parts that let people move task cards between columns and around other cards, with the drop policy and the move left to the caller.", "documented": true, "exports": [ "TaskDndProvider", "TaskDragOverlay", "TaskDraggable", "TaskDropPlaceholder", "TaskDropZone" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/task-dnd", "markdown": "https://raft-design.botiverse.build/components/task-dnd.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/task-dnd", "related": [ "task-board", "task-card", "task-list", "tasks" ] }, { "name": "TaskList", "slug": "task-list", "layer": "collaboration", "category": "tasks", "group": "Tasks", "status": "stable", "aliases": [], "summary": "The list view of tasks — one collapsible group per status, in status order, each holding task cards.", "documented": true, "exports": [ "TaskListRoot", "TaskSection", "TaskSectionBadge", "TaskSectionChevron", "TaskSectionCount", "TaskSectionEmpty", "TaskSectionHeading", "TaskSectionItems", "TaskSectionPanel", "TaskSectionTrigger" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/task-list", "markdown": "https://raft-design.botiverse.build/components/task-list.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/task-list", "related": [ "task-card", "task-board", "tasks" ] }, { "name": "Tasks", "slug": "tasks", "layer": "collaboration", "category": "tasks", "group": "Tasks", "status": "stable", "aliases": [ "TaskChip", "TaskStatusBadge", "TaskStatusIcon", "TasksPanel", "task marker", "task status" ], "summary": "The parts every task view shares — the status badge and task chip that show where a task is, the status pixels, and the shell of a task panel.", "documented": true, "exports": [ "TasksPanelEmpty", "TasksPanelRoot", "TasksPanelToolbar", "TasksPanelToolbarFilters", "TasksPanelToolbarGroup", "TasksPanelToolbarLabel", "TasksPanelToolbarNewTask", "TasksPanelToolbarView", "TasksPanelViewport", "TaskLoadingList", "TaskLoadingRow", "TaskChip", "TaskClosedIcon", "TaskDoneIcon", "TaskInProgressIcon", "TaskInReviewIcon", "TaskStatusIcon", "TaskTodoIcon", "TaskStatusBadge" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/tasks", "markdown": "https://raft-design.botiverse.build/components/tasks.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/tasks", "related": [ "status", "task-card", "task-board", "task-list", "badge", "message-item" ] }, { "name": "Timeline", "slug": "timeline", "layer": "collaboration", "category": "tasks", "group": "Tasks", "status": "stable", "aliases": [ "History" ], "summary": "An ordered list of what happened — a task's history in task-status colors and plain words, or an agent's activity log in presence colors and Space Mono.", "documented": true, "exports": [ "Timeline", "TimelineContent", "TimelineItem", "TimelineTime", "TimelineTitle" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/timeline", "markdown": "https://raft-design.botiverse.build/components/timeline.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/timeline", "related": [ "description-list", "steps", "status", "tasks" ] }, { "name": "LiveAgentActivityBar", "slug": "live-agent-activity-bar", "layer": "collaboration", "category": "agents", "group": "Agents", "status": "deprecated", "aliases": [ "Live bar", "Activity bar", "Live activity" ], "summary": "A live strip of working agents above the tab bar or at the bottom of the sidebar; deprecated, because working agents are shown where they already appear.", "documented": true, "exports": [ "LiveAgentActivityBar", "LiveAgentActivityBarAvatar", "LiveAgentActivityBarContent", "LiveAgentActivityBarRow", "LiveAgentActivityBarStatus", "LiveAgentActivityBarText" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/live-agent-activity-bar", "markdown": "https://raft-design.botiverse.build/components/live-agent-activity-bar.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/live-agent-activity-bar", "related": [ "avatar", "status", "sidebar", "list-row", "panel", "message-item", "drawer" ] }, { "name": "MessageActionCard", "slug": "message-action-card", "layer": "collaboration", "category": "agents", "group": "Agents", "status": "stable", "aliases": [ "ActionCard", "action card", "approval card" ], "summary": "A card an agent attaches to its message with an action already filled in, for a person to confirm; afterwards it records who did it and when.", "documented": true, "exports": [ "MessageActionCard", "MessageActionCardActions", "MessageActionCardActionsNote", "MessageActionCardCollapseTrigger", "MessageActionCardCompletion", "MessageActionCardContent", "MessageActionCardProperty", "MessageActionCardPropertyLabel", "MessageActionCardProperties", "MessageActionCardPropertyValue", "MessageActionCardHeader", "MessageActionCardHeaderDescription", "MessageActionCardHeaderIcon", "MessageActionCardHeaderStatus", "MessageActionCardHeaderTitle", "MessageActionCardHint", "MessageActionCardHintLabel", "MessageActionCardNotice", "MessageActionCardScope", "MessageActionCardScopeDescription", "MessageActionCardScopeList", "MessageActionCardScopeListLabel", "MessageActionCardScopeListViewport", "MessageActionCardScopeName", "MessageActionCardStatus" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/message-action-card", "markdown": "https://raft-design.botiverse.build/components/message-action-card.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/message-action-card", "related": [ "message-item", "description-list", "button", "icon-tile", "activity-inbox", "dialog" ] }, { "name": "ProfilePanel", "slug": "profile-panel", "layer": "collaboration", "category": "agents", "group": "Agents", "status": "stable", "aliases": [ "Profile", "Member detail", "Agent profile" ], "summary": "The side panel for one person or agent — a panel header with their avatar and name, then sections of who they are, what they do and what you can do with them.", "documented": true, "exports": [ "ProfilePanel", "ProfilePanelBody", "ProfilePanelHeader", "ProfilePanelHeaderContent", "ProfilePanelSection" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/profile-panel", "markdown": "https://raft-design.botiverse.build/components/profile-panel.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/profile-panel", "related": [ "panel", "avatar", "description-list", "list-row", "skeleton", "preview-card" ] }, { "name": "ActivityInbox", "slug": "activity-inbox", "layer": "collaboration", "category": "inbox", "group": "Inbox", "status": "stable", "aliases": [ "Activity" ], "summary": "The Activity panel — a list of inbox items with its views, filters and selection toolbar, where selecting an item opens it beside the list.", "documented": true, "exports": [ "ActivityInboxPanel", "ActivityInboxViewport", "ActivityInboxLoadingMore", "ActivityInboxSidebar", "ActivityInboxControls", "ActivityInboxSelectionToolbar", "ActivityInboxSelectionCount" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/activity-inbox", "markdown": "https://raft-design.botiverse.build/components/activity-inbox.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/activity-inbox", "related": [ "inbox-item", "notification-center", "panel", "sidebar", "empty-state" ] }, { "name": "InboxItem", "slug": "inbox-item", "layer": "collaboration", "category": "inbox", "group": "Inbox", "status": "stable", "aliases": [ "Inbox" ], "summary": "The row for something that happened elsewhere and that the person should see — a mention, an approval, a hand-off — with an attention dot while it is unread and its actions in the row.", "documented": true, "exports": [ "InboxItem", "InboxItemActions", "InboxItemBody", "InboxItemContent", "InboxItemContext", "InboxItemHeading", "InboxItemMessage", "InboxItemMetadata", "InboxItemSelection", "InboxItemSender", "InboxItemSubtitle", "InboxItemTimestamp", "InboxItemTitle", "InboxItemTrailing", "InboxItemTrigger" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/inbox-item", "markdown": "https://raft-design.botiverse.build/components/inbox-item.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/inbox-item", "related": [ "activity-inbox", "notification-center", "list-row", "badge", "checkbox" ] }, { "name": "NotificationCenter", "slug": "notification-center", "layer": "collaboration", "category": "inbox", "group": "Inbox", "status": "stable", "aliases": [ "Notifications" ], "summary": "The list that opens from the bell and holds the state of the whole server — a computer offline, a quota nearly full, an update — until it changes.", "documented": true, "exports": [ "NotificationCenter", "NotificationCenterActionButton", "NotificationCenterCount", "NotificationCenterEmptyState", "NotificationCenterHeader", "NotificationCenterItem", "NotificationCenterItemActions", "NotificationCenterItemBody", "NotificationCenterItemContent", "NotificationCenterItemIcon", "NotificationCenterItemRow", "NotificationCenterItemTitle", "NotificationCenterList", "NotificationCenterPopup", "NotificationCenterScroller", "NotificationCenterTitle", "NotificationCenterTrigger" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/notification-center", "markdown": "https://raft-design.botiverse.build/components/notification-center.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/notification-center", "related": [ "inbox-item", "activity-inbox", "popover", "empty-state", "banner", "toast" ] }, { "name": "Search", "slug": "search", "layer": "collaboration", "category": "search", "group": "Search", "status": "stable", "aliases": [ "SearchTrigger" ], "summary": "The search trigger in the web top bar, and the parts of search results — rows for places and people, message and thread hits, grouped by kind with the matched words marked.", "documented": true, "exports": [ "SearchShellRoot", "SearchShellFilters", "SearchShellViewport", "SearchResultsSummary", "SearchResultsSection", "SearchResultsSectionHeading", "SearchResultsList", "SearchEntityResult", "SearchEntityResultContent", "SearchEntityResultHeader", "SearchEntityResultLeading", "SearchEntityResultIcon", "SearchEntityResultActivity", "SearchEntityResultTitle", "SearchEntityResultDescription", "SearchMessageResult", "SearchThreadMessageResult", "SearchMessageResultHeader", "SearchMessageResultBody", "SearchMessageResultMeta", "SearchMessageResultThreadMeta", "SearchMessageResultSender", "SearchMessageResultTimestamp", "SearchMessageResultMatch", "SearchThreadResult", "SearchThreadResultHeader", "SearchThreadResultMeta", "SearchThreadResultTimestamp", "SearchThreadResultTitle", "SearchThreadResultMessages", "SearchTrigger", "SearchTriggerLabel", "SearchTriggerShortcut" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/search", "markdown": "https://raft-design.botiverse.build/components/search.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/search", "related": [ "list-row", "empty-state", "select", "combobox", "dialog", "input-group", "thread-panel" ] }, { "name": "FilePreview", "slug": "file-preview", "layer": "collaboration", "category": "files", "group": "Files", "status": "stable", "aliases": [ "File icon" ], "summary": "A small icon that shows a file's type — a document, an archive, code or a media thumbnail — with a chip that names the type.", "documented": true, "exports": [ "FilePreview", "FilePreviewBadge", "FilePreviewCode", "FilePreviewDocument", "FilePreviewFile", "FilePreviewMedia" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/file-preview", "markdown": "https://raft-design.botiverse.build/components/file-preview.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/file-preview", "related": [ "message-attachment", "composer" ] }, { "name": "FilesPanel", "slug": "files", "layer": "collaboration", "category": "files", "group": "Files", "status": "stable", "aliases": [ "Files", "FileRow", "Channel files" ], "summary": "The list of files shared in a place, one row per file with its type, name, size and time, which opens a preview and offers Jump to Message and Download.", "documented": true, "exports": [ "FilesPanel", "FilesViewport", "FilesList", "FileRow", "FileRowOpen", "FileThumbnail", "FileImage", "FileContent", "FileName", "FileMeta", "FileMetaItem", "FileActions", "FileAction" ], "import": "raft-ui", "docs": "https://raft-design.botiverse.build/components/files", "markdown": "https://raft-design.botiverse.build/components/files.md", "source": "https://github.com/botiverse/raft-design/tree/main/packages/ui/src/components/files", "related": [ "file-preview", "message-attachment", "panel", "empty-state", "lightbox" ] } ]