nebari-dev / nebari-dev/chat-pack

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

Open
#166 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

developer experience UI/UX/DX
Dominant language
TypeScript
Stars
1
Forks
2
Avg merge
58m
Merged PRs (30d)
7

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with frontend/components.json and frontend/src/main.css, then inspect the 21 existing primitives under frontend/src/components/ui/. Reconcile the registry, token, and CSS-path settings before re-sourcing the listed components and preserving chat-pack-specific tokens. Run npm run check, npm run build, and npm run ci, then verify unchanged rendering in light and dark themes.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.