UI Components
Production-ready components for building Smart TV applications with Smart TV navigation, focus management, and remote control support.
AppProvider is Mandatory!
RequiredAll 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:
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() {
const movies = [
{
id: 1,
poster: "https://images.unsplash.com/photo-1524985069026-dd778a71c7b4?w=500",
title: "The Silent Horizon",
},
{
id: 2,
poster: "https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=500",
title: "Neon Streets",
},
{
id: 3,
poster: "https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?w=500",
title: "Lost in the Night",
},
{
id: 4,
poster: "https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?w=500",
title: "Deep Frontier",
},
{
id: 5,
poster: "https://images.unsplash.com/photo-1505685296765-3a2736de412f?w=500",
title: "Desert Echoes",
},
{
id: 6,
poster: "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=500",
title: "Solar Drift",
},
{
id: 7,
poster: "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=500",
title: "Midnight Code",
},
{
id: 8,
poster: "https://images.unsplash.com/photo-1478720568477-152d9b164e26?w=500",
title: "Urban Phantom",
}
]
return (
<AppProvider
init={{
debug: true,
throttle: 0
}}
>
<Screen focusKey="home" trackChildren selFocus>
<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={() => console.log('ENTER ->', movie.title)}
>
<img src={movie.poster} alt={movie.title} />
<h3>{movie.title}</h3>
</Card>
))}
</Grid>
</Screen>
</AppProvider>
);
}
export default App
Core Components
Foundation components required for Smart TV applications
UI Components
Interactive components for navigation and user interaction
Layout Components
Advanced layouts with virtualization and infinite scroll
Overlays
Modal dialogs, drawers, and notification components
Input Components
On-screen keyboard and input controls
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>
))}