Skip to content

Migrate Chat Pack shadcn Components & Theme to the @nebari Registry #166

Description

@jbouder

Summary

Re-source the chat pack's shadcn/ui components and theme from the Nebari design shadcn registry (the @nebari namespace) instead of the default shadcn registry. This adds a @nebari entry to registries in frontend/components.json, re-generates the vendored primitives in frontend/src/components/ui/ from that registry, and replaces the hand-authored theme tokens in frontend/src/main.css with the registry's @nebari/theme item. The shadcn CLI workflow stays — only the source registry changes.

Motivation

  • Aligns the chat pack's UI primitives and theme tokens with the shared Nebari design system
  • Design-system fixes, a11y improvements, and token updates arrive via shadcn add/re-sync rather than manual editing of the vendored files
  • Centralizes ownership of the large :root/.dark token block in frontend/src/main.css, which is currently maintained only in this repo
  • Treats installed ui/* primitives as upstream-managed source, so future updates are pulled, not re-authored
  • Keeps the existing, familiar shadcn CLI tooling — low-friction adoption, no new package or build-system change

Acceptance Criteria

  • @nebari registry added to the registries field in frontend/components.json ("@nebari": "https://nebari-dev.github.io/nebari-design/r/{name}.json"), which is currently {}
  • The 21 vendored primitives in frontend/src/components/ui/ (accordion, avatar, badge, button, card, checkbox, dialog, dropdown-menu, field, input, label, select, separator, skeleton, sonner, spinner, switch, table, toggle, toggle-group, tooltip) re-installed from @nebari via shadcn add @nebari/<name>
  • Theme tokens sourced from the @nebari/theme registry item rather than the local :root/.dark block in frontend/src/main.css
  • Chat-pack-specific tokens not provided by the registry (e.g. --color-bg-neutral-*, --color-bd-brand-*, .ot-NebariChat-markdown styles) intentionally retained or migrated, not silently dropped
  • style (new-york) and baseColor (neutral) in components.json reconciled with the registry's expected values
  • components.json tailwind.css path (src/index.css) reconciled with the actual token file (src/main.css)
  • Feature components under frontend/src/components/ render unchanged against the regenerated primitives
  • npm run check (Biome), npm run build (tsc -b && vite build), and npm run ci all pass
  • No visual regressions in light and dark themes

Out of Scope

  • Changes to the Nebari design registry itself — missing components or tokens are addressed upstream in nebari-design, not patched locally in the vendored copies
  • Backend or API changes; this is a frontend-only migration
  • Chat pack layout, conversation flow, or feature redesign — this is a like-for-like re-sourcing of components and theme
  • Migrating any other Nebari repo to the registry

Metadata

Metadata

Assignees

No one assigned

    Labels

    developer experienceSupports developer experience improvements

    Type

    Fields

    Priority

    Medium

    Start date

    None yet

    Target date

    None yet

    Size

    M

    Projects

    Status
    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions