Showcase example

This app is a component gallery: an interactive demo of the @roku-sdk/components UI library.

Purpose

This app exercises SDK components so you can see their API, props, and behavior on the device. A scene-based menu (SceneDialogMenu) drills into per-component info panels; many panels include a live property chooser that changes props and shows the effect. You can use this app as a reference for how to use a component.

Components showcased

The app demonstrates these components:

Dialogs, Label, Lists and Grids, BusySpinner, Button, ButtonGroup, Group, Screen Stack, Rectangle, ScrollableText, Poster, Font, Animation, Audio, SoundEffect, and Fullscreen Video.

Each entry maps to a panel under src/components/showcases/.

Notable structure

The app contains these files and folders:

main-menu.tsx: top-level menu wiring each item to its showcase panel
menu-scene.tsx and scene-wrapper.tsx: scene and sliding navigation between panels
property-chooser/: reusable controls for live-editing component props
Custom compiled SceneGraph items (RowListItem, MarkupGridItem, TimeGridChannelItem, and so on) that demonstrate BrightScript-backed list and grid items

Controls

You can use these keys to navigate the app:

Arrow keys and OK: Navigate menus and adjust properties
Back: Return to the previous panel or menu

Development

You can use these commands to build, test, and lint the app:

npx rk dev          # Build + deploy to Roku device
pnpm test           # Run tests
pnpm run lint       # Lint sources