@luxonis/ui-components

Internal Luxonis React component library.

This package is intended to provide reusable UI primitives and shared components for Luxonis projects. It will use:

• @luxonis/ui-colors as the semantic color source
• Tailwind CSS for styling
• shadcn-style component patterns
• Radix primitives where accessibility or composability benefits from them

Documents

• AGENTS.md: working rules for coding agents
• DESIGN.md: package architecture and design decisions
• IMPLEMENTATION_PLAN.md: phased implementation plan
• COMPONENT_CHECKLIST.md: checklist for adding a new component

Design Principles

• semantic tokens before hardcoded colors
• reusable library code before app-specific shortcuts
• small public APIs
• accessible defaults
• deterministic build output

Intended Starter Surface

• Button
• Badge
• Card
• Alert
• Input

Component Palette

The preferred component palette is Storybook. It can act as:

• an internal visual catalog
• a QA surface for variant coverage
• a quick sandbox for AI and human contributors

Usage

Import the prebuilt stylesheet once in the consuming app and then use the components from the package entrypoint.

import "@luxonis/ui-components/styles.css";
import { Button } from "@luxonis/ui-components";

Scripts

• npm run build --workspace=@luxonis/ui-components
• npm run test --workspace=@luxonis/ui-components
• npm run build:storybook --workspace=@luxonis/ui-components

Status

The initial package foundation is implemented:

• Tailwind + PostCSS build pipeline
• semantic token bridge generated from @luxonis/ui-colors
• starter components with typed exports
• Storybook catalog and Vitest smoke coverage