feat(shadcn): #48 init scaffold alongside daisyUI

[fray-cloud]

Summary

Handcrafted shadcn init (rather than running the interactive CLI) to preserve the front/* alias and the Nx workspace layout. Scaffolding only — no call-site swaps. daisyUI plugin remains active (removed in #54).

• apps/web/components.json — style default, rsc true, baseColor neutral, cssVariables. Aliases mapped onto front/*: components → front/new-component, ui → front/new-component/ui, utils → front/lib/utils, lib → front/lib, hooks → front/hooks. iconLibrary: lucide.
• apps/web/src/lib/utils.ts — cn helper (clsx + tailwind-merge)
• apps/web/src/new-component/ui/ directory created (empty; [area:shadcn] add button, card, skeleton, avatar, progress components #49 fills it)
• apps/web/tailwind.config.js — darkMode: ['class'], theme.extend.colors wired to hsl(var(--*)) shadcn tokens, theme.extend.borderRadius, plugins list keeps require('daisyui') and adds tailwindcss-animate
• apps/web/app/globals.css — :root + .dark CSS variables under @layer base
• package.json — adds class-variance-authority, clsx, tailwind-merge, tailwindcss-animate, lucide-react

Closes #48.

Test plan

• npx nx affected -t lint test build --exclude web-e2e green (4 projects, 10 tasks)
• daisyUI classes still render identically (coexistence by design through [area:shadcn] bottom nav rebuild, remove daisyui plugin and dead MUI deps #54)

🤖 Generated with Claude Code

Summary by Sourcery

Introduce shadcn-style theming and utilities alongside existing Tailwind/daisyUI setup for the web app.

New Features:

• Add shadcn-style design tokens via CSS variables for light and dark themes in the global styles.
• Configure Tailwind to use shadcn-compatible color tokens, border radii, and animation plugin support.
• Introduce a shared cn utility for composing and merging Tailwind class names.
• Add shadcn component scaffolding configuration via components.json for the web app.

Enhancements:

• Extend Tailwind configuration with class-based dark mode handling and updated plugin list including tailwindcss-animate.

Build:

• Add UI utility and icon dependencies (class-variance-authority, clsx, tailwind-merge, tailwindcss-animate, lucide-react) to the project dependencies.

[sourcery-ai]

Reviewer's Guide

Hand-crafted shadcn/ui scaffolding is introduced alongside the existing daisyUI setup, wiring shadcn-style tokens into Tailwind (colors, radii, dark mode), adding a shared cn() utility and dependencies, and configuring component paths to respect the existing Nx front/* alias layout without changing any call sites yet.

Class diagram for the new cn utility module (class)

classDiagram
  class LibUtils {
    +cn(inputs ClassValue[]) string
  }

  class Clsx {
    +clsx(values ClassValue[]) string
  }

  class TailwindMerge {
    +twMerge(classNames string) string
  }

  LibUtils ..> Clsx : uses
  LibUtils ..> TailwindMerge : uses

Loading

Flow diagram for shadcn components path aliases in components.json (flow)

flowchart TD
  ComponentsJSON[components.json shadcn config] --> StyleDefault[style default]
  ComponentsJSON --> RscTrue[rsc true]
  ComponentsJSON --> BaseColorNeutral[baseColor neutral]
  ComponentsJSON --> IconLibraryLucide[iconLibrary lucide]

  ComponentsJSON --> AliasComponents[alias components]
  ComponentsJSON --> AliasUi[alias ui]
  ComponentsJSON --> AliasUtils[alias utils]
  ComponentsJSON --> AliasLib[alias lib]
  ComponentsJSON --> AliasHooks[alias hooks]

  AliasComponents --> FrontNewComponent[front_new_component]
  AliasUi --> FrontNewComponentUi[front_new_component_ui]
  AliasUtils --> FrontLibUtils[front_lib_utils]
  AliasLib --> FrontLib[front_lib]
  AliasHooks --> FrontHooks[front_hooks]

Loading

File-Level Changes

Change	Details	Files
Introduce shadcn/ui configuration and component path aliases without invoking the interactive CLI.	Add apps/web/components.json with shadcn config (style default, rsc true, baseColor neutral, cssVariables enabled). Map shadcn paths to existing Nx aliases: components → front/new-component, ui → front/new-component/ui, utils → front/lib/utils, lib → front/lib, hooks → front/hooks. Configure lucide as the icon library in the shadcn config.	apps/web/components.json
Add a shared cn() className utility aligned with shadcn conventions.	Create a cn(...inputs) helper that composes clsx and tailwind-merge to normalize and merge Tailwind class names. Type cn() inputs using clsx ClassValue for ergonomic usage across components.	apps/web/src/lib/utils.ts
Wire shadcn design tokens into Tailwind and enable class-based dark mode.	Enable darkMode: ['class'] in Tailwind config to drive theme via a .dark class. Extend Tailwind theme colors to reference CSS variables (border, input, ring, background, foreground, primary/secondary/destructive/muted/accent/popover/card and their foregrounds) via hsl(var(--token)). Extend borderRadius scale (lg, md, sm) to read from the --radius CSS variable. Keep the daisyUI plugin while adding tailwindcss-animate to the Tailwind plugins array.	apps/web/tailwind.config.js
Define global CSS variables for shadcn light and dark themes.	Add :root CSS custom properties for background, foreground, card/popover, primary/secondary/muted/accent, destructive, border/input/ring, and radius under @layer base. Add a .dark theme variant that overrides the same tokens for dark mode. Leave existing global typography (body font-family) unchanged aside from the new base layer.	apps/web/app/globals.css
Add runtime dependencies required by shadcn/ui and its utilities.	Add class-variance-authority and clsx for variant and className composition. Add tailwind-merge and tailwindcss-animate for Tailwind class merging and animations. Add lucide-react as the icon library used by shadcn. Update package-lock.json to reflect the new dependencies.	package.json package-lock.json

Possibly linked issues

• [area:shadcn] shadcn init — components.json, lib/utils, Tailwind config #48: They match: shadcn init scaffolding, configs, utils, Tailwind, globals, and dependencies with daisyUI preserved.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
animal-project	Error		Apr 13, 2026 8:34am

[nx-cloud]

View your CI Pipeline Execution ↗ for commit c806363

Command	Status	Duration	Result
nx build web	✅ Succeeded	<1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-04-13 08:35:27 UTC

[sourcery-ai]

Hey - I've reviewed your changes and they look great!

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[fray-cloud]

Superseded by #61 — full #48→#54 chain lands via #61.