add deps

ui/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "react": "^19.0.0",
+    "react-aria-components": "^1.6.0",
     "react-dom": "^19.0.0",
     "tailwindcss-react-aria-components": "^1.2.0"
   },

ui/src/App.tsx

@@ -1,10 +1,20 @@
-import { useState } from 'react'
+import { useState } from "react";
-import reactLogo from './assets/react.svg'
+import reactLogo from "./assets/react.svg";
-import viteLogo from '/vite.svg'
+import viteLogo from "/vite.svg";
-import './App.css'
+import "./App.css";
+
+import {
+  Button,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Select,
+  SelectValue,
+} from "react-aria-components";
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   return (
     <>
@@ -25,11 +35,25 @@ function App() {
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>
       </div>
+      <Select>
+        <Label>Favorite Animal</Label>
+        <Button>
+          <SelectValue />
+          <span aria-hidden="true">▼</span>
+        </Button>
+        <Popover>
+          <ListBox>
+            <ListBoxItem>Cat</ListBoxItem>
+            <ListBoxItem>Dog</ListBoxItem>
+            <ListBoxItem>Kangaroo</ListBoxItem>
+          </ListBox>
+        </Popover>
+      </Select>
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
     </>
-  )
+  );
 }
 
-export default App
+export default App;