Screen

A screen represents a set of widgets grouped with a saved state. There can only be one screen mounted at a time. Each screen has an unique screen ID (string) and it can be mounted by that ID. The following screens are built-in Kivy Hub:

You may add more screens in the screen-context.tsx file.

There generally aren’t any base components for screens however, it is preferred you use a <div> or similar element that spans the entire screen. A screen component should recieve an active boolean prop that dictates if it is visible or not. Here is an example:

import { cn } from '@/lib/utils';
 
export function NewScreen({ active }: { active: boolean }) {
  return (
    <div className={cn(!active && 'hidden')}>
      {your code here}
    </div>
  );
}

import { cn } from '@/lib/utils';
 
export function NewScreen({ active }: { active: boolean }) {
  if (!active) {
    return null;
  }
 
  return (
    <div>
      {your code here}
    </div>
  );
}