diff --git a/apps/docs/content/index.mdx b/apps/docs/content/index.mdx
index 3536e44..f878b7e 100644
--- a/apps/docs/content/index.mdx
+++ b/apps/docs/content/index.mdx
@@ -134,8 +134,18 @@ title: zen
   <Box padding="5" border borderRadius="lg" marginBottom="6" backgroundColor="surface-base" style={{ breakInside: 'avoid' }}>
     <Column gap="4">
       <Text size="sm" color="muted" weight="medium">Select</Text>
-      <Select label="Country" placeholder="Select country" items={['United States', 'United Kingdom', 'Canada', 'Australia']} />
-      <ComboBox label="Framework" placeholder="Choose one" items={['React', 'Vue', 'Angular', 'Svelte']} />
+      <Select label="Country" placeholder="Select country">
+  <ListItem id="us">United States</ListItem>
+  <ListItem id="uk">United Kingdom</ListItem>
+  <ListItem id="ca">Canada</ListItem>
+  <ListItem id="au">Australia</ListItem>
+</Select>
+      <ComboBox label="Framework" placeholder="Choose one">
+  <ListItem id="react">React</ListItem>
+  <ListItem id="vue">Vue</ListItem>
+  <ListItem id="angular">Angular</ListItem>
+  <ListItem id="svelte">Svelte</ListItem>
+</ComboBox>
     </Column>
   </Box>