🌙 Component UX/UI Collection

A modern Dark Theme UI Component Collection built with React + TypeScript + Tailwind CSS.

---

🎨 Design Style

• Dark background
• Soft borders
• Low contrast highlights
• Rounded corners
• Minimal shadows
• Keyboard-friendly focus states

✨ Preview

Header

---

Footer

---

Sidebar

---

Button Component

---

Card Component

---

Tabs Component

---

Scroll Area

---

Select Item

---

Dialog Form

---

Upload Form

---

MarkDown Renderer & Table of Content

---

🧭 Navigation Components

• Pagination
• MenuBar
• NavigationBar
• DropdownMenu

💬 Feedback Components

• Alert
• AlertStatus
• PageLoader
• Spinner
• Skeleton

🎚 Controls

• Slider
• Switch
• Button
• Progress

✍️ Form Elements

• Typography
• Textarea
• PasswordToggleField
• Input,...

📁 Folder Structure

src
 ├─ assets
 ├─ components
 │   ├─ base
 │   ├─ data-display
 │   ├─ feedback
 │   ├─ forms
 │   ├─ media
 │   ├─ markdown
 │   ├─ navigation
 │   ├─ overlay
 │   └─ showcase
 │
 ├─ hooks
 │   ├─ usePagination.ts
 │   └─ useFileUpload.ts
 │
 ├─ libs
 │   └─ utils.ts
 │
 ├─ pages
 │   ├─ HomePage.tsx
 │   ├─ DemoPage.tsx
 │   └─ DemoSwitch.tsx
 │
 ├─ App.tsx
 ├─ main.tsx
 └─ index.css

⚙️ Tech Stack

• React 19
• TypeScript
• Tailwind CSS v4
• Vite
• React Icons
• React Markdown
• clsx + tailwind-merge

📌 Example Usage

<Button variant="secondary">
  Save
</Button>

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Choose item" />
  </SelectTrigger>

  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectContent>
</Select>

📬 Contact

• Email: hodtduy.work@gmail.com
• Linked In: hodangthaiduy

---

Thank you for checking this project!

Happy coding 💻