Astral3D/docs/ui-migration-todo.md

Astral3D UI Migration TODO - NaiveUI to Shadcn UI + Tailwind CSS

Project: Astral3D Web 3D Editor Goal: Migrate from NaiveUI to Shadcn UI + Tailwind CSS Style: Minimalist Modern Created: 2026-03-12

---

Progress Overview

Phase	Status	Progress	Est. Time
Phase 1: Environment Setup	Done	100%	2-4 hours
Phase 2: Basic Components	In Progress	~30%	6-8 hours
Phase 3: Layout Components	Pending	0%	4-6 hours
Phase 4: Feedback Components	Pending	0%	4-6 hours
Phase 5: Data Components	Pending	0%	4-6 hours
Phase 6: Verification	Pending	0%	4-8 hours
Phase 7: Optimization	Pending	0%	2-4 hours

Overall Progress: ~15%

---

Phase 1: Environment Setup (Complete)

1.1 Dependencies

• Tailwind CSS v4 installed
• @tailwindcss/postcss installed
• Shadcn Vue dependencies (radix-vue, class-variance-authority, clsx, tailwind-merge)
• Dark mode support (@vueuse/core)

1.2 Configuration Files

• tailwind.config.ts created
• postcss.config.js updated (using @tailwindcss/postcss)
• src/lib/utils.ts (cn() utility function)
• src/assets/css/globals.css with Tailwind v4 syntax and CSS variables

1.3 Theme Design System

• Color system defined (matching NaiveUI theme)
• Spacing system
• Border radius system

---

Phase 2: Basic Components Migration (In Progress)

2.1 Button

• Component: Button created
• Location: src/components/ui/Button/Button.vue

2.2 Input

• Component: Input created
• Location: src/components/ui/Input/Input.vue

2.3 Card

• Components: Card, CardHeader, CardDescription, CardTitle, CardContent, CardFooter
• Location: src/components/ui/Card/

2.4 Dialog

• Components: Dialog, DialogHeader, DialogTitle, DialogDescription, DialogClose
• Location: src/components/ui/Dialog/

2.5 Select

• Pending implementation

2.6 Checkbox / Radio

• Pending implementation

2.7 Switch

• Pending implementation

---

Completed Components

// Available from: src/components/ui/index.ts
import { Button, Input, Card, CardHeader, CardDescription, CardTitle, CardContent, CardFooter } from '@/components/ui'

---

Build Status

• Project builds successfully with Vite
• Tailwind CSS v4 configured correctly
• PostCSS with @tailwindcss/postcss plugin working