Smart TV
🎯Smart TV Development

UI Components

Production-ready components for building Smart TV applications with Smart TV navigation, focus management, and remote control support.

⚠️

AppProvider is Mandatory!

Required

All Smart TV components require AppProvider to work. It initializes the Smart TV navigation system and manages focus throughout your application.

💡 Quick Tip: Always wrap your app's root component with AppProvider before using any other UI component.

📦

Installation

Install the Smart TV UI package using your preferred package manager:

▸
npm install @smart-tv/ui
🚀

Quick Start

Get your Smart TV app up and running in minutes with this minimal example:

import { AppProvider, Screen, Button, Grid, Card } from '@smart-tv/ui';

import '@smart-tv/ui/styles.css';



function App() {

  return (

    <AppProvider

      init={{

        debug: false,

        throttle: 0

      }}

    >

      <Screen focusKey="home" trackChildren>

        <h1>Welcome to Smart TV</h1>



        <Grid focusKey="content-grid" columns={4} gap={16}>

          {movies.map((movie) => (

            <Card

              key={movie.id}

              focusKey={`movie-${movie.id}`}

              onEnterPress={() => playMovie(movie)}

            >

              <img src={movie.poster} alt={movie.title} />

              <h3>{movie.title}</h3>

            </Card>

          ))}

        </Grid>

      </Screen>

    </AppProvider>

  );

}
📐

Layout Components

Advanced layouts with virtualization and infinite scroll

Grid

Grid layout with virtualization & infinite scroll

Row

Horizontal scrollable row with virtualization

⌨️

Input Components

On-screen keyboard and input controls

Keyboard

On-screen keyboard with multiple layouts

✨

Key Features

🎯

Smart TV Navigation

Navigate using arrow keys and D-pad with intelligent focus management

🚀

Virtualization

Render large lists efficiently with built-in virtualization

♾️

Infinite Scroll

Load more content automatically as users scroll

🌐

RTL Support

Right-to-left layout support for international apps

🎨

Customizable

Full styling control with className and active states

📘

TypeScript

Complete type safety with TypeScript definitions

💡

Focus Key Best Practices

Every focusable component requires a unique focusKey. Follow these conventions for maintainable and scalable code:

// ✅ Good: Descriptive, hierarchical, unique

<Button focusKey="home-hero-play-button">Play</Button>

<Card focusKey="movie-card-123">Movie Card</Card>

<Grid focusKey="trending-movies-grid">...</Grid>



// ❌ Bad: Generic, unclear, duplicate risk

<Button focusKey="btn1">Play</Button>

<Card focusKey="card">Movie Card</Card>

<Grid focusKey="grid">...</Grid>



// 💡 Tip: Use template literals for dynamic content

{movies.map((movie) => (

  <Card focusKey={`movie-${movie.id}`} key={movie.id}>

    {movie.title}

  </Card>

))}