@tricrobotics/ui

TRIC design system — React UI components with glass surfaces, buttons, forms, and data display.

Install

npm install @tricrobotics/ui motion

Peer dependencies: react >= 18, react-dom >= 18, motion >= 12

Setup

1. Import styles

import '@tricrobotics/ui/styles.css';

2. Tailwind CSS (v4)

Mirror TRIC tokens in your app globals.css (see admin-dashboard src/styles/globals.css), or use exported tricTheme from @tricrobotics/ui/tokens as reference.

3. Theme provider

import { ThemeProvider } from '@tricrobotics/ui';

<ThemeProvider>
  <App />
</ThemeProvider>

Components read theme via useTheme(). You can also pass theme="light" | "dark" on individual components.

Usage

import { Button, StatCard, SegmentedPill } from '@tricrobotics/ui';
// or tree-shake:
import { Button } from '@tricrobotics/ui/buttons';

Buttons

<Button variant="primary" size="md" loading={isLoading}>
  Save
</Button>

Forms

<Input label="Robot ID" placeholder="e.g. R-12" />
<Select options={opts} value={v} onChange={setV} searchable />

Feedback

<Badge variant="completed">completed</Badge>
<RadialProgress value={0.72} />
<StreamingProgress current={50} total={100} percentComplete={50} />

Overlays

<Dialog open={open} onClose={() => setOpen(false)} title="Confirm" footer={...}>
  ...
</Dialog>

Package exports

| Path | Contents | |------|----------| | @tricrobotics/ui | All components | | @tricrobotics/ui/buttons | Button, IconButton, DropdownMenu, … | | @tricrobotics/ui/forms | Input, Textarea, Checkbox, Select, … | | @tricrobotics/ui/feedback | Badge, RadialProgress, StreamingProgress | | @tricrobotics/ui/display | StatCard, ActionCard, EmptyState, Legend | | @tricrobotics/ui/navigation | SegmentedPill, CollapsibleGroup, Timeline, WizardStepper | | @tricrobotics/ui/overlays | Dialog, Tooltip | | @tricrobotics/ui/tokens | Design tokens & tricTheme | | @tricrobotics/ui/hooks | ThemeProvider, useTheme | | @tricrobotics/ui/styles.css | Loading dots & progress animations |

Development

npm install
npm run build