add usage.md

README.md

@@ -93,6 +93,9 @@ and use
   <img align="center" src="https://raw.githubusercontent.com/programming-with-ia/shadcn-theme-editor/master/screenshots/shadcn-theme-editor.png" alt="logo">
 </p>
 
+## [How to Use the UI](usage.md)
+[usage.md](usage.md)
+
 ## Upcoming Features
 
 - use [jln themes](https://ui.jln.dev/) directly in your project

usage.md

@@ -0,0 +1,29 @@
+<h1 align="center">Shadcn Theme Editor</h1>
+
+## Usage
+<p align="center">
+  <img align="center" src="https://raw.githubusercontent.com/programming-with-ia/shadcn-theme-editor/master/screenshots/usage-pic.png" alt="Shadcn Usage ScreenShot">
+</p>
+
+### 1. Reset Button
+
+- Click to **Reset the Theme**.
+- Press `⌘ + Click` to delete all themes stored in Local Storage.
+
+### 2. Copy Button
+
+- Click to **Copy the Current Theme** to your clipboard.
+
+### 3. Color Picker Trigger
+
+- Opens the color picker for the selected theme color.
+
+### 4. Color Button & 5. Tooltip
+
+- **Color Name/Title**: Displays the name of the color.
+- **Double-Click**: Copy the current color value to the clipboard.
+- **Hover**: Display the current value of the color in a tooltip.
+
+### 6. Theme Changer
+
+- Switch between theme modes: **System**, **Dark**, or **Light** using [`next-themes`](https://github.com/pacocoursey/next-themes).