# 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

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

### 1.2 Configuration Files

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

### 1.3 Theme Design System

- [x] Color system defined (matching NaiveUI theme)
- [x] Spacing system
- [x] Border radius system

---

## Phase 2: Basic Components Migration (In Progress)

### 2.1 Button
- [x] Component: `Button` created
- [x] Location: `src/components/ui/Button/Button.vue`

### 2.2 Input
- [x] Component: `Input` created
- [x] Location: `src/components/ui/Input/Input.vue`

### 2.3 Card
- [x] Components: Card, CardHeader, CardDescription, CardTitle, CardContent, CardFooter
- [x] Location: `src/components/ui/Card/`

### 2.4 Dialog
- [x] Components: Dialog, DialogHeader, DialogTitle, DialogDescription, DialogClose
- [x] Location: `src/components/ui/Dialog/`

### 2.5 Select
- [ ] Pending implementation

### 2.6 Checkbox / Radio
- [ ] Pending implementation

### 2.7 Switch
- [ ] Pending implementation

---

## Completed Components

```typescript
// 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