# TPE Kit > Compact, accessible React 19 components for TPE internal software (`@tpe-oy/ui`, `@tpe-oy/charts`, `@tpe-oy/tokens`). Square geometry, TPE blue, light/dark/system themes, strict TypeScript, Finnish defaults. Each component link points to a Markdown page with an example, usage notes, the full props table and the published TypeScript declarations. Prefer these over the interactive JavaScript pages. ## Rules ### Setup - Import styles once at the app entry: `import '@tpe-oy/ui/styles.css';`. Charts also need `import '@tpe-oy/charts/styles.css';` after the UI styles. - Wrap the app (or a subtree) in ``. Portaled overlays inherit its theme. Do not add a global CSS reset for the kit. - Import from the package root (`import { Button } from '@tpe-oy/ui'`) or a component subpath (`@tpe-oy/ui/button`). Never import from `dist/` or internal files. - React 19 is a peer dependency. Components accept `ref` as a normal prop. ### State and events - Components are controlled: pass `value` and update it from `onValueChange`. The application owns the state; components never fetch, persist or clear data on their own. - Callbacks emit the _requested_ next value. Apply it with `setState`, or reject it. - Empty values are `null` (single selection, numbers, colors, dates), `[]` for multiple selection and `''` for free text. Do not pass `undefined` as a controlled value. - Native and Radix props pass through (`name`, `form`, `disabled`, `aria-*`, `onBlur`, …). Named fields submit through native forms; use `name` instead of manual hidden inputs. - Dates are civil `YYYY-MM-DD` strings, times are `HH:mm`. Timezone conversion is the application's job. - Remote data: pass `isLoading`, server results and `manualFiltering` / `search.mode = 'none'`; loading takes precedence over stale or empty items. ### Accessibility (required) - Every input gets a visible `label` prop (or a `