Determined UI component library
State: open/verified · Kind: module · Audience: system
Summary
Section titled “Summary”- Provides a shared,
D-prefixed Vue/Nuxt component library — buttons, tables, dialogs, trees, command palette — for every app in the determined ecosystem, routed through semantic--d-*design tokens so theming is a token swap rather than a per-app fork. - Ships as a Nuxt layer with composables for theme, toast, confirm-dialog, and anchored-position behavior, plus its own Storybook and Playwright suites.
Statement
Section titled “Statement”@determined/ui packages the visual and interaction primitives shared across the determined app
ecosystem: roughly 70 D-prefixed Vue single-file components (DButton, DTree, DCommandPalette,
DTable, DDialogBlur, DConfirmDialog, …) plus composables (useDTheme, useDToast, useDConfirm,
useAnchoredPosition) and utilities (dSemantics, chords, parseQuantity). It distributes as a Nuxt
layer — its nuxt.config.ts is the package’s main export — so a consuming app extends it rather
than importing components ad hoc, and every component routes color/spacing through semantic --d-*
tokens instead of hard-coded values, making re-theming a token swap rather than a component fork.
It is the Determined system’s UI layer, shared outward to other consumers.
It is a real, actively-consumed dependency: solutions/determined’s fitness, agent-pants, shell,
code-editor products, plus ontological’s desktop, suspenders, and system-graph, plus apps/pumice and
apps/zoo all depend on @determined/ui in their package.json.
What it provides
Section titled “What it provides”- ~70 D-prefixed Vue components (buttons, inputs, tables, dialogs, trees, navigation, layout) with matching Storybook stories
- Composables for cross-cutting UI behavior: theme, toast, confirm dialogs, anchored positioning
- Semantic design-token surface (dSemantics.ts, app/assets/css/) so consuming apps theme via token swap
- Nuxt-layer packaging (nuxt.config.ts, app.config.ts) so consuming apps extend it directly rather than hand-wiring imports
Underlying implementation
Section titled “Underlying implementation”- packages/ts/ui/ (Nuxt layer: app/components/, app/composables/, app/utils/, app/assets/css/)
Locations
Section titled “Locations”packages/ts/ui/