feat(ui): Add UI library

[danditomaso]

Description

This pull request introduces a new UI package, @meshtastic/ui, which provides a set of reusable React components, theme management, and configuration for building consistent user interfaces. The main changes include the addition of foundational UI components, theme provider logic, and configuration files for styling and component aliases.

New UI Package and Configuration

• Added package.json for the new @meshtastic/ui package, specifying dependencies, scripts, exports, and peer dependencies to support a modern React and Tailwind-based UI library.
• Added components.json to configure component aliases, icon library, style, and Tailwind settings for the UI package.

Theming and Styling

• Implemented theme-provider.tsx to manage light, dark, and system themes, including logic for persisting theme choice and updating the document root class.
• Added base CSS rules in app.css to support dark and light modes via the color-scheme property.

Core UI Components

• Added foundational UI components: button.tsx, badge.tsx, input.tsx, separator.tsx, collapsible.tsx, and dropdown-menu.tsx, each with variants, accessibility attributes, and styling integrated with Tailwind and Radix UI. [1] [2] [3] [4] [5] [6]

Checklist

• Code follows project style guidelines
• Documentation has been updated or added
• Tests have been added or updated
• All i18n translation labels have been added (read
  CONTRIBUTING_I18N_DEVELOPER_GUIDE.md for more details)

[vercel]

@danditomaso is attempting to deploy a commit to the Meshtastic Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull Request Overview

This pull request introduces a new UI package (@meshtastic/ui) that provides a comprehensive set of reusable React components, theme management, and configuration for building consistent user interfaces across the Meshtastic project. The package leverages Tailwind CSS v4, Radix UI primitives, and modern React patterns to create a foundational component library.

Key Changes

• Creation of a new @meshtastic/ui package with essential UI components (Button, Badge, Input, Separator, Collapsible, Dropdown Menu, Sidebar, Sheet, Tooltip, Skeleton)
• Implementation of theme provider with light/dark/system mode support
• Integration of Tailwind CSS v4 with custom design tokens and theming system

Reviewed Changes

Copilot reviewed 27 out of 28 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/ui/package.json	Package configuration defining dependencies, scripts, and exports for the UI library
packages/ui/vite.config.ts	Vite build configuration for library bundling with TypeScript support
packages/ui/tsconfig.json	TypeScript configuration for the UI package
packages/ui/src/index.ts	Main entry point exporting components and types
packages/ui/src/components/theme-provider.tsx	Theme management provider with localStorage persistence
packages/ui/src/components/ui/*.tsx	Core UI component implementations (Button, Badge, Input, Sidebar, etc.)
packages/ui/src/lib/theme/default.css	Default theme CSS with design tokens
packages/web/src/index.css	Updated with scrollbar styling and commented imports
packages/web/src/App.tsx	Minor layout adjustment and commented ThemeProvider integration

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
web-test	Error			Oct 24, 2025 2:02pm