Components
SolidJS components for SceneGraph nodes in the RSG 2.0 SDK
Each component wraps one node, such as a Label, Poster, Rectangle or Effect, or composes several, and takes the node's fields as typed JSX props.
Pages
| Page | Description |
|---|---|
| AnimatedImage | Thin binding for the native AnimatedImage node. |
| Animation | Animation component for animating renderable node fields using interpolator functions. |
| Audio | Audio plays streaming audio content. |
| BifDisplay | BifDisplay — description pending. |
| BlendedBusySpinner | BlendedBusySpinner — description pending. |
| BoundingTracker | BoundingTracker — description pending. |
| BUSY_SPINNER_DIMENSIONS | Standard dimensions for the default BusySpinner (theme:ActionHudSpinner). |
| BusySpinner | BusySpinner component - displays an animated spinning indicator. |
| Button | Button is a simple widget that generates a buttonSelected event when the user selects it. |
| ButtonGroup | ButtonGroup manages the layout, visual attributes, and focus management of a vertical list of Button nodes. |
| ButtonRow | ButtonRow — description pending. |
| ChannelStore | ChannelStore provides an interface to the Roku Streaming Store for in-app purchases, user authentication, subscription management, and credential storage. |
| CheckList | CheckList displays a list of items with optional checkboxes for selection. |
| ColorFieldInterpolator | ColorFieldInterpolator animates a color field of a node through a series of keyframes. |
| Container | Container is a Group wrapper that exposes typed imperative methods for dynamic node insertion and removal. |
| ContentNode | ContentNode component for specifying data used to configure nodes and components. |
| CustomKeyboard | Voice-enabled keyboard with a custom layout defined by a Key Definition File. |
| Dialog | Dialog is a modal pop-up used to present the user with information requiring their immediate attention. |
| DynamicKeyboard | Standalone DynamicKeyboard with built-in key layout and voice entry. |
| DynamicKeyGrid | Standalone key grid driven by a Key Definition File (no text edit box). |
| DynamicMiniKeyboard | Standalone search-style mini keyboard (A–Z, 0–9) with voice entry. |
| DynamicPinPad | Voice-enabled numeric PIN pad for standalone on-screen entry (not inside a dialog). |
| Effect | Effect applies GPU shader-based rendering to a Rectangle or Poster. |
| FloatFieldInterpolator | FloatFieldInterpolator animates a floating point field of a node through a series of keyframes. |
| Focusable | Focusable — description pending. |
| FocusableGroup | FocusableGroup — description pending. |
| Font | Font specifies the font to be used by a Label node, or any other nodes that render text. |
| getBusySpinnerHeight | Get the height of the BusySpinner for the given UI resolution. |
| getBusySpinnerWidth | Get the width of the BusySpinner for the given UI resolution. |
| Glyphs | Named character constants for symbols that are awkward or impossible to type directly in source. |
| Group | Group component - a layout container for organizing and positioning child nodes. |
| INodeProps | Base properties for all SceneGraph nodes. |
| installEffectGradientDevValidation | Installs the DEV setProperty observer that validates Effect gradient props for both and . |
| KeyHandler | KeyHandler — description pending. |
| Label | Label component for displaying single-style text. |
| LabelList | LabelList is a simple list class that displays a list of text items. |
| LayoutGroup | A container node that automatically positions its child nodes in either a horizontal row or vertical column layout with configurable alignment and spacing. |
| ListPanel | A panel component that displays a navigable list of items for the Roku Sliding Panels interface pattern. |
| MarkupGrid | MarkupGrid is a generic grid class that can be used to display a set of items arranged in a 2D grid. |
| MarkupList | MarkupList is a generic list class that displays a vertical list of items, where the visual content of each item is an instance of an XML component specified by the itemComponentName field. |
| MaskGroup | MaskGroup component for applying alpha masks to child content. |
| MultiStyleLabel | MultiStyleLabel component for displaying text with mixed styles. |
| Overhang | The Overhang node provides an information bar that is displayed at the top of a screen in many Roku apps. |
| Panel | Panel is a Group node subclass used to create sliding panels for app UI, similar to those in the Roku OS home screen. |
| PanelSet | PanelSet is a Group node subclass that provides the panel sliding behavior seen in the Roku home screen. |
| Poster | Poster is a renderable node that displays bitmap images. |
| PosterGrid | PosterGrid is a simple grid class that can be used to display two-dimensional grids of posters. |
| ProgressBar | ProgressBar — description pending. |
| RadioButtonList | RadioButtonList displays a list of items with radio buttons for single selection. |
| Rectangle | Rectangle component for rendering solid colored rectangles. |
| ResolutionProvider | ResolutionProvider — description pending. |
| RowList | RowList displays a vertical list of rows, where each row scrolls horizontally through its items. |
| RsgPalette | Sets the color palette used by a StandardDialog and its child elements. |
| scaleForDeviceResolution | Workaround to scale the size based on the device resolution. |
| Scene | Scene component - the root node of a SceneGraph application. |
| ScrollableText | ScrollableText component for displaying vertically scrolling text content. |
| ScrollingLabel | ScrollingLabel component for displaying horizontally scrolling text. |
| SequentialAnimation | SequentialAnimation runs a set of child animations one after another. |
| SimpleLabel | SimpleLabel component for displaying a single line of text. |
| SoundEffect | SoundEffect plays short audio sound effects that can be triggered from UI events. |
| StandardDialog | Base dialog node for the Roku standard dialog framework. |
| StandardDialogNext | Portable dialog chrome composed from core-contract primitives on ModalBoundary. |
| StandardKeyboardDialog | Displays a keyboard dialog for text and voice entry of alphanumeric characters and symbols. |
| StandardMessageDialog | Displays a message dialog with optional title, text blocks, bulleted list, and buttons. |
| StandardPinPadDialog | Displays a PIN pad dialog for text and voice entry of numeric PIN codes. |
| StandardProgressDialog | Displays a progress dialog with a spinning indicator and message. |
| StdDlgActionCardItem | Focusable action card that highlights child items with optional icons. |
| StdDlgBulletTextItem | Displays a bulleted list of text in a StdDlgContentArea. |
| StdDlgButton | A button in a StdDlgButtonArea. |
| StdDlgButtonArea | Button area positioned at the bottom of a StandardDialog. |
| StdDlgContentArea | Content area containing the main body of a StandardDialog. |
| StdDlgCustomItem | Free-form custom item in a StdDlgContentArea for content requiring custom layout. |
| StdDlgDeterminateProgressItem | Displays a determinate progress indicator for tasks with a known duration. |
| StdDlgGraphicItem | Displays an image with optional text in a StdDlgContentArea. |
| StdDlgItemGroup | Groups StdDlg item nodes with reduced spacing and optional radio-button exclusivity. |
| StdDlgKeyboardItem | Displays a keyboard or PIN pad in a StdDlgContentArea. |
| StdDlgMultiStyleTextItem | Displays text with multiple styles in a StdDlgContentArea. |
| StdDlgProgressItem | Displays an indeterminate spinning progress indicator in a StdDlgContentArea. |
| StdDlgSideCardArea | Freeform side card area on the left or right side of a StandardDialog. |
| StdDlgTextItem | Displays a block of text in a StdDlgContentArea. |
| StdDlgTitleArea | Title area component displayed at the top of a StandardDialog. |
| TargetGroup | TargetGroup creates scrolling lists (or rows) of items where each item's size and position is defined by rectangular target regions in a TargetSet. |
| TargetList | TargetList extends TargetGroup with built-in focused/unfocused transitions and focus management policies, making it easy to create scrollable lists and rows with minimal scripting. |
| TargetSet | TargetSet defines rectangular target regions for a TargetGroup. |
| TimeGrid | TimeGrid is an EPG (Electronic Program Guide) component that displays a scrollable, time-based grid of TV channels and their programs. |
| TrickPlayBar | TrickPlayBar — description pending. |
| Tween | Tween — description pending. |
| useResolutionContext | useResolutionContext — description pending. |
| Vector2DFieldInterpolator | Vector2DFieldInterpolator animates a Vector2D field of a node through a series of keyframes. |
| Video | Video provides controlled playback of live or VOD content with optional built-in UI, trick play, and captions. |
| VideoContentNode | VideoContentNode component for specifying video playback content. |
| VoiceTextEditBox | Voice-enabled text edit box for standalone text entry (not inside a dialog). |
| ZoomRowList | ZoomRowList displays a vertically scrolling list of rows where the focused row smoothly zooms to a larger size. |
| Components types | Types shared by several @roku-sdk/components exports. |
Updated about 3 hours ago
What’s Next
Did this page help you?