diff --git a/Makefile b/Makefile
index b4b7b4df8fb..1213c817b71 100644
--- a/Makefile
+++ b/Makefile
@@ -117,7 +117,6 @@ check-examples:
 	yarn tsc --project dist/docs-examples/tsconfig.json
 
 starter:
-	node scripts/extractStarter.mjs
 	cd starters/docs && yarn --no-immutable && yarn tsc
 
 starter-zip: starter
diff --git a/packages/react-aria-components/docs/Button.mdx b/packages/react-aria-components/docs/Button.mdx
index ad3319d735d..0bb6ce7bbb0 100644
--- a/packages/react-aria-components/docs/Button.mdx
+++ b/packages/react-aria-components/docs/Button.mdx
@@ -67,6 +67,10 @@ import {Button} from 'react-aria-components';
   outline: none;
   padding: 6px 10px;
   text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
 
   &[data-pressed] {
     box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
diff --git a/packages/react-aria-components/docs/Calendar.mdx b/packages/react-aria-components/docs/Calendar.mdx
index 0ea8371c7ca..6fa2e2ce566 100644
--- a/packages/react-aria-components/docs/Calendar.mdx
+++ b/packages/react-aria-components/docs/Calendar.mdx
@@ -43,12 +43,13 @@ type: component
 
 ```tsx example
 import {Calendar, Heading, Button, CalendarGrid, CalendarCell} from 'react-aria-components';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
 
 <Calendar aria-label="Appointment date">
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <CalendarGrid>
     {date => <CalendarCell date={date} />}
@@ -218,9 +219,9 @@ function MyCalendar<T extends DateValue>({errorMessage, ...props}: MyCalendarPro
   return (
     <Calendar {...props}>
       <header>
-        <Button slot="previous">◀</Button>
+        <Button slot="previous"><ChevronLeft size={20} /></Button>
         <Heading />
-        <Button slot="next">▶</Button>
+        <Button slot="next"><ChevronRight size={20} /></Button>
       </header>
       <CalendarGrid>
         {date => <CalendarCell date={date} />}
@@ -376,9 +377,9 @@ Multiple `CalendarGrid` elements can be rendered to show multiple months at once
 ```tsx example
 <Calendar aria-label="Appointment date" visibleDuration={{months: 3}}>
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
     <CalendarGrid>
@@ -401,9 +402,9 @@ The `pageBehavior` prop allows you to control how the calendar navigates between
 ```tsx example
 <Calendar aria-label="Appointment date" visibleDuration={{months: 3}} pageBehavior="single">
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
     <CalendarGrid>
@@ -735,9 +736,9 @@ import {CalendarGridHeader, CalendarHeaderCell, CalendarGridBody} from 'react-ar
 
 <Calendar aria-label="Appointment date">
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <CalendarGrid>
     <CalendarGridHeader>
@@ -920,9 +921,9 @@ function CalendarValue() {
 
 <Calendar>
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <CalendarGrid>
     {date => <CalendarCell date={date} />}
@@ -966,9 +967,9 @@ function WeekCalendarGrid(props: CalendarGridProps) {
 <Calendar visibleDuration={{weeks: 1}} defaultValue={today(getLocalTimeZone())}>
   <div className="week">
     <Heading />
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <WeekCalendarGrid />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </div>
 </Calendar>
 ```
diff --git a/packages/react-aria-components/docs/ColorSlider.mdx b/packages/react-aria-components/docs/ColorSlider.mdx
index d069ebe9b0f..7b3b1b01fb2 100644
--- a/packages/react-aria-components/docs/ColorSlider.mdx
+++ b/packages/react-aria-components/docs/ColorSlider.mdx
@@ -70,10 +70,14 @@ import {ColorSlider, ColorThumb, Label, SliderOutput, SliderTrack} from 'react-a
 
   .react-aria-Label {
     grid-area: label;
+    color: var(--text-color);
   }
 
   .react-aria-SliderOutput {
     grid-area: output;
+    width: 4ch;
+    text-align: end;
+    color: var(--text-color);
   }
 
   .react-aria-SliderTrack {
@@ -190,7 +194,7 @@ export function MyColorSlider({label, ...props}: MyColorSliderProps) {
     <ColorSlider {...props}>
       <Label>{label}</Label>
       <SliderOutput />
-      <SliderTrack 
+      <SliderTrack
         style={({defaultStyle}) => ({
           background: `${defaultStyle.background},
             repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
diff --git a/packages/react-aria-components/docs/ComboBox.mdx b/packages/react-aria-components/docs/ComboBox.mdx
index d7df35f902a..379b8fb66f1 100644
--- a/packages/react-aria-components/docs/ComboBox.mdx
+++ b/packages/react-aria-components/docs/ComboBox.mdx
@@ -51,12 +51,13 @@ type: component
 
 ```tsx example
 import {ComboBox, Label, Input, Button, Popover, ListBox, ListBoxItem} from 'react-aria-components';
+import {ChevronDown} from 'lucide-react';
 
 <ComboBox>
   <Label>Favorite Animal</Label>
   <div>
     <Input />
-    <Button>▼</Button>
+    <Button><ChevronDown size={16} /></Button>
   </div>
   <Popover>
     <ListBox>
@@ -338,7 +339,7 @@ function MyComboBox<T extends object>({label, description, errorMessage, childre
       <Label>{label}</Label>
       <div className="my-combobox-container">
         <Input />
-        <Button>▼</Button>
+        <Button><ChevronDown size={16} /></Button>
       </div>
       {description && <Text slot="description">{description}</Text>}
       <FieldError>{errorMessage}</FieldError>
@@ -1062,7 +1063,7 @@ The `description` slot can be used to associate additional help text with a Comb
   <Label>Favorite Animal</Label>
   <div>
     <Input />
-    <Button>▼</Button>
+    <Button><ChevronDown size={16} /></Button>
   </div>
   {/*- begin highlight -*/}
   <Text slot="description">Please select an animal.</Text>
@@ -1409,6 +1410,7 @@ This example shows a `ComboBoxClearButton` component that can be placed within a
 
 ```tsx example
 import {ComboBoxStateContext} from 'react-aria-components';
+import {X} from 'lucide-react';
 
 function ComboBoxClearButton() {
   /*- begin highlight -*/
@@ -1421,7 +1423,7 @@ function ComboBoxClearButton() {
       className="clear-button"
       aria-label="Clear"
       onPress={() => state?.setSelectedKey(null)}>
-      ✕
+      <X size={14} />
     </Button>
   );
 }
@@ -1433,7 +1435,7 @@ function ComboBoxClearButton() {
     {/*- begin highlight -*/}
     <ComboBoxClearButton />
     {/*- end highlight -*/}
-    <Button>▼</Button>
+    <Button><ChevronDown size={16} /></Button>
   </div>
   <Popover>
     <ListBox>
@@ -1463,6 +1465,9 @@ function ComboBoxClearButton() {
   border: none;
   padding: 0;
   outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &[data-pressed] {
     background: dimgray;
diff --git a/packages/react-aria-components/docs/DatePicker.mdx b/packages/react-aria-components/docs/DatePicker.mdx
index 746739f11a1..f58b67e3bda 100644
--- a/packages/react-aria-components/docs/DatePicker.mdx
+++ b/packages/react-aria-components/docs/DatePicker.mdx
@@ -49,6 +49,7 @@ type: component
 
 ```tsx example
 import {DatePicker, Label, Group, Popover, Dialog, Calendar, CalendarGrid, CalendarCell, Button, Heading, DateInput, DateSegment} from 'react-aria-components';
+import {ChevronDown, ChevronLeft, ChevronRight} from 'lucide-react';
 
 <DatePicker>
   <Label>Date</Label>
@@ -56,15 +57,15 @@ import {DatePicker, Label, Group, Popover, Dialog, Calendar, CalendarGrid, Calen
     <DateInput>
       {segment => <DateSegment segment={segment} />}
     </DateInput>
-    <Button>▼</Button>
+    <Button><ChevronDown size={20} /></Button>
   </Group>
   <Popover>
     <Dialog>
       <Calendar>
         <header>
-          <Button slot="previous">◀</Button>
+          <Button slot="previous"><ChevronLeft size={20} /></Button>
           <Heading />
-          <Button slot="next">▶</Button>
+          <Button slot="next"><ChevronRight size={20} /></Button>
         </header>
         <CalendarGrid>
           {date => <CalendarCell date={date} />}
@@ -197,7 +198,7 @@ Note that most of this anatomy is shared with [DateRangePicker](DateRangePicker.
 
 ### Internationalization
 
-To ensure the proper date and time format in RTL locales, `DateInput` must have `display` set to either `inline`, `inline-block`, or `block`. 
+To ensure the proper date and time format in RTL locales, `DateInput` must have `display` set to either `inline`, `inline-block`, or `block`.
 
 ### Concepts
 
@@ -305,7 +306,7 @@ function MyDatePicker<T extends DateValue>({label, description, errorMessage, fi
         <DateInput>
           {segment => <DateSegment segment={segment} />}
         </DateInput>
-        <Button>▼</Button>
+        <Button><ChevronDown size={20} /></Button>
       </Group>
       {description && <Text slot="description">{description}</Text>}
       <FieldError>{errorMessage}</FieldError>
@@ -313,9 +314,9 @@ function MyDatePicker<T extends DateValue>({label, description, errorMessage, fi
         <Dialog>
           <Calendar firstDayOfWeek={firstDayOfWeek}>
             <header>
-              <Button slot="previous">◀</Button>
+              <Button slot="previous"><ChevronLeft size={20} /></Button>
               <Heading />
-              <Button slot="next">▶</Button>
+              <Button slot="next"><ChevronRight size={20} /></Button>
             </header>
             <CalendarGrid>
               {date => <CalendarCell date={date} />}
@@ -507,7 +508,7 @@ import {Form, FieldError} from 'react-aria-components';
       <DateInput>
         {segment => <DateSegment segment={segment} />}
       </DateInput>
-      <Button>▼</Button>
+      <Button><ChevronDown size={20} /></Button>
     </Group>
     {/*- begin highlight -*/}
     <FieldError />
@@ -516,9 +517,9 @@ import {Form, FieldError} from 'react-aria-components';
       <Dialog>
         <Calendar>
           <header>
-            <Button slot="previous">◀</Button>
+            <Button slot="previous"><ChevronLeft size={20} /></Button>
             <Heading />
-            <Button slot="next">▶</Button>
+            <Button slot="next"><ChevronRight size={20} /></Button>
           </header>
           <CalendarGrid>
             {date => <CalendarCell date={date} />}
@@ -646,7 +647,7 @@ The `description` slot can be used to associate additional help text with a date
     <DateInput>
       {segment => <DateSegment segment={segment} />}
     </DateInput>
-    <Button>▼</Button>
+    <Button><ChevronDown size={20} /></Button>
   </Group>
   {/*- begin highlight -*/}
   <Text slot="description">Please select a weekday between 9 AM and 5 PM.</Text>
@@ -655,9 +656,9 @@ The `description` slot can be used to associate additional help text with a date
     <Dialog>
       <Calendar>
         <header>
-          <Button slot="previous">◀</Button>
+          <Button slot="previous"><ChevronLeft size={20} /></Button>
           <Heading />
-          <Button slot="next">▶</Button>
+          <Button slot="next"><ChevronRight size={20} /></Button>
         </header>
         <CalendarGrid>
           {date => <CalendarCell date={date} />}
@@ -1148,15 +1149,15 @@ function DatePickerClearButton() {
     {/*- begin highlight -*/}
     <DatePickerClearButton />
     {/*- end highlight -*/}
-    <Button>▼</Button>
+    <Button><ChevronDown size={20} /></Button>
   </Group>
   <Popover>
     <Dialog>
       <Calendar>
         <header>
-          <Button slot="previous">◀</Button>
+          <Button slot="previous"><ChevronLeft size={20} /></Button>
           <Heading />
-          <Button slot="next">▶</Button>
+          <Button slot="next"><ChevronRight size={20} /></Button>
         </header>
         <CalendarGrid>
           {date => <CalendarCell date={date} />}
diff --git a/packages/react-aria-components/docs/DateRangePicker.mdx b/packages/react-aria-components/docs/DateRangePicker.mdx
index daad983725b..086debace01 100644
--- a/packages/react-aria-components/docs/DateRangePicker.mdx
+++ b/packages/react-aria-components/docs/DateRangePicker.mdx
@@ -48,6 +48,7 @@ type: component
 
 ```tsx example
 import {DateRangePicker, Label, Group, Popover, Dialog, RangeCalendar, CalendarGrid, CalendarCell, Button, Heading, DateInput, DateSegment} from 'react-aria-components';
+import {ChevronDown, ChevronLeft, ChevronRight} from 'lucide-react';
 
 <DateRangePicker>
   <Label>Trip dates</Label>
@@ -59,15 +60,15 @@ import {DateRangePicker, Label, Group, Popover, Dialog, RangeCalendar, CalendarG
     <DateInput slot="end">
       {segment => <DateSegment segment={segment} />}
     </DateInput>
-    <Button>▼</Button>
+    <Button><ChevronDown size={20} /></Button>
   </Group>
   <Popover>
     <Dialog>
       <RangeCalendar>
         <header>
-          <Button slot="previous">◀</Button>
+          <Button slot="previous"><ChevronLeft size={20} /></Button>
           <Heading />
-          <Button slot="next">▶</Button>
+          <Button slot="next"><ChevronRight size={20} /></Button>
         </header>
         <CalendarGrid>
           {date => <CalendarCell date={date} />}
@@ -234,7 +235,7 @@ Note that most of this anatomy is shared with [DatePicker](DatePicker.html), so
 
 ### Internationalization
 
-To ensure the proper date and time format in RTL locales, `DateInput` must have `display` set to either `inline`, `inline-block`, or `block`. 
+To ensure the proper date and time format in RTL locales, `DateInput` must have `display` set to either `inline`, `inline-block`, or `block`.
 
 ### Concepts
 
@@ -342,7 +343,7 @@ function MyDateRangePicker<T extends DateValue>({label, description, errorMessag
         <DateInput slot="end">
           {segment => <DateSegment segment={segment} />}
         </DateInput>
-        <Button>▼</Button>
+        <Button><ChevronDown size={20} /></Button>
       </Group>
       {description && <Text slot="description">{description}</Text>}
       <FieldError>{errorMessage}</FieldError>
@@ -350,9 +351,9 @@ function MyDateRangePicker<T extends DateValue>({label, description, errorMessag
         <Dialog>
           <RangeCalendar firstDayOfWeek={firstDayOfWeek}>
             <header>
-              <Button slot="previous">◀</Button>
+              <Button slot="previous"><ChevronLeft size={20} /></Button>
               <Heading />
-              <Button slot="next">▶</Button>
+              <Button slot="next"><ChevronRight size={20} /></Button>
             </header>
             <CalendarGrid>
               {date => <CalendarCell date={date} />}
@@ -567,7 +568,7 @@ import {Form, FieldError} from 'react-aria-components';
       <DateInput slot="end">
         {segment => <DateSegment segment={segment} />}
       </DateInput>
-      <Button>▼</Button>
+      <Button><ChevronDown size={20} /></Button>
     </Group>
     {/*- begin highlight -*/}
     <FieldError />
@@ -576,9 +577,9 @@ import {Form, FieldError} from 'react-aria-components';
       <Dialog>
         <RangeCalendar>
           <header>
-            <Button slot="previous">◀</Button>
+            <Button slot="previous"><ChevronLeft size={20} /></Button>
             <Heading />
-            <Button slot="next">▶</Button>
+            <Button slot="next"><ChevronRight size={20} /></Button>
           </header>
           <CalendarGrid>
             {date => <CalendarCell date={date} />}
@@ -732,7 +733,7 @@ The `description` slot can be used to associate additional help text with a date
     <DateInput slot="end">
       {segment => <DateSegment segment={segment} />}
     </DateInput>
-    <Button>▼</Button>
+    <Button><ChevronDown size={20} /></Button>
   </Group>
   {/*- begin highlight -*/}
   <Text slot="description">Please your vacation dates.</Text>
@@ -741,9 +742,9 @@ The `description` slot can be used to associate additional help text with a date
     <Dialog>
       <RangeCalendar>
         <header>
-          <Button slot="previous">◀</Button>
+          <Button slot="previous"><ChevronLeft size={20} /></Button>
           <Heading />
-          <Button slot="next">▶</Button>
+          <Button slot="next"><ChevronRight size={20} /></Button>
         </header>
         <CalendarGrid>
           {date => <CalendarCell date={date} />}
@@ -1241,15 +1242,15 @@ function DateRangePickerClearButton() {
     {/*- begin highlight -*/}
     <DateRangePickerClearButton />
     {/*- end highlight -*/}
-    <Button>▼</Button>
+    <Button><ChevronDown size={20} /></Button>
   </Group>
   <Popover>
     <Dialog>
       <RangeCalendar>
         <header>
-          <Button slot="previous">◀</Button>
+          <Button slot="previous"><ChevronLeft size={20} /></Button>
           <Heading />
-          <Button slot="next">▶</Button>
+          <Button slot="next"><ChevronRight size={20} /></Button>
         </header>
         <CalendarGrid>
           {date => <CalendarCell date={date} />}
diff --git a/packages/react-aria-components/docs/Disclosure.mdx b/packages/react-aria-components/docs/Disclosure.mdx
index 19de620ceb5..bf9cd439f0d 100644
--- a/packages/react-aria-components/docs/Disclosure.mdx
+++ b/packages/react-aria-components/docs/Disclosure.mdx
@@ -40,13 +40,12 @@ type: component
 
 ```tsx example
 import {Disclosure, Button, DisclosurePanel, Heading} from 'react-aria-components';
+import {ChevronRight} from 'lucide-react';
 
 <Disclosure>
   <Heading>
     <Button slot="trigger">
-      <svg viewBox="0 0 24 24">
-        <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-      </svg>
+      <ChevronRight />
       System Requirements
     </Button>
   </Heading>
@@ -79,8 +78,6 @@ import {Disclosure, Button, DisclosurePanel, Heading} from 'react-aria-component
     svg {
       rotate: 0deg;
       transition: rotate 200ms;
-      width: 12px;
-      height: 12px;
       fill: none;
       stroke: currentColor;
       stroke-width: 3px;
@@ -102,7 +99,7 @@ import {Disclosure, Button, DisclosurePanel, Heading} from 'react-aria-component
 
 ## Features
 
-Disclosures can be built with the [&lt;details&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [&lt;summary&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) HTML elements, but this can be difficult to style, especially when adding adjacent interactive elements, like buttons, to the disclosure's heading. `Disclosure` helps achieve accessible disclosures implemented with the correct ARIA pattern while making custom styling easy. 
+Disclosures can be built with the [&lt;details&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [&lt;summary&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) HTML elements, but this can be difficult to style, especially when adding adjacent interactive elements, like buttons, to the disclosure's heading. `Disclosure` helps achieve accessible disclosures implemented with the correct ARIA pattern while making custom styling easy.
 
 * **Flexible** - Structured such that it can be used standalone or combined with other disclosures to form a `DisclosureGroup`
 * **Keyboard Interaction** - When focused, a disclosure's visibility can be toggled with either the <Keyboard>Enter</Keyboard> or <Keyboard>Space</Keyboard> key, and the appropriate ARIA attributes are automatically applied.
@@ -147,9 +144,7 @@ function MyDisclosure({title, children, ...props}: MyDisclosureProps) {
     <Disclosure {...props}>
       <Heading>
         <Button slot="trigger">
-          <svg viewBox="0 0 24 24">
-            <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-          </svg>
+          <ChevronRight />
           {title}
         </Button>
       </Heading>
@@ -194,7 +189,7 @@ function ControlledExpanded() {
 
 ## Disabled
 
-A Disclosure can be disabled using the `isDisabled` prop. 
+A Disclosure can be disabled using the `isDisabled` prop.
 
 ```tsx example
 <MyDisclosure title="Introduction to Knitting" isDisabled>
@@ -211,9 +206,7 @@ In some use cases, you may want to add an interactive element, like a button, ad
   <div style={{display: 'flex', alignItems: 'center'}}>
     <Heading>
       <Button slot="trigger">
-        <svg viewBox="0 0 24 24">
-          <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-        </svg>
+        <ChevronRight />
         System Requirements
       </Button>
     </Heading>
diff --git a/packages/react-aria-components/docs/DisclosureGroup.mdx b/packages/react-aria-components/docs/DisclosureGroup.mdx
index d530ce2c672..e5e8e2c5a37 100644
--- a/packages/react-aria-components/docs/DisclosureGroup.mdx
+++ b/packages/react-aria-components/docs/DisclosureGroup.mdx
@@ -42,14 +42,13 @@ type: component
 
 ```tsx example
 import {DisclosureGroup, Disclosure, Button, DisclosurePanel, Heading} from 'react-aria-components';
+import {ChevronRight} from 'lucide-react';
 
 <DisclosureGroup defaultExpandedKeys={['personal']}>
   <Disclosure id="personal">
     <Heading>
       <Button slot="trigger">
-        <svg viewBox="0 0 24 24">
-          <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-        </svg>
+        <ChevronRight />
         Personal Information
       </Button>
     </Heading>
@@ -60,9 +59,7 @@ import {DisclosureGroup, Disclosure, Button, DisclosurePanel, Heading} from 'rea
   <Disclosure id="billing">
     <Heading>
       <Button slot="trigger">
-        <svg viewBox="0 0 24 24">
-          <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-        </svg>
+        <ChevronRight />
         Billing Address
       </Button>
     </Heading>
@@ -81,7 +78,7 @@ import {DisclosureGroup, Disclosure, Button, DisclosurePanel, Heading} from 'rea
 
 ## Features
 
-Disclosure groups can be built by combining multiple disclosures built in HTML with the [&lt;details&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [&lt;summary&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) HTML elements, but this can be difficult to style, especially when adding adjacent interactive elements, like buttons, to the disclosure's heading. `DisclosureGroup` helps achieve accessible disclosures implemented with the correct ARIA pattern while making custom styling easy. 
+Disclosure groups can be built by combining multiple disclosures built in HTML with the [&lt;details&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [&lt;summary&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) HTML elements, but this can be difficult to style, especially when adding adjacent interactive elements, like buttons, to the disclosure's heading. `DisclosureGroup` helps achieve accessible disclosures implemented with the correct ARIA pattern while making custom styling easy.
 
 * **Accessible** - Disclosure group is exposed to assistive technology via ARIA. Uses hidden="until-found" in supported browsers, enabling find-in-page search support and improved search engine visibility for collapsed content.
 * **Styleable** - Disclosures include builtin states for styling such as keyboard focus, disabled, and expanded states.
@@ -137,9 +134,7 @@ function MyDisclosure({title, children, ...props}: MyDisclosureProps) {
     <Disclosure {...props}>
       <Heading>
         <Button slot="trigger">
-          <svg viewBox="0 0 24 24">
-            <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-          </svg>
+          <ChevronRight />
           {title}
         </Button>
       </Heading>
@@ -188,7 +183,7 @@ function ControlledExpanded(){
 ```
 ### Multiple expanded
 
-By default, only one disclosure will be open at a time. To allow multiple disclosures to expand, use the `allowsMultipleExpanded` prop. 
+By default, only one disclosure will be open at a time. To allow multiple disclosures to expand, use the `allowsMultipleExpanded` prop.
 
 ```tsx example
 <DisclosureGroup defaultExpandedKeys={["system", "personal"]} allowsMultipleExpanded>
@@ -203,7 +198,7 @@ By default, only one disclosure will be open at a time. To allow multiple disclo
 
 ## Disabled
 
-A DisclosureGroup can be disabled using the `isDisabled` prop. 
+A DisclosureGroup can be disabled using the `isDisabled` prop.
 
 ```tsx example
 <DisclosureGroup isDisabled>
@@ -226,9 +221,7 @@ In some use cases, you may want to add an interactive element, like a button, ad
     <div style={{display: 'flex', alignItems: 'center'}}>
       <Heading>
         <Button slot="trigger">
-          <svg viewBox="0 0 24 24">
-            <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-          </svg>
+          <ChevronRight />
           System Requirements
         </Button>
       </Heading>
@@ -242,9 +235,7 @@ In some use cases, you may want to add an interactive element, like a button, ad
     <div style={{display: 'flex', alignItems: 'center'}}>
       <Heading>
         <Button slot="trigger">
-          <svg viewBox="0 0 24 24">
-            <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-          </svg>
+          <ChevronRight />
           Personal Information
         </Button>
       </Heading>
diff --git a/packages/react-aria-components/docs/GridList.mdx b/packages/react-aria-components/docs/GridList.mdx
index b00bc9796c8..5cfc236c786 100644
--- a/packages/react-aria-components/docs/GridList.mdx
+++ b/packages/react-aria-components/docs/GridList.mdx
@@ -51,27 +51,28 @@ type: component
 ```tsx example
 import {GridList, GridListItem, Button} from 'react-aria-components';
 import {MyCheckbox} from './Checkbox';
+import {Info} from 'lucide-react';
 
 <GridList aria-label="Favorite pokemon" selectionMode="multiple">
   <GridListItem textValue="Charizard">
     <MyCheckbox slot="selection" />
     Charizard
-    <Button aria-label="Info">ⓘ</Button>
+    <Button aria-label="Info"><Info size={20} /></Button>
   </GridListItem>
   <GridListItem textValue="Blastoise">
     <MyCheckbox slot="selection" />
     Blastoise
-    <Button aria-label="Info">ⓘ</Button>
+    <Button aria-label="Info"><Info size={20} /></Button>
   </GridListItem>
   <GridListItem textValue="Venusaur">
     <MyCheckbox slot="selection" />
     Venusaur
-    <Button aria-label="Info">ⓘ</Button>
+    <Button aria-label="Info"><Info size={20} /></Button>
   </GridListItem>
   <GridListItem textValue="Pikachu">
     <MyCheckbox slot="selection" />
     Pikachu
-    <Button aria-label="Info">ⓘ</Button>
+    <Button aria-label="Info"><Info size={20} /></Button>
   </GridListItem>
 </GridList>
 ```
@@ -309,6 +310,7 @@ This example wraps `GridList` and all of its children together into a single com
 
 ```tsx example export=true
 import type {GridListProps, GridListItemProps} from 'react-aria-components';
+import {GripVertical} from 'lucide-react';
 
 export function MyGridList<T extends object>({children, ...props}: GridListProps<T>) {
   return (
@@ -324,7 +326,7 @@ export function MyItem({children, ...props}: Omit<GridListItemProps, 'children'>
     <GridListItem textValue={textValue} {...props}>
       {({selectionMode, selectionBehavior, allowsDragging}) => <>
         {/* Add elements for drag and drop and selection. */}
-        {allowsDragging && <Button slot="drag">≡</Button>}
+        {allowsDragging && <Button slot="drag"><GripVertical size={18} /></Button>}
         {selectionMode === 'multiple' && selectionBehavior === 'toggle' && <MyCheckbox slot="selection" />}
         {children}
       </>}
@@ -340,6 +342,17 @@ export function MyItem({children, ...props}: Omit<GridListItemProps, 'children'>
 </MyGridList>
 ```
 
+<details>
+  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
+```css hidden
+.react-aria-GridListItem .react-aria-Button[slot='drag'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+```
+</details>
+
 ## Content
 
 So far, our examples have shown static collections, where the data is hard coded.
@@ -371,7 +384,7 @@ function ExampleList(props: GridListProps<ItemValue>) {
       {item => (
         <MyItem textValue={item.name}>
           {item.name}
-          <Button aria-label="Info" onPress={() => alert(`Info for ${item.name}...`)}>ⓘ</Button>
+          <Button aria-label="Info" onPress={() => alert(`Info for ${item.name}...`)}><Info size={20} /></Button>
         </MyItem>
       )}
     </MyGridList>
diff --git a/packages/react-aria-components/docs/Group.mdx b/packages/react-aria-components/docs/Group.mdx
index d5f1e4634c8..8f25ed6197e 100644
--- a/packages/react-aria-components/docs/Group.mdx
+++ b/packages/react-aria-components/docs/Group.mdx
@@ -39,12 +39,13 @@ type: component
 
 ```tsx example
 import {TextField, Label, Group, Input, Button} from 'react-aria-components';
+import {Plus} from 'lucide-react';
 
 <TextField>
   <Label>Email</Label>
   <Group>
     <Input />
-    <Button aria-label="Add email">+</Button>
+    <Button aria-label="Add email"><Plus size={16} /></Button>
   </Group>
 </TextField>
 ```
diff --git a/packages/react-aria-components/docs/Menu.mdx b/packages/react-aria-components/docs/Menu.mdx
index 4a9d620d167..2749ca58cbb 100644
--- a/packages/react-aria-components/docs/Menu.mdx
+++ b/packages/react-aria-components/docs/Menu.mdx
@@ -48,9 +48,10 @@ type: component
 
 ```tsx example
 import {MenuTrigger, Button, Popover, Menu, MenuItem} from 'react-aria-components';
+import {Menu as MenuIcon} from 'lucide-react';
 
 <MenuTrigger>
-  <Button aria-label="Menu">☰</Button>
+  <Button aria-label="Menu"><MenuIcon size={20} /></Button>
   <Popover>
     <Menu>
       <MenuItem onAction={() => alert('open')}>Open</MenuItem>
@@ -209,6 +210,7 @@ This example wraps `MenuTrigger` and all of its children together into a single
 
 ```tsx example export=true
 import type {MenuProps, MenuTriggerProps, MenuItemProps} from 'react-aria-components';
+import {ChevronRight} from 'lucide-react';
 
 interface MyMenuButtonProps<T> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {
   label?: string
@@ -238,7 +240,7 @@ export function MyItem(props: Omit<MenuItemProps, 'children'> & {children?: Reac
         <>
           {props.children}
           {hasSubmenu && (
-            <svg className="chevron" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6" /></svg>
+            <ChevronRight size={20} className="chevron" />
           )}
         </>
       )}
diff --git a/packages/react-aria-components/docs/NumberField.mdx b/packages/react-aria-components/docs/NumberField.mdx
index b82df7a2c67..d0f5fb3b993 100644
--- a/packages/react-aria-components/docs/NumberField.mdx
+++ b/packages/react-aria-components/docs/NumberField.mdx
@@ -46,13 +46,14 @@ type: component
 
 ```tsx example
 import {NumberField, Label, Group, Input, Button} from 'react-aria-components';
+import {Plus, Minus} from 'lucide-react';
 
 <NumberField defaultValue={1024} minValue={0}>
   <Label>Width</Label>
   <Group>
-    <Button slot="decrement">-</Button>
+    <Button slot="decrement"><Minus /></Button>
     <Input />
-    <Button slot="increment">+</Button>
+    <Button slot="increment"><Plus /></Button>
   </Group>
 </NumberField>
 ```
@@ -90,6 +91,9 @@ import {NumberField, Label, Group, Input, Button} from 'react-aria-components';
     font-size: 1.4rem;
     width: 2.3rem;
     padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     &[slot=decrement] {
       border-start-end-radius: 0;
diff --git a/packages/react-aria-components/docs/Popover.mdx b/packages/react-aria-components/docs/Popover.mdx
index 47badf0c502..10a95bb9405 100644
--- a/packages/react-aria-components/docs/Popover.mdx
+++ b/packages/react-aria-components/docs/Popover.mdx
@@ -207,6 +207,7 @@ This example wraps `Popover` and all of its children together into a single comp
 
 ```tsx example export=true
 import type {PopoverProps} from 'react-aria-components';
+import {HelpCircle} from 'lucide-react';
 
 interface MyPopoverProps extends Omit<PopoverProps, 'children'> {
   children: React.ReactNode
@@ -226,7 +227,7 @@ function MyPopover({children, ...props}: MyPopoverProps) {
 }
 
 <DialogTrigger>
-  <Button aria-label="Help">ⓘ</Button>
+  <Button aria-label="Help"><HelpCircle /></Button>
   <MyPopover>
     <Heading slot="title">Help</Heading>
     <p>For help accessing your account, please contact support.</p>
@@ -243,21 +244,22 @@ prop. See <TypeLink links={typesDocs.links} type={typesDocs.links[typesDocs.expo
 Popovers will also automatically [flip](#flipping) to the opposite direction if there isn't enough space.
 
 ```tsx example
+import {ArrowUp, ArrowDown, ArrowRight, ArrowLeft} from 'lucide-react';
 <div style={{display: 'flex', gap: 8}}>
   <DialogTrigger>
-    <Button>⬅️</Button>
+    <Button><ArrowLeft /></Button>
     <MyPopover placement="start">In left-to-right, this is on the left. In right-to-left, this is on the right.</MyPopover>
   </DialogTrigger>
   <DialogTrigger>
-    <Button>⬆️</Button>
+    <Button><ArrowUp /></Button>
     <MyPopover placement="top">This popover is above the button.</MyPopover>
   </DialogTrigger>
   <DialogTrigger>
-    <Button>⬇️</Button>
+    <Button><ArrowDown /></Button>
     <MyPopover placement="bottom">This popover is below the button.</MyPopover>
   </DialogTrigger>
   <DialogTrigger>
-    <Button>➡️</Button>
+    <Button><ArrowRight /></Button>
     <MyPopover placement="end">In left-to-right, this is on the right. In right-to-left, this is on the left.</MyPopover>
   </DialogTrigger>
 </div>
diff --git a/packages/react-aria-components/docs/RangeCalendar.mdx b/packages/react-aria-components/docs/RangeCalendar.mdx
index eb890b67828..a5a67361e6d 100644
--- a/packages/react-aria-components/docs/RangeCalendar.mdx
+++ b/packages/react-aria-components/docs/RangeCalendar.mdx
@@ -43,12 +43,13 @@ type: component
 
 ```tsx example
 import {RangeCalendar, Heading, Button, CalendarGrid, CalendarCell} from 'react-aria-components';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
 
 <RangeCalendar aria-label="Trip dates">
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <CalendarGrid>
     {date => <CalendarCell date={date} />}
@@ -240,9 +241,9 @@ function MyRangeCalendar<T extends DateValue>({errorMessage, ...props}: MyRangeC
   return (
     <RangeCalendar {...props}>
       <header>
-        <Button slot="previous">◀</Button>
+        <Button slot="previous"><ChevronLeft size={20} /></Button>
         <Heading />
-        <Button slot="next">▶</Button>
+        <Button slot="next"><ChevronRight size={20} /></Button>
       </header>
       <CalendarGrid>
         {date => <CalendarCell date={date} />}
@@ -415,9 +416,9 @@ Multiple `CalendarGrid` elements can be rendered to show multiple months at once
 ```tsx example
 <RangeCalendar aria-label="Trip dates" visibleDuration={{months: 3}}>
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
     <CalendarGrid>
@@ -440,9 +441,9 @@ The `pageBehavior` prop allows you to control how the calendar navigates between
 ```tsx example
 <RangeCalendar aria-label="Trip dates" visibleDuration={{months: 3}} pageBehavior="single">
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
     <CalendarGrid>
@@ -790,9 +791,9 @@ import {CalendarGridHeader, CalendarHeaderCell, CalendarGridBody} from 'react-ar
 
 <RangeCalendar aria-label="Trip dates">
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <CalendarGrid>
     <CalendarGridHeader>
@@ -976,9 +977,9 @@ function RangeCalendarValue() {
 
 <RangeCalendar>
   <header>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous"><ChevronLeft size={20} /></Button>
     <Heading />
-    <Button slot="next">▶</Button>
+    <Button slot="next"><ChevronRight size={20} /></Button>
   </header>
   <CalendarGrid>
     {date => <CalendarCell date={date} />}
diff --git a/packages/react-aria-components/docs/SearchField.mdx b/packages/react-aria-components/docs/SearchField.mdx
index a372b011da3..f484ceadd40 100644
--- a/packages/react-aria-components/docs/SearchField.mdx
+++ b/packages/react-aria-components/docs/SearchField.mdx
@@ -47,11 +47,12 @@ type: component
 
 ```tsx example
 import {SearchField, Label, Input, Button} from 'react-aria-components';
+import {X} from 'lucide-react';
 
 <SearchField>
   <Label>Search</Label>
   <Input />
-  <Button>✕</Button>
+  <Button><X size={14} /></Button>
 </SearchField>
 ```
 
@@ -242,7 +243,7 @@ export function MySearchField({label, description, errorMessage, placeholder, ..
     <SearchField {...props}>
       {label && <Label>{label}</Label>}
       <Input placeholder={placeholder} />
-      <Button>✕</Button>
+      <Button><X size={14} /></Button>
       {description && <Text slot="description">{description}</Text>}
       <FieldError>{errorMessage}</FieldError>
     </SearchField>
@@ -334,7 +335,7 @@ import {Form, FieldError} from 'react-aria-components';
   {/*- end highlight -*/}
     <Label>Search</Label>
     <Input />
-    <Button>✕</Button>
+    <Button><X size={14} /></Button>
     {/*- begin highlight -*/}
     <FieldError />
     {/*- end highlight -*/}
@@ -374,7 +375,7 @@ The `description` slot can be used to associate additional help text with a sear
 <SearchField>
   <Label>Email</Label>
   <Input />
-  <Button>✕</Button>
+  <Button><X size={14} /></Button>
   {/*- begin highlight -*/}
   <Text slot="description">Enter an email for us to contact you about your order.</Text>
   {/*- end highlight -*/}
@@ -513,7 +514,7 @@ Render props may also be used as children to alter what elements are rendered ba
     <>
       <Label>Search</Label>
       <Input />
-      {state.value !== '' && <Button>✕</Button>}
+      {state.value !== '' && <Button><X size={14} /></Button>}
     </>
   )}
 </SearchField>
diff --git a/packages/react-aria-components/docs/Select.mdx b/packages/react-aria-components/docs/Select.mdx
index 33ae3dac72c..8bd84efdb10 100644
--- a/packages/react-aria-components/docs/Select.mdx
+++ b/packages/react-aria-components/docs/Select.mdx
@@ -51,12 +51,13 @@ type: component
 
 ```tsx example
 import {Select, SelectValue, Label, Button, Popover, ListBox, ListBoxItem} from 'react-aria-components';
+import {ChevronDown} from 'lucide-react';
 
 <Select>
   <Label>Favorite Animal</Label>
   <Button>
     <SelectValue />
-    <span aria-hidden="true">▼</span>
+    <span aria-hidden="true"><ChevronDown size={16} /></span>
   </Button>
   <Popover>
     <ListBox>
@@ -105,6 +106,9 @@ import {Select, SelectValue, Label, Button, Popover, ListBox, ListBoxItem} from
   }
 
   .react-aria-SelectValue {
+    flex: 1 0 auto;
+    text-align: start;
+
     &[data-placeholder] {
       font-style: italic;
       color: var(--text-color-placeholder);
@@ -112,7 +116,8 @@ import {Select, SelectValue, Label, Button, Popover, ListBox, ListBoxItem} from
   }
 
   span[aria-hidden] {
-    width: 1.5rem;
+    width: 1.429rem;
+    height: 1.429rem;
     line-height: 1.375rem;
     margin-left: 1rem;
     padding: 1px;
@@ -121,6 +126,10 @@ import {Select, SelectValue, Label, Button, Popover, ListBox, ListBoxItem} from
     forced-color-adjust: none;
     border-radius: 4px;
     font-size: 0.857rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
   }
 }
 
@@ -324,7 +333,7 @@ export function MySelect<T extends object>({label, description, errorMessage, ch
       <Label>{label}</Label>
       <Button>
         <SelectValue />
-        <span aria-hidden="true">▼</span>
+        <span aria-hidden="true"><ChevronDown size={16} /></span>
       </Button>
       {description && <Text slot="description">{description}</Text>}
       <FieldError>{errorMessage}</FieldError>
@@ -785,7 +794,7 @@ The `description` slot can be used to associate additional help text with a Sele
   <Label>Favorite Animal</Label>
   <Button>
     <SelectValue />
-    <span aria-hidden="true">▼</span>
+    <span aria-hidden="true"><ChevronDown size={16} /></span>
   </Button>
   {/*- begin highlight -*/}
   <Text slot="description">Please select an animal.</Text>
@@ -852,7 +861,7 @@ Select passes the rendered children of the selected item in the render props of
       }}
     </SelectValue>
     {/*- end highlight -*/}
-    <span aria-hidden="true">▼</span>
+    <span aria-hidden="true"><ChevronDown size={16} /></span>
   </Button>
   <Popover>
     <ListBox>
@@ -1209,7 +1218,7 @@ function SelectClearButton() {
   <Label>Favorite Animal</Label>
   <Button>
     <SelectValue />
-    <span aria-hidden="true">▼</span>
+    <span aria-hidden="true"><ChevronDown size={16} /></span>
   </Button>
   {/*- begin highlight -*/}
   <SelectClearButton />
@@ -1289,7 +1298,7 @@ Note: you do not need to set the style inline, you can use any CSS method to do
   <Label>Favorite Animal</Label>
   <Button>
     <SelectValue />
-    <span aria-hidden="true">▼</span>
+    <span aria-hidden="true"><ChevronDown size={16} /></span>
   </Button>
   <Popover>
     <ListBox>
diff --git a/packages/react-aria-components/docs/Table.mdx b/packages/react-aria-components/docs/Table.mdx
index 72b06a29a0c..4dfe99b80f9 100644
--- a/packages/react-aria-components/docs/Table.mdx
+++ b/packages/react-aria-components/docs/Table.mdx
@@ -346,18 +346,19 @@ The following example includes a custom Column component with a sort indicator.
 
 ```tsx example export=true render=false
 import type {ColumnProps} from 'react-aria-components';
+import {ArrowUp, ArrowDown} from 'lucide-react';
 
 export function MyColumn(props: Omit<ColumnProps, 'children'> & {children?: React.ReactNode}) {
   return (
     <Column {...props}>
-      {({allowsSorting, sortDirection}) => <>
+      {({allowsSorting, sortDirection}) => <div className="column-header">
         {props.children}
         {allowsSorting && (
           <span aria-hidden="true" className="sort-indicator">
-            {sortDirection === 'ascending' ? '▲' : '▼'}
+            {sortDirection === 'ascending' ? <ArrowUp size={14} /> : <ArrowDown size={14} />}
           </span>
         )}
-      </>}
+      </div>}
     </Column>
   );
 }
@@ -389,7 +390,7 @@ export function MyRow<T extends object>({id, columns, children, ...otherProps}:
 
   return (
     <Row id={id} {...otherProps}>
-      {allowsDragging && <Cell><Button slot="drag">≡</Button></Cell>}
+      {allowsDragging && <Cell><Button slot="drag"><GripVertical size={18} /></Button></Cell>}
       {selectionBehavior === 'toggle' && <Cell><MyCheckbox slot="selection" /></Cell>}
       <Collection items={columns}>
         {children}
@@ -875,8 +876,16 @@ function AsyncSortTable() {
 
 ```css
 .react-aria-Column {
+  .column-header {
+    display: flex;
+    align-items: center;
+  }
+
   .sort-indicator {
     padding: 0 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &:not([data-sort-direction]) .sort-indicator {
@@ -1173,7 +1182,7 @@ function ResizableTableColumn<T extends object>(props: ResizableTableColumnProps
           </MenuTrigger>
           {allowsSorting && (
             <span aria-hidden="true" className="sort-indicator">
-              {sortDirection === 'ascending' ? '▲' : '▼'}
+              {sortDirection === 'ascending' ? <ArrowUp size={14} /> : <ArrowDown size={14} />}
             </span>
           )}
           <ColumnResizer />
@@ -1258,6 +1267,7 @@ This uses [useListData](../react-stately/useListData.html) from React Stately to
 ```tsx example
 import {useListData} from 'react-stately';
 import {useDragAndDrop, Button} from 'react-aria-components';
+import {GripVertical} from 'lucide-react';
 
 function Example() {
   let list = useListData({
@@ -1303,7 +1313,7 @@ function Example() {
         {item => (
           <Row>
             {/*- begin highlight -*/}
-            <Cell><Button slot="drag">≡</Button></Cell>
+            <Cell><Button slot="drag"><GripVertical size={18} /></Button></Cell>
             {/*- end highlight -*/}
             <Cell><MyCheckbox slot="selection" /></Cell>
             <Cell>{item.name}</Cell>
@@ -1330,7 +1340,11 @@ function Example() {
   [slot=drag] {
     all: unset;
     width: 15px;
+    height: 100%;
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &[data-focus-visible] {
       border-radius: 4px;
@@ -1409,7 +1423,7 @@ function Example() {
       <TableBody items={list.items}>
         {item => (
           <Row>
-            <Cell><Button slot="drag">≡</Button></Cell>
+            <Cell><Button slot="drag"><GripVertical size={18} /></Button></Cell>
             <Cell><MyCheckbox slot="selection" /></Cell>
             <Cell>{item.name}</Cell>
             <Cell>{item.type}</Cell>
@@ -2242,7 +2256,7 @@ function DndTable(props: DndTableProps) {
       <TableBody items={list.items} renderEmptyState={() => 'Drop items here'}>
         {item => (
           <Row>
-            <Cell><Button slot="drag">≡</Button></Cell>
+            <Cell><Button slot="drag"><GripVertical size={18} /></Button></Cell>
             <Cell><MyCheckbox slot="selection" /></Cell>
             <Cell>{item.id}</Cell>
             <Cell>{item.name}</Cell>
diff --git a/packages/react-aria-components/docs/Tabs.mdx b/packages/react-aria-components/docs/Tabs.mdx
index d82a0c3483b..f9001f0dc19 100644
--- a/packages/react-aria-components/docs/Tabs.mdx
+++ b/packages/react-aria-components/docs/Tabs.mdx
@@ -707,6 +707,7 @@ This example shows a `TabNavigation` component that can be placed within `Tabs`
 
 ```tsx example
 import {TabListStateContext, Button} from 'react-aria-components';
+import {ArrowLeft, ArrowRight} from 'lucide-react';
 
 function TabNavigation() {
   /*- begin highlight -*/
@@ -718,8 +719,8 @@ function TabNavigation() {
   let onNext = nextKey != null ? () => state.setSelectedKey(nextKey) : null;
   return (
     <div className="button-group">
-      <Button aria-label="Previous tab" onPress={onPrev}>←</Button>
-      <Button aria-label="Next tab" onPress={onNext}>→</Button>
+      <Button aria-label="Previous tab" onPress={onPrev}><ArrowLeft size={16} /></Button>
+      <Button aria-label="Next tab" onPress={onNext}><ArrowRight size={16} /></Button>
     </div>
   );
 }
diff --git a/packages/react-aria-components/docs/TagGroup.mdx b/packages/react-aria-components/docs/TagGroup.mdx
index c36036c7494..ded18519853 100644
--- a/packages/react-aria-components/docs/TagGroup.mdx
+++ b/packages/react-aria-components/docs/TagGroup.mdx
@@ -208,6 +208,7 @@ This example wraps `TagGroup` and all of its children together into a single com
 ```tsx example export=true
 import type {TagGroupProps, TagListProps, TagProps} from 'react-aria-components';
 import {Button, Text} from 'react-aria-components';
+import {X} from 'lucide-react';
 
 interface MyTagGroupProps<T> extends Omit<TagGroupProps, 'children'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'> {
   label?: string,
@@ -234,7 +235,7 @@ function MyTag({children, ...props}: Omit<TagProps, 'children'> & {children?: Re
     <Tag textValue={textValue} {...props}>
       {({allowsRemoving}) => (<>
         {children}
-        {allowsRemoving && <Button slot="remove">ⓧ</Button>}
+        {allowsRemoving && <Button slot="remove"><X size={12} /></Button>}
       </>)}
     </Tag>
   );
@@ -286,16 +287,19 @@ function Example() {
 .react-aria-Tag {
   [slot=remove] {
     background: none;
-    border: none;
+    border: 1px solid var(--border-color);
     padding: 0;
-    margin-left: 2px;
+    margin-left: 4px;
     color: var(--text-color-base);
     transition: color 200ms;
     outline: none;
     font-size: 0.95em;
     border-radius: 100%;
     aspect-ratio: 1/1;
-    height: 100%;
+    height: calc(100% - 4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &[data-hovered] {
       color: var(--text-color-hover);
diff --git a/packages/react-aria-components/docs/Toast.mdx b/packages/react-aria-components/docs/Toast.mdx
index e5dbb05b375..605fde5f6a9 100644
--- a/packages/react-aria-components/docs/Toast.mdx
+++ b/packages/react-aria-components/docs/Toast.mdx
@@ -50,6 +50,7 @@ First, render a `ToastRegion` in the root of your app.
 
 ```tsx example hidden export=true
 import {UNSTABLE_ToastRegion as ToastRegion, UNSTABLE_Toast as Toast, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastContent as ToastContent, Button, Text} from 'react-aria-components';
+import {X} from 'lucide-react';
 
 // Define the type for your toast content.
 interface MyToastContent {
@@ -71,7 +72,7 @@ export function App() {
               <Text slot="title">{toast.content.title}</Text>
               <Text slot="description">{toast.content.description}</Text>
             </ToastContent>
-            <Button slot="close">x</Button>
+            <Button slot="close"><X size={16} /></Button>
           </Toast>
         )}
       </ToastRegion>
@@ -281,7 +282,7 @@ const queue = new ToastQueue<MyToastContent>({
         <Text slot="title">{toast.content.title}</Text>
         <Text slot="description">{toast.content.description}</Text>
       </ToastContent>
-      <Button slot="close">x</Button>
+      <Button slot="close"><X size={16} /></Button>
     </Toast>
   )}
 </ToastRegion>
diff --git a/packages/react-aria-components/docs/ToggleButton.mdx b/packages/react-aria-components/docs/ToggleButton.mdx
index cc21a21bae1..568e5a298b6 100644
--- a/packages/react-aria-components/docs/ToggleButton.mdx
+++ b/packages/react-aria-components/docs/ToggleButton.mdx
@@ -66,6 +66,9 @@ import {ToggleButton} from 'react-aria-components';
   margin: 0;
   outline: none;
   padding: 6px 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 
   &[data-pressed] {
     box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
@@ -126,6 +129,7 @@ A default selection state for a toggle button can be set using the `defaultSelec
 [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
 
 ```tsx example
+import {Star} from 'lucide-react';
 function Example() {
   let [isSelected, setSelected] = React.useState(false);
 
@@ -134,7 +138,7 @@ function Example() {
       isSelected={isSelected}
       onChange={setSelected}
       aria-label="Star">
-      ★
+      <Star />
     </ToggleButton>
   );
 }
diff --git a/packages/react-aria-components/docs/Tooltip.mdx b/packages/react-aria-components/docs/Tooltip.mdx
index 5237749dff0..17d8befe5e8 100644
--- a/packages/react-aria-components/docs/Tooltip.mdx
+++ b/packages/react-aria-components/docs/Tooltip.mdx
@@ -43,9 +43,10 @@ type: component
 
 ```tsx example
 import {TooltipTrigger, Tooltip, OverlayArrow, Button} from 'react-aria-components';
+import {Edit} from 'lucide-react';
 
 <TooltipTrigger>
-  <Button>✏️</Button>
+  <Button><Edit /></Button>
   <Tooltip>
     <OverlayArrow>
       <svg width={8} height={8} viewBox="0 0 8 8"><path d="M0 0 L4 4 L8 0" /></svg>
@@ -170,6 +171,7 @@ This example wraps `Tooltip` and all of its children together into a single comp
 
 ```tsx example export=true
 import type {TooltipProps} from 'react-aria-components';
+import {Save} from 'lucide-react';
 
 interface MyTooltipProps extends Omit<TooltipProps, 'children'> {
   children: React.ReactNode
@@ -187,7 +189,7 @@ function MyTooltip({children, ...props}: MyTooltipProps) {
 }
 
 <TooltipTrigger>
-  <Button>💾</Button>
+  <Button><Save /></Button>
   <MyTooltip>Save</MyTooltip>
 </TooltipTrigger>
 ```
@@ -215,7 +217,7 @@ The delay can be adjusted for hover using the `delay` prop.
 
 ```tsx example
 <TooltipTrigger delay={0}>
-  <Button>💾</Button>
+  <Button><Save /></Button>
   <MyTooltip>Save</MyTooltip>
 </TooltipTrigger>
 ```
@@ -225,8 +227,9 @@ The delay can be adjusted for hover using the `delay` prop.
 By default, tooltips appear both on hover and on focus. The `trigger` prop can be set to `"focus"` to display the tooltip only on focus, and not on hover.
 
 ```tsx example
+import {Disc} from 'lucide-react';
 <TooltipTrigger trigger="focus">
-  <Button>💿</Button>
+  <Button><Disc /></Button>
   <MyTooltip>Burn CD</MyTooltip>
 </TooltipTrigger>
 ```
@@ -237,13 +240,14 @@ The open state of the tooltip can be controlled via the `defaultOpen` and `isOpe
 
 
 ```tsx example
+import {Bell} from 'lucide-react';
 function Example() {
   let [isOpen, setOpen] = React.useState(false);
 
   return (
     <>
       <TooltipTrigger isOpen={isOpen} onOpenChange={setOpen}>
-        <Button>📣</Button>
+        <Button><Bell /></Button>
         <MyTooltip>Notifications</MyTooltip>
       </TooltipTrigger>
       <p>Tooltip is {isOpen ? 'showing' : 'not showing'}</p>
@@ -260,21 +264,22 @@ The Tooltip's placement with respect to its trigger element can be adjusted usin
 prop. See the props table for a full list of available placement combinations.
 
 ```tsx example
+import {ArrowUp, ArrowDown, ArrowRight, ArrowLeft} from 'lucide-react';
 <div style={{display: 'flex', gap: 8}}>
   <TooltipTrigger>
-    <Button>⬅️</Button>
+    <Button><ArrowLeft /></Button>
     <MyTooltip placement="start">In left-to-right, this is on the left. In right-to-left, this is on the right.</MyTooltip>
   </TooltipTrigger>
   <TooltipTrigger>
-    <Button>⬆️</Button>
+    <Button><ArrowUp /></Button>
     <MyTooltip placement="top">This tooltip is above the button.</MyTooltip>
   </TooltipTrigger>
   <TooltipTrigger>
-    <Button>⬇️</Button>
+    <Button><ArrowDown /></Button>
     <MyTooltip placement="bottom">This tooltip is below the button.</MyTooltip>
   </TooltipTrigger>
   <TooltipTrigger>
-    <Button>➡️</Button>
+    <Button><ArrowRight /></Button>
     <MyTooltip placement="end">In left-to-right, this is on the right. In right-to-left, this is on the left.</MyTooltip>
   </TooltipTrigger>
 </div>
@@ -290,7 +295,7 @@ Below is a tooltip offset by an additional 50px above the trigger.
 
 ```tsx example
 <TooltipTrigger>
-  <Button>☝️</Button>
+  <Button><ArrowUp /></Button>
   <MyTooltip offset={50}>This will shift up.</MyTooltip>
 </TooltipTrigger>
 ```
@@ -299,7 +304,7 @@ Below is a tooltip cross offset by an additional 100px to the right of the trigg
 
 ```tsx example
 <TooltipTrigger>
-  <Button>👉</Button>
+  <Button><ArrowRight /></Button>
   <MyTooltip crossOffset={60} placement="bottom">This will shift over to the right.</MyTooltip>
 </TooltipTrigger>
 ```
@@ -309,8 +314,9 @@ Below is a tooltip cross offset by an additional 100px to the right of the trigg
 The `isDisabled` prop can be provided to a TooltipTrigger to disable the tooltip, without disabling the trigger it displays on.
 
 ```tsx example
+import {Printer} from 'lucide-react';
 <TooltipTrigger isDisabled>
-  <Button>🖨</Button>
+  <Button><Printer /></Button>
   <MyTooltip>Print</MyTooltip>
 </TooltipTrigger>
 ```
diff --git a/packages/react-aria-components/docs/Tree.mdx b/packages/react-aria-components/docs/Tree.mdx
index 18cec823c85..c22d0e62e54 100644
--- a/packages/react-aria-components/docs/Tree.mdx
+++ b/packages/react-aria-components/docs/Tree.mdx
@@ -58,22 +58,23 @@ import {
   Button,
   Collection
 } from 'react-aria-components';
+import {Info} from 'lucide-react';
 
 <Tree aria-label="Files" style={{height: '300px'}} defaultExpandedKeys={['documents', 'photos', 'project']} selectionMode="multiple" defaultSelectedKeys={['photos']}>
   <TreeItem id="documents" textValue="Documents">
     <MyTreeItemContent>
       Documents
-      <Button aria-label="Info">ⓘ</Button>
+      <Button aria-label="Info"><Info size={20} /></Button>
     </MyTreeItemContent>
     <TreeItem id="project" textValue="Project">
       <MyTreeItemContent>
         Project
-        <Button aria-label="Info">ⓘ</Button>
+        <Button aria-label="Info"><Info size={20} /></Button>
       </MyTreeItemContent>
       <TreeItem id="report" textValue="Weekly Report">
         <MyTreeItemContent>
           Weekly Report
-          <Button aria-label="Info">ⓘ</Button>
+          <Button aria-label="Info"><Info size={20} /></Button>
         </MyTreeItemContent>
       </TreeItem>
     </TreeItem>
@@ -81,18 +82,18 @@ import {
   <TreeItem id="photos" textValue="Photos">
     <MyTreeItemContent>
       Photos
-      <Button aria-label="Info">ⓘ</Button>
+      <Button aria-label="Info"><Info size={20} /></Button>
     </MyTreeItemContent>
     <TreeItem id="one" textValue="Image 1">
       <MyTreeItemContent>
         Image 1
-        <Button aria-label="Info">ⓘ</Button>
+        <Button aria-label="Info"><Info size={20} /></Button>
       </MyTreeItemContent>
     </TreeItem>
     <TreeItem id="two" textValue="Image 2">
       <MyTreeItemContent>
         Image 2
-        <Button aria-label="Info">ⓘ</Button>
+        <Button aria-label="Info"><Info size={20} /></Button>
       </MyTreeItemContent>
     </TreeItem>
   </TreeItem>
@@ -166,6 +167,12 @@ import {
       }
     }
 
+    .react-aria-Button[slot=drag] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     &[data-has-child-items] .react-aria-Button[slot=chevron] {
       visibility: visible;
     }
@@ -360,13 +367,14 @@ If you will use a Tree in multiple places in your app, you can wrap all of the p
 ```tsx example export=true render=false
 import type {TreeItemContentProps, TreeItemContentRenderProps} from 'react-aria-components';
 import {Button} from 'react-aria-components';
+import {GripVertical} from 'lucide-react';
 
 function MyTreeItemContent(props: Omit<TreeItemContentProps, 'children'> & {children?: React.ReactNode}) {
   return (
     <TreeItemContent>
       {({hasChildItems, selectionBehavior, selectionMode, allowsDragging}: TreeItemContentRenderProps) => (
         <>
-          {allowsDragging && <Button slot="drag">≡</Button>}
+          {allowsDragging && <Button slot="drag"><GripVertical size={18} /></Button>}
           {selectionBehavior === 'toggle' && selectionMode !== 'none' && <MyCheckbox slot="selection" />}
           <Button slot="chevron">
             <svg viewBox="0 0 24 24">
@@ -1445,8 +1453,8 @@ function Example() {
             id: Math.random().toString(36).slice(2),
             name: entry.name,
             kind: entry.kind,
-            children: entry.kind === 'directory' 
-              ? await getFiles(entry) 
+            children: entry.kind === 'directory'
+              ? await getFiles(entry)
               : []
           });
         }
diff --git a/starters/docs/.babelrc.json b/starters/docs/.babelrc.json
index 5f2aa6e1dba..6e4b5111428 100644
--- a/starters/docs/.babelrc.json
+++ b/starters/docs/.babelrc.json
@@ -1,7 +1,9 @@
 {
   "sourceType": "unambiguous",
   "presets": [
-    "@babel/preset-react",
+    ["@babel/preset-react", {
+      "runtime": "automatic"
+    }],
     "@babel/preset-typescript"
   ],
   "plugins": []
diff --git a/starters/docs/.gitignore b/starters/docs/.gitignore
index fbf3418d3a7..47a805e9ea8 100644
--- a/starters/docs/.gitignore
+++ b/starters/docs/.gitignore
@@ -1,3 +1,3 @@
-src
-stories
 storybook-static
+yarn.lock
+.yarn/install-state.gz
diff --git a/starters/docs/.storybook/main.js b/starters/docs/.storybook/main.js
index a33ea3cd782..452d3258067 100644
--- a/starters/docs/.storybook/main.js
+++ b/starters/docs/.storybook/main.js
@@ -26,8 +26,8 @@ const excludedProps = new Set([
 const config = {
   stories: ["../stories/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
+    getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-interactions"),
     getAbsolutePath("@storybook/addon-webpack5-compiler-babel"),
   ],
diff --git a/starters/docs/package.json b/starters/docs/package.json
index de826fae07f..46aa44bdf0a 100644
--- a/starters/docs/package.json
+++ b/starters/docs/package.json
@@ -1,9 +1,13 @@
 {
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
   "devDependencies": {
     "@babel/preset-react": "^7.24.1",
+    "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-onboarding": "^1.0.8",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/blocks": "^8.6.14",
     "@storybook/react": "^8.6.14",
@@ -12,20 +16,19 @@
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "lightningcss-loader": "^2.1.0",
+    "lucide-react": "^0.292.0",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "react": "^19.1.0",
     "react-aria-components": "latest",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.1.0",
     "storybook": "^8.6.14",
     "storybook-dark-mode": "^4.0.2",
     "typescript": "5.3.3"
   },
   "resolutions": {
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "@types/mime": "3.0.4",
     "jackspeak": "2.1.1"
-  },
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
   }
 }
diff --git a/starters/docs/src/Autocomplete.css b/starters/docs/src/Autocomplete.css
new file mode 100644
index 00000000000..a5fd3ced5ec
--- /dev/null
+++ b/starters/docs/src/Autocomplete.css
@@ -0,0 +1,37 @@
+@import './Menu.css';
+@import './Button.css';
+@import './SearchField.css';
+@import "./theme.css";
+
+.my-autocomplete {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 300px;
+  height: 180px;
+  border: 1px solid var(--border-color);
+  padding: 16px;
+  border-radius: 10px;
+  background: var(--overlay-background);
+}
+
+.react-aria-SearchField {
+  width: 100%;
+}
+
+.react-aria-Label {
+  margin-bottom: .5em;
+}
+
+.react-aria-Menu {
+  &[data-empty] {
+    align-items: center;
+    justify-content: center;
+    font-style: italic;
+  }
+}
+
+.react-aria-MenuItem[href] {
+  text-decoration: none;
+  cursor: pointer;
+}
diff --git a/starters/docs/src/Autocomplete.tsx b/starters/docs/src/Autocomplete.tsx
new file mode 100644
index 00000000000..d8d9cbfbf8b
--- /dev/null
+++ b/starters/docs/src/Autocomplete.tsx
@@ -0,0 +1,40 @@
+'use client';
+import {
+  Autocomplete as AriaAutocomplete,
+  AutocompleteProps as AriaAutocompleteProps,
+  Key,
+  Menu,
+  useFilter
+} from 'react-aria-components';
+
+import {SearchField} from './SearchField';
+
+import './Autocomplete.css';
+
+export interface AutocompleteProps<T extends object>
+  extends Omit<AriaAutocompleteProps, 'children'> {
+  label?: string;
+  placeholder?: string;
+  items?: Iterable<T>;
+  children: React.ReactNode | ((item: T) => React.ReactNode);
+  onAction?: (id: Key) => void;
+}
+
+export function Autocomplete<T extends object>(
+  { label, placeholder, items, children, onAction, ...props }:
+    AutocompleteProps<T>
+) {
+  let { contains } = useFilter({ sensitivity: 'base' });
+  return (
+    (
+      <div className="my-autocomplete">
+        <AriaAutocomplete filter={contains} {...props}>
+          <SearchField label={label} placeholder={placeholder} />
+          <Menu items={items} onAction={onAction}>
+            {children}
+          </Menu>
+        </AriaAutocomplete>
+      </div>
+    )
+  );
+}
diff --git a/starters/docs/src/Breadcrumbs.css b/starters/docs/src/Breadcrumbs.css
new file mode 100644
index 00000000000..0964ebba054
--- /dev/null
+++ b/starters/docs/src/Breadcrumbs.css
@@ -0,0 +1,53 @@
+@import "./theme.css";
+
+.react-aria-Breadcrumbs {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: 18px;
+  color: var(--text-color);
+
+  .react-aria-Breadcrumb:not(:last-child)::after {
+    content: '›';
+    content: '›' / '';
+    alt: ' ';
+    padding: 0 5px;
+  }
+
+  .react-aria-Link {
+    color: var(--link-color-secondary);
+    outline: none;
+    position: relative;
+    text-decoration: none;
+    cursor: pointer;
+
+    &[data-hovered] {
+      text-decoration: underline;
+    }
+
+    &[data-current] {
+      color: var(--text-color);
+      font-weight: bold;
+    }
+
+    &[data-focus-visible]:after {
+      content: '';
+      position: absolute;
+      inset: -2px -4px;
+      border-radius: 6px;
+      border: 2px solid var(--focus-ring-color);
+    }
+  }
+
+  .react-aria-Link {
+    &[data-disabled] {
+      cursor: default;
+
+      &:not([data-current]) {
+        color: var(--text-color-disabled);
+      }
+    }
+  }
+}
diff --git a/starters/docs/src/Breadcrumbs.tsx b/starters/docs/src/Breadcrumbs.tsx
new file mode 100644
index 00000000000..5234251ff12
--- /dev/null
+++ b/starters/docs/src/Breadcrumbs.tsx
@@ -0,0 +1,7 @@
+'use client';
+import {Breadcrumbs as RACBreadcrumbs, BreadcrumbsProps} from 'react-aria-components';
+import './Breadcrumbs.css';
+
+export function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>) {
+  return <RACBreadcrumbs {...props} />;
+}
diff --git a/starters/docs/src/Button.css b/starters/docs/src/Button.css
new file mode 100644
index 00000000000..36f0c71a8fa
--- /dev/null
+++ b/starters/docs/src/Button.css
@@ -0,0 +1,46 @@
+@import "./theme.css";
+
+.react-aria-Button {
+  color: var(--text-color);
+  background: var(--button-background);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  appearance: none;
+  vertical-align: middle;
+  font-size: 0.875rem;
+  text-align: center;
+  margin: 0;
+  outline: none;
+  padding: 6px 10px;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+
+  &[data-pressed] {
+    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
+    background: var(--button-background-pressed);
+    border-color: var(--border-color-pressed);
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+
+  &[data-disabled]{
+    border-color: var(--border-color-disabled);
+    color: var(--text-color-disabled);
+  }
+}
+
+@keyframes toggle {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
diff --git a/starters/docs/src/Button.tsx b/starters/docs/src/Button.tsx
new file mode 100644
index 00000000000..3520c7223ad
--- /dev/null
+++ b/starters/docs/src/Button.tsx
@@ -0,0 +1,7 @@
+'use client';
+import {Button as RACButton, ButtonProps} from 'react-aria-components';
+import './Button.css';
+
+export function Button(props: ButtonProps) {
+  return <RACButton {...props} />;
+}
diff --git a/starters/docs/src/Calendar.css b/starters/docs/src/Calendar.css
new file mode 100644
index 00000000000..d7d5e391ad3
--- /dev/null
+++ b/starters/docs/src/Calendar.css
@@ -0,0 +1,81 @@
+@import './Button.css';
+@import "./theme.css";
+
+.react-aria-Calendar {
+  width: fit-content;
+  max-width: 100%;
+  color: var(--text-color);
+
+  header {
+    display: flex;
+    align-items: center;
+    margin: 0 4px 0.4375rem 4px;
+
+    .react-aria-Heading {
+      flex: 1;
+      margin: 0;
+      text-align: center;
+      font-size: 1.203125rem;
+    }
+  }
+
+  .react-aria-Button {
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+  }
+
+  .react-aria-CalendarCell {
+    width: 1.75rem;
+    line-height: 1.75rem;
+    text-align: center;
+    border-radius: 6px;
+    cursor: default;
+    outline: none;
+    margin: 1px;
+    forced-color-adjust: none;
+
+    &[data-outside-month] {
+      display: none;
+    }
+
+    &[data-pressed] {
+      background: var(--gray-100);
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: 2px;
+    }
+
+    &[data-selected] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+    }
+  }
+
+  .react-aria-CalendarCell {
+    &[data-disabled] {
+      color: var(--text-color-disabled);
+    }
+  }
+
+  .react-aria-CalendarCell {
+    &[data-unavailable] {
+      text-decoration: line-through;
+      color: var(--invalid-color);
+    }
+  }
+
+  .react-aria-CalendarCell {
+    &[data-invalid] {
+      background: var(--invalid-color);
+      color: var(--highlight-foreground);
+    }
+  }
+
+  [slot=errorMessage] {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+}
diff --git a/starters/docs/src/Calendar.tsx b/starters/docs/src/Calendar.tsx
new file mode 100644
index 00000000000..8f3b62ade13
--- /dev/null
+++ b/starters/docs/src/Calendar.tsx
@@ -0,0 +1,40 @@
+'use client';
+import {
+  Calendar as AriaCalendar,
+  CalendarCell,
+  CalendarGrid,
+  CalendarProps as AriaCalendarProps,
+  DateValue,
+  Heading,
+  Text
+} from 'react-aria-components';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
+
+import {Button} from './Button';
+
+import './Calendar.css';
+
+export interface CalendarProps<T extends DateValue>
+  extends AriaCalendarProps<T> {
+  errorMessage?: string;
+}
+
+export function Calendar<T extends DateValue>(
+  { errorMessage, ...props }: CalendarProps<T>
+) {
+  return (
+    (
+      <AriaCalendar {...props}>
+        <header>
+          <Button slot="previous"><ChevronLeft size={16} /></Button>
+          <Heading />
+          <Button slot="next"><ChevronRight size={16} /></Button>
+        </header>
+        <CalendarGrid>
+          {(date) => <CalendarCell date={date} />}
+        </CalendarGrid>
+        {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
+      </AriaCalendar>
+    )
+  );
+}
diff --git a/starters/docs/src/Checkbox.css b/starters/docs/src/Checkbox.css
new file mode 100644
index 00000000000..b51b5036da5
--- /dev/null
+++ b/starters/docs/src/Checkbox.css
@@ -0,0 +1,102 @@
+@import "./theme.css";
+
+.react-aria-Checkbox {
+  --selected-color: var(--highlight-background);
+  --selected-color-pressed: var(--highlight-background-pressed);
+  --checkmark-color: var(--highlight-foreground);
+
+  display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
+  align-items: center;
+  gap: 0.499625rem;
+  font-size: 1.000125rem;
+  color: var(--text-color);
+  forced-color-adjust: none;
+
+  .checkbox {
+    width: 1.000125rem;
+    height: 1.000125rem;
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
+    transition: all 200ms;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  svg {
+    width: 0.875rem;
+    height: 0.875rem;
+    fill: none;
+    stroke: var(--checkmark-color);
+    stroke-width: 3px;
+    stroke-dasharray: 22px;
+    stroke-dashoffset: 66;
+    transition: all 200ms;
+  }
+
+  &[data-pressed] .checkbox {
+    border-color: var(--border-color-pressed);
+  }
+
+  &[data-focus-visible] .checkbox {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-selected],
+  &[data-indeterminate] {
+    .checkbox {
+      border-color: var(--selected-color);
+      background: var(--selected-color);
+    }
+
+    &[data-pressed] .checkbox {
+      border-color: var(--selected-color-pressed);
+      background: var(--selected-color-pressed);
+    }
+
+    svg {
+      stroke-dashoffset: 44;
+    }
+  }
+
+  &[data-indeterminate] {
+    & svg {
+      stroke: none;
+      fill: var(--checkmark-color);
+    }
+  }
+
+  &[data-invalid] {
+    .checkbox {
+      --checkmark-color: var(--gray-50);
+      border-color: var(--invalid-color);
+    }
+
+    &[data-pressed] .checkbox {
+      border-color: var(--invalid-color-pressed);
+    }
+
+    &[data-selected],
+    &[data-indeterminate] {
+      .checkbox {
+        background: var(--invalid-color);
+      }
+
+      &[data-pressed] .checkbox {
+        background: var(--invalid-color-pressed);
+      }
+    }
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+
+    .checkbox {
+      border-color: var(--border-color-disabled);
+    }
+  }
+}
diff --git a/starters/docs/src/Checkbox.tsx b/starters/docs/src/Checkbox.tsx
new file mode 100644
index 00000000000..01ece6db704
--- /dev/null
+++ b/starters/docs/src/Checkbox.tsx
@@ -0,0 +1,29 @@
+'use client';
+import {Checkbox as AriaCheckbox, CheckboxProps} from 'react-aria-components';
+
+import './Checkbox.css';
+
+export function Checkbox(
+  { children, ...props }: Omit<CheckboxProps, 'children'> & {
+    children?: React.ReactNode;
+  }
+) {
+  return (
+    (
+      <AriaCheckbox {...props}>
+        {({ isIndeterminate }) => (
+          <>
+            <div className="checkbox">
+              <svg viewBox="0 0 18 18" aria-hidden="true">
+                {isIndeterminate
+                  ? <rect x={1} y={7.5} width={15} height={3} />
+                  : <polyline points="1 9 7 14 15 4" />}
+              </svg>
+            </div>
+            {children}
+          </>
+        )}
+      </AriaCheckbox>
+    )
+  );
+}
diff --git a/starters/docs/src/CheckboxGroup.css b/starters/docs/src/CheckboxGroup.css
new file mode 100644
index 00000000000..7c0b43c7782
--- /dev/null
+++ b/starters/docs/src/CheckboxGroup.css
@@ -0,0 +1,20 @@
+@import './Checkbox.css';
+@import './Form.css';
+@import './Button.css';
+@import "./theme.css";
+
+.react-aria-CheckboxGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.499625rem;
+  color: var(--text-color);
+
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+
+  [slot=description] {
+    font-size: 12px;
+  }
+}
diff --git a/starters/docs/src/CheckboxGroup.tsx b/starters/docs/src/CheckboxGroup.tsx
new file mode 100644
index 00000000000..3b92109e20a
--- /dev/null
+++ b/starters/docs/src/CheckboxGroup.tsx
@@ -0,0 +1,42 @@
+'use client';
+import {
+  CheckboxGroup as AriaCheckboxGroup,
+  CheckboxGroupProps as AriaCheckboxGroupProps,
+  FieldError,
+  Label,
+  Text,
+  ValidationResult
+} from 'react-aria-components';
+
+import './CheckboxGroup.css';
+
+export interface CheckboxGroupProps
+  extends Omit<AriaCheckboxGroupProps, 'children'> {
+  children?: React.ReactNode;
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
+
+export function CheckboxGroup(
+  {
+    label,
+    description,
+    errorMessage,
+    children,
+    ...props
+  }: CheckboxGroupProps
+) {
+  return (
+    (
+      <AriaCheckboxGroup {...props}>
+        {label && <Label>{label}</Label>}
+        {children}
+        {description && <Text slot="description">{description}</Text>}
+        <FieldError>{errorMessage}</FieldError>
+      </AriaCheckboxGroup>
+    )
+  );
+}
+
+export { CheckboxGroup as MyCheckboxGroup };
diff --git a/starters/docs/src/ColorArea.css b/starters/docs/src/ColorArea.css
new file mode 100644
index 00000000000..d03f8542627
--- /dev/null
+++ b/starters/docs/src/ColorArea.css
@@ -0,0 +1,32 @@
+@import "./ColorSlider.css";
+
+.react-aria-ColorArea {
+  width: 192px;
+  height: 192px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.react-aria-ColorThumb {
+  border: 2px solid white;
+  box-shadow: 0 0 0 1px black, inset 0 0 0 1px black;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  box-sizing: border-box;
+
+  &[data-focus-visible] {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.react-aria-ColorArea {
+  &[data-disabled] {
+    background: gray !important;
+
+    .react-aria-ColorThumb {
+      background: gray !important;
+    }
+  }
+}
diff --git a/starters/docs/src/ColorArea.tsx b/starters/docs/src/ColorArea.tsx
new file mode 100644
index 00000000000..0bae4afc0aa
--- /dev/null
+++ b/starters/docs/src/ColorArea.tsx
@@ -0,0 +1,18 @@
+'use client';
+import {
+  ColorArea as AriaColorArea,
+  ColorAreaProps,
+  ColorThumb
+} from 'react-aria-components';
+
+import './ColorArea.css';
+
+export function ColorArea(props: ColorAreaProps) {
+  return (
+    (
+      <AriaColorArea {...props}>
+        <ColorThumb />
+      </AriaColorArea>
+    )
+  );
+}
diff --git a/starters/docs/src/ColorField.css b/starters/docs/src/ColorField.css
new file mode 100644
index 00000000000..9669327602a
--- /dev/null
+++ b/starters/docs/src/ColorField.css
@@ -0,0 +1,49 @@
+@import './Button.css';
+@import './Form.css';
+@import "./theme.css";
+
+.react-aria-ColorField {
+  display: flex;
+  flex-direction: column;
+  color: var(--text-color);
+
+  .react-aria-Input {
+    padding: 0.25025rem;
+    margin: 0;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--field-background);
+    font-size: 1.000125rem;
+    color: var(--field-text-color);
+    width: 100%;
+    max-width: 12ch;
+    box-sizing: border-box;
+
+    &[data-focused] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  &[data-invalid] {
+    .react-aria-Input {
+      border-color: var(--invalid-color);
+    }
+  }
+
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+
+  [slot=description] {
+    font-size: 12px;
+  }
+
+  .react-aria-Input {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+}
diff --git a/starters/docs/src/ColorField.tsx b/starters/docs/src/ColorField.tsx
new file mode 100644
index 00000000000..26701d9be48
--- /dev/null
+++ b/starters/docs/src/ColorField.tsx
@@ -0,0 +1,33 @@
+'use client';
+import {
+  ColorField as AriaColorField,
+  ColorFieldProps as AriaColorFieldProps,
+  FieldError,
+  Input,
+  Label,
+  Text,
+  ValidationResult
+} from 'react-aria-components';
+
+import './ColorField.css';
+
+export interface ColorFieldProps extends AriaColorFieldProps {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
+
+export function ColorField(
+  { label, description, errorMessage, ...props }: ColorFieldProps
+) {
+  return (
+    (
+      <AriaColorField {...props}>
+        {label && <Label>{label}</Label>}
+        <Input />
+        {description && <Text slot="description">{description}</Text>}
+        <FieldError>{errorMessage}</FieldError>
+      </AriaColorField>
+    )
+  );
+}
diff --git a/starters/docs/src/ColorPicker.css b/starters/docs/src/ColorPicker.css
new file mode 100644
index 00000000000..a7269ff9628
--- /dev/null
+++ b/starters/docs/src/ColorPicker.css
@@ -0,0 +1,43 @@
+@import './Button.css';
+@import "./ColorArea.css";
+@import "./ColorSlider.css";
+@import "./ColorSwatch.css";
+@import "./ColorSwatchPicker.css";
+@import "./ColorField.css";
+@import "./Popover.css";
+@import './Dialog.css';
+@import './ListBox.css';
+@import './Select.css';
+@import "./theme.css";
+
+.color-picker {
+  background: none;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  outline: none;
+  border-radius: 4px;
+  appearance: none;
+  vertical-align: middle;
+  font-size: 0.875rem;
+  color: var(--text-color);
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+}
+
+.color-picker-dialog {
+  outline: none;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 192px;
+  max-height: inherit;
+  box-sizing: border-box;
+  overflow: auto;
+}
diff --git a/starters/docs/src/ColorPicker.tsx b/starters/docs/src/ColorPicker.tsx
new file mode 100644
index 00000000000..c2ca042d8c8
--- /dev/null
+++ b/starters/docs/src/ColorPicker.tsx
@@ -0,0 +1,47 @@
+'use client';
+import {
+  ColorPicker as AriaColorPicker,
+  ColorPickerProps as AriaColorPickerProps,
+  DialogTrigger,
+  Popover
+} from 'react-aria-components';
+import {Button} from './Button';
+import {ColorSwatch} from './ColorSwatch';
+import {ColorSlider} from './ColorSlider';
+import {ColorArea} from './ColorArea';
+import {ColorField} from './ColorField';
+
+import './ColorPicker.css';
+
+export interface ColorPickerProps extends AriaColorPickerProps {
+  label?: string;
+  children?: React.ReactNode;
+}
+
+export function ColorPicker({ label, children, ...props }: ColorPickerProps) {
+  return (
+    (
+      <AriaColorPicker {...props}>
+        <DialogTrigger>
+          <Button className="color-picker">
+            <ColorSwatch />
+            <span>{label}</span>
+          </Button>
+          <Popover placement="bottom start" className="react-aria-Popover color-picker-dialog">
+            {children || (
+              <>
+                <ColorArea
+                  colorSpace="hsb"
+                  xChannel="saturation"
+                  yChannel="brightness"
+                />
+                <ColorSlider colorSpace="hsb" channel="hue" />
+                <ColorField label="Hex" />
+              </>
+            )}
+          </Popover>
+        </DialogTrigger>
+      </AriaColorPicker>
+    )
+  );
+}
diff --git a/starters/docs/src/ColorSlider.css b/starters/docs/src/ColorSlider.css
new file mode 100644
index 00000000000..51f606c59c7
--- /dev/null
+++ b/starters/docs/src/ColorSlider.css
@@ -0,0 +1,82 @@
+.react-aria-ColorSlider {
+  display: grid;
+  grid-template-areas: "label output"
+                       "track track";
+  grid-template-columns: 1fr auto;
+  gap: 4px;
+  width: 100%;
+  max-width: 300px;
+
+  .react-aria-Label {
+    grid-area: label;
+    color: var(--text-color);
+  }
+
+  .react-aria-SliderOutput {
+    grid-area: output;
+    width: 4ch;
+    text-align: end;
+    color: var(--text-color);
+  }
+
+  .react-aria-SliderTrack {
+    grid-area: track;
+    border-radius: 4px;
+  }
+
+  &[data-orientation=horizontal] {
+    .react-aria-SliderTrack {
+      height: 28px;
+    }
+
+    .react-aria-ColorThumb {
+      top: 50%;
+    }
+  }
+}
+
+.react-aria-ColorThumb {
+  border: 2px solid white;
+  box-shadow: 0 0 0 1px black, inset 0 0 0 1px black;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  box-sizing: border-box;
+
+  &[data-focus-visible] {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.react-aria-ColorSlider {
+  &[data-orientation=vertical] {
+    height: 150px;
+    display: block;
+
+    .react-aria-Label,
+    .react-aria-SliderOutput {
+      display: none;
+    }
+
+    .react-aria-SliderTrack {
+      width: 28px;
+      height: 100%;
+    }
+
+    .react-aria-ColorThumb {
+      left: 50%;
+    }
+  }
+
+  &[data-disabled] {
+    .react-aria-SliderTrack {
+      background: gray !important;
+    }
+
+    .react-aria-ColorThumb {
+      background: gray !important;
+      opacity: 0.5;
+    }
+  }
+}
diff --git a/starters/docs/src/ColorSlider.tsx b/starters/docs/src/ColorSlider.tsx
new file mode 100644
index 00000000000..7c6c3fc53bd
--- /dev/null
+++ b/starters/docs/src/ColorSlider.tsx
@@ -0,0 +1,34 @@
+'use client';
+import {
+  ColorSlider as AriaColorSlider,
+  ColorSliderProps as AriaColorSliderProps,
+  ColorThumb,
+  Label,
+  SliderOutput,
+  SliderTrack
+} from 'react-aria-components';
+
+import './ColorSlider.css';
+
+export interface ColorSliderProps extends AriaColorSliderProps {
+  label?: string;
+}
+
+export function ColorSlider({ label, ...props }: ColorSliderProps) {
+  return (
+    (
+      <AriaColorSlider {...props}>
+        <Label>{label}</Label>
+        <SliderOutput />
+        <SliderTrack
+          style={({ defaultStyle }) => ({
+            background: `${defaultStyle.background},
+            repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
+          })}
+        >
+          <ColorThumb />
+        </SliderTrack>
+      </AriaColorSlider>
+    )
+  );
+}
diff --git a/starters/docs/src/ColorSwatch.css b/starters/docs/src/ColorSwatch.css
new file mode 100644
index 00000000000..8ea7c052a2e
--- /dev/null
+++ b/starters/docs/src/ColorSwatch.css
@@ -0,0 +1,8 @@
+@import "./ColorSlider.css";
+
+.react-aria-ColorSwatch {
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
diff --git a/starters/docs/src/ColorSwatch.tsx b/starters/docs/src/ColorSwatch.tsx
new file mode 100644
index 00000000000..bb434cc7cc1
--- /dev/null
+++ b/starters/docs/src/ColorSwatch.tsx
@@ -0,0 +1,21 @@
+'use client';
+import {
+  ColorSwatch as AriaColorSwatch,
+  ColorSwatchProps
+} from 'react-aria-components';
+
+import './ColorSwatch.css';
+
+export function ColorSwatch(props: ColorSwatchProps) {
+  return (
+    (
+      <AriaColorSwatch
+        {...props}
+        style={({ color }) => ({
+          background: `linear-gradient(${color}, ${color}),
+          repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
+        })}
+      />
+    )
+  );
+}
diff --git a/starters/docs/src/ColorSwatchPicker.css b/starters/docs/src/ColorSwatchPicker.css
new file mode 100644
index 00000000000..630be3c8856
--- /dev/null
+++ b/starters/docs/src/ColorSwatchPicker.css
@@ -0,0 +1,42 @@
+@import "./ColorSwatch.css";
+@import "./ColorField.css";
+@import "./theme.css";
+
+.react-aria-ColorSwatchPicker {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.react-aria-ColorSwatchPickerItem {
+  position: relative;
+  outline: none;
+  border-radius: 4px;
+  width: fit-content;
+  forced-color-adjust: none;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-selected]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 2px solid black;
+    outline: 2px solid white;
+    outline-offset: -4px;
+    border-radius: inherit;
+  }
+
+  &[data-disabled] {
+    opacity: 0.2;
+  }
+}
+
+.react-aria-ColorSwatchPicker {
+  &[data-layout=stack] {
+    flex-direction: column;
+  }
+}
diff --git a/starters/docs/src/ColorSwatchPicker.tsx b/starters/docs/src/ColorSwatchPicker.tsx
new file mode 100644
index 00000000000..34b62a5e106
--- /dev/null
+++ b/starters/docs/src/ColorSwatchPicker.tsx
@@ -0,0 +1,33 @@
+'use client';
+import {
+  ColorSwatchPicker as AriaColorSwatchPicker,
+  ColorSwatchPickerItem as AriaColorSwatchPickerItem,
+  ColorSwatchPickerItemProps,
+  ColorSwatchPickerProps
+} from 'react-aria-components';
+
+import {ColorSwatch} from './ColorSwatch';
+
+import './ColorSwatchPicker.css';
+
+export function ColorSwatchPicker(
+  { children, ...props }: ColorSwatchPickerProps
+) {
+  return (
+    (
+      <AriaColorSwatchPicker {...props}>
+        {children}
+      </AriaColorSwatchPicker>
+    )
+  );
+}
+
+export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps) {
+  return (
+    (
+      <AriaColorSwatchPickerItem {...props}>
+        <ColorSwatch />
+      </AriaColorSwatchPickerItem>
+    )
+  );
+}
diff --git a/starters/docs/src/ColorWheel.css b/starters/docs/src/ColorWheel.css
new file mode 100644
index 00000000000..d01216ab32b
--- /dev/null
+++ b/starters/docs/src/ColorWheel.css
@@ -0,0 +1,26 @@
+.react-aria-ColorThumb {
+  border: 2px solid white;
+  box-shadow: 0 0 0 1px black, inset 0 0 0 1px black;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  box-sizing: border-box;
+
+  &[data-focus-visible] {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.react-aria-ColorWheel {
+  &[data-disabled] {
+    .react-aria-ColorWheelTrack {
+      background: gray !important;
+    }
+
+    .react-aria-ColorThumb {
+      background: gray !important;
+      opacity: 0.5;
+    }
+  }
+}
diff --git a/starters/docs/src/ColorWheel.tsx b/starters/docs/src/ColorWheel.tsx
new file mode 100644
index 00000000000..d5965505a77
--- /dev/null
+++ b/starters/docs/src/ColorWheel.tsx
@@ -0,0 +1,22 @@
+'use client';
+import {
+  ColorThumb,
+  ColorWheel as AriaColorWheel,
+  ColorWheelProps as AriaColorWheelProps,
+  ColorWheelTrack
+} from 'react-aria-components';
+
+import './ColorWheel.css';
+export interface ColorWheelProps
+  extends Omit<AriaColorWheelProps, 'outerRadius' | 'innerRadius'> {}
+
+export function ColorWheel(props: ColorWheelProps) {
+  return (
+    (
+      <AriaColorWheel {...props} outerRadius={100} innerRadius={74}>
+        <ColorWheelTrack />
+        <ColorThumb />
+      </AriaColorWheel>
+    )
+  );
+}
diff --git a/starters/docs/src/ComboBox.css b/starters/docs/src/ComboBox.css
new file mode 100644
index 00000000000..41c2b99ae79
--- /dev/null
+++ b/starters/docs/src/ComboBox.css
@@ -0,0 +1,132 @@
+@import './Checkbox.css';
+@import './ListBox.css';
+@import './Popover.css';
+@import './Form.css';
+@import './Button.css';
+@import "./theme.css";
+
+.react-aria-ComboBox {
+  color: var(--text-color);
+
+  > div:has(.react-aria-Input) {
+    display: flex;
+    align-items: center;
+  }
+
+  .react-aria-Input {
+    margin: 0;
+    font-size: 0.9380000000000001rem;
+    background: var(--field-background);
+    color: var(--field-text-color);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 0.25025rem 1.75rem 0.25025rem 0.499625rem;
+    vertical-align: middle;
+    outline: none;
+    min-width: 0;
+
+    &[data-focused] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  .react-aria-Button {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+    forced-color-adjust: none;
+    border-radius: 4px;
+    border: none;
+    margin-left: -1.49975rem;
+    width: 1.250375rem;
+    height: 1.250375rem;
+    padding: 0;
+    font-size: 0.749875rem;
+    cursor: default;
+    flex-shrink: 0;
+
+    &[data-pressed] {
+      box-shadow: none;
+      background: var(--highlight-background);
+    }
+  }
+}
+
+.react-aria-Popover[data-trigger=ComboBox] {
+  width: var(--trigger-width);
+
+  .react-aria-ListBox {
+    display: block;
+    width: unset;
+    max-height: inherit;
+    min-height: unset;
+    border: none;
+
+    .react-aria-Header {
+      padding-left: 1.374625rem;
+    }
+  }
+
+  .react-aria-ListBoxItem {
+    padding: 0 0.499625rem 0 1.374625rem;
+
+    &[data-focus-visible] {
+      outline: none;
+    }
+
+    &[data-selected] {
+      font-weight: 600;
+      background: unset;
+      color: var(--text-color);
+
+      &::before {
+        content: '✓';
+        content: '✓' / '';
+        alt: ' ';
+        position: absolute;
+        top: 4px;
+        left: 4px;
+      }
+    }
+
+    &[data-focused],
+    &[data-pressed] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+    }
+  }
+}
+
+.react-aria-ListBoxItem[href] {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.react-aria-ComboBox {
+  .react-aria-Input {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+    }
+  }
+
+  .react-aria-Button {
+    &[data-disabled] {
+      background: var(--border-color-disabled);
+    }
+  }
+
+  .react-aria-Input {
+    &[data-invalid]:not([data-focused]) {
+      border-color: var(--invalid-color);
+    }
+  }
+
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+
+  [slot=description] {
+    font-size: 12px;
+  }
+}
diff --git a/starters/docs/src/ComboBox.tsx b/starters/docs/src/ComboBox.tsx
new file mode 100644
index 00000000000..33e58ff837d
--- /dev/null
+++ b/starters/docs/src/ComboBox.tsx
@@ -0,0 +1,52 @@
+'use client';
+import {
+  Button,
+  ComboBox as AriaComboBox,
+  ComboBoxProps as AriaComboBoxProps,
+  FieldError,
+  Input,
+  Label,
+  ListBoxItemProps,
+  Popover,
+  Text,
+  ValidationResult
+} from 'react-aria-components';
+import {ListBox, ListBoxItem} from './ListBox';
+import {ChevronDown} from 'lucide-react';
+
+import './ComboBox.css';
+
+export interface ComboBoxProps<T extends object>
+  extends Omit<AriaComboBoxProps<T>, 'children'> {
+  label?: string;
+  description?: string | null;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  children: React.ReactNode | ((item: T) => React.ReactNode);
+}
+
+export function ComboBox<T extends object>(
+  { label, description, errorMessage, children, ...props }: ComboBoxProps<T>
+) {
+  return (
+    (
+      <AriaComboBox {...props}>
+        <Label>{label}</Label>
+        <div className="my-combobox-container">
+          <Input />
+          <Button><ChevronDown size={16} /></Button>
+        </div>
+        {description && <Text slot="description">{description}</Text>}
+        <FieldError>{errorMessage}</FieldError>
+        <Popover>
+          <ListBox>
+            {children}
+          </ListBox>
+        </Popover>
+      </AriaComboBox>
+    )
+  );
+}
+
+export function ComboBoxItem(props: ListBoxItemProps) {
+  return <ListBoxItem {...props} />;
+}
diff --git a/starters/docs/src/DateField.css b/starters/docs/src/DateField.css
new file mode 100644
index 00000000000..9602cb0327b
--- /dev/null
+++ b/starters/docs/src/DateField.css
@@ -0,0 +1,70 @@
+@import './Form.css';
+@import './Button.css';
+@import "./theme.css";
+
+.react-aria-DateField {
+  color: var(--text-color);
+  display: flex;
+  flex-direction: column;
+}
+
+.react-aria-DateInput {
+  display: inline;
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--field-background);
+  width: fit-content;
+  min-width: 150px;
+  white-space: nowrap;
+  forced-color-adjust: none;
+
+  &[data-focus-within] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+}
+
+.react-aria-DateSegment {
+  padding: 0 2px;
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+  color: var(--text-color);
+
+  &[data-type=literal] {
+    padding: 0;
+  }
+
+  &[data-placeholder] {
+    color: var(--text-color-placeholder);
+    font-style: italic;
+  }
+
+  &:focus {
+    color: var(--highlight-foreground);
+    background: var(--highlight-background);
+    outline: none;
+    border-radius: 4px;
+    caret-color: transparent;
+  }
+
+  &[data-invalid] {
+    color: var(--invalid-color);
+
+    &:focus {
+      background: var(--highlight-background-invalid);
+      color: var(--highlight-foreground);
+    }
+  }
+}
+
+.react-aria-DateField {
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+
+  [slot=description] {
+    font-size: 12px;
+  }
+}
diff --git a/starters/docs/src/DateField.tsx b/starters/docs/src/DateField.tsx
new file mode 100644
index 00000000000..091f293a2b6
--- /dev/null
+++ b/starters/docs/src/DateField.tsx
@@ -0,0 +1,38 @@
+'use client';
+import {
+  DateField as AriaDateField,
+  DateFieldProps as AriaDateFieldProps,
+  DateInput,
+  DateSegment,
+  DateValue,
+  FieldError,
+  Label,
+  Text,
+  ValidationResult
+} from 'react-aria-components';
+
+import './DateField.css';
+
+export interface DateFieldProps<T extends DateValue>
+  extends AriaDateFieldProps<T> {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
+
+export function DateField<T extends DateValue>(
+  { label, description, errorMessage, ...props }: DateFieldProps<T>
+) {
+  return (
+    (
+      <AriaDateField {...props}>
+        <Label>{label}</Label>
+        <DateInput>
+          {(segment) => <DateSegment segment={segment} />}
+        </DateInput>
+        {description && <Text slot="description">{description}</Text>}
+        <FieldError>{errorMessage}</FieldError>
+      </AriaDateField>
+    )
+  );
+}
diff --git a/starters/docs/src/DatePicker.css b/starters/docs/src/DatePicker.css
new file mode 100644
index 00000000000..3a060e92dbc
--- /dev/null
+++ b/starters/docs/src/DatePicker.css
@@ -0,0 +1,71 @@
+@import './Button.css';
+@import './Popover.css';
+@import './Dialog.css';
+@import './DateField.css';
+@import './Calendar.css';
+@import './Form.css';
+@import "./theme.css";
+
+.react-aria-DatePicker {
+  color: var(--text-color);
+
+  .react-aria-Group {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+  }
+
+  .react-aria-Button {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+    border: 2px solid var(--field-background);
+    forced-color-adjust: none;
+    border-radius: 4px;
+    border: none;
+    margin-left: -1.687875rem;
+    width: 1.250375rem;
+    height: 1.250375rem;
+    padding: 0;
+    font-size: 0.749875rem;
+    box-sizing: content-box;
+
+    &[data-pressed] {
+      box-shadow: none;
+      background: var(--highlight-background);
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: 2px;
+    }
+  }
+
+  .react-aria-DateInput {
+    padding: 4px 2.1875rem 4px 8px;
+  }
+}
+
+.react-aria-Popover[data-trigger=DatePicker] {
+  max-width: unset;
+}
+
+.react-aria-DatePicker {
+  &[data-invalid] {
+    .react-aria-DateInput:after {
+      content: '🚫' / '';
+      content: '🚫';
+      alt: ' ';
+      flex: 1;
+      text-align: end;
+    }
+  }
+
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+
+  [slot=description] {
+    font-size: 12px;
+  }
+}
diff --git a/starters/docs/src/DatePicker.tsx b/starters/docs/src/DatePicker.tsx
new file mode 100644
index 00000000000..063010a60d7
--- /dev/null
+++ b/starters/docs/src/DatePicker.tsx
@@ -0,0 +1,50 @@
+'use client';
+import {
+  DateInput,
+  DatePicker as AriaDatePicker,
+  DatePickerProps as AriaDatePickerProps,
+  DateSegment,
+  DateValue,
+  FieldError,
+  Group,
+  Label,
+  Text,
+  ValidationResult
+} from 'react-aria-components';
+import {Button} from './Button';
+import {Calendar} from './Calendar';
+import {Popover} from './Popover';
+import {ChevronDown} from 'lucide-react';
+
+import './DatePicker.css';
+
+export interface DatePickerProps<T extends DateValue>
+  extends AriaDatePickerProps<T> {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
+
+export function DatePicker<T extends DateValue>(
+  { label, description, errorMessage, firstDayOfWeek, ...props }:
+    DatePickerProps<T>
+) {
+  return (
+    (
+      <AriaDatePicker {...props}>
+        <Label>{label}</Label>
+        <Group>
+          <DateInput>
+            {(segment) => <DateSegment segment={segment} />}
+          </DateInput>
+          <Button><ChevronDown size={16} /></Button>
+        </Group>
+        {description && <Text slot="description">{description}</Text>}
+        <FieldError>{errorMessage}</FieldError>
+        <Popover hideArrow>
+          <Calendar firstDayOfWeek={firstDayOfWeek} />
+        </Popover>
+      </AriaDatePicker>
+    )
+  );
+}
diff --git a/starters/docs/src/DateRangePicker.css b/starters/docs/src/DateRangePicker.css
new file mode 100644
index 00000000000..52ea752198f
--- /dev/null
+++ b/starters/docs/src/DateRangePicker.css
@@ -0,0 +1,109 @@
+@import './Button.css';
+@import './Popover.css';
+@import './Dialog.css';
+@import './DateField.css';
+@import './RangeCalendar.css';
+@import './Form.css';
+@import "./theme.css";
+
+.react-aria-DateRangePicker {
+  color: var(--text-color);
+
+  .react-aria-Group {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    min-width: 220px;
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow: auto;
+    position: relative;
+    padding: 4px 4px 4px 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--field-background);
+    white-space: nowrap;
+
+    &[data-pressed] {
+      box-shadow: none;
+      background: var(--highlight-background);
+    }
+
+    &[data-focus-within] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  [slot=start] + span {
+    padding: 0 4px;
+  }
+
+  [slot=end] {
+    margin-right: 1.75rem;
+    flex: 1;
+  }
+
+  .react-aria-Button {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+    border: 2px solid var(--field-background);
+    forced-color-adjust: none;
+    border-radius: 4px;
+    border: none;
+    margin-left: auto;
+    width: 1.250375rem;
+    height: 1.250375rem;
+    padding: 0;
+    font-size: 0.749875rem;
+    box-sizing: content-box;
+    flex-shrink: 0;
+    position: sticky;
+    right: 0;
+
+    &[data-pressed] {
+      box-shadow: none;
+      background: var(--highlight-background);
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: 2px;
+    }
+  }
+
+  .react-aria-DateInput {
+    width: unset;
+    min-width: unset;
+    padding: unset;
+    border: unset;
+    outline: unset;
+  }
+}
+
+.react-aria-Popover[data-trigger=DateRangePicker] {
+  max-width: unset;
+}
+
+.react-aria-DateRangePicker {
+  &[data-invalid] {
+    [slot=end]:after {
+      content: '🚫' / '';
+      content: '🚫';
+      alt: ' ';
+      flex: 1;
+      text-align: end;
+      margin-left: 1.3125rem;
+      margin-right: -1.3125rem;
+    }
+  }
+
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+
+  [slot=description] {
+    font-size: 12px;
+  }
+}
diff --git a/starters/docs/src/DateRangePicker.tsx b/starters/docs/src/DateRangePicker.tsx
new file mode 100644
index 00000000000..fdfafc2f45d
--- /dev/null
+++ b/starters/docs/src/DateRangePicker.tsx
@@ -0,0 +1,53 @@
+'use client';
+import {
+  DateInput,
+  DateRangePicker as AriaDateRangePicker,
+  DateRangePickerProps as AriaDateRangePickerProps,
+  DateSegment,
+  DateValue,
+  FieldError,
+  Group,
+  Label,
+  Text,
+  ValidationResult
+} from 'react-aria-components';
+import {Button} from './Button';
+import {Popover} from './Popover';
+import {RangeCalendar} from './RangeCalendar';
+import {ChevronDown} from 'lucide-react';
+import './DateRangePicker.css';
+
+export interface DateRangePickerProps<T extends DateValue>
+  extends AriaDateRangePickerProps<T> {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
+
+export function DateRangePicker<T extends DateValue>(
+  { label, description, errorMessage, firstDayOfWeek, ...props }:
+    DateRangePickerProps<T>
+) {
+  return (
+    (
+      <AriaDateRangePicker {...props}>
+        <Label>{label}</Label>
+        <Group>
+          <DateInput slot="start">
+            {(segment) => <DateSegment segment={segment} />}
+          </DateInput>
+          <span aria-hidden="true">–</span>
+          <DateInput slot="end">
+            {(segment) => <DateSegment segment={segment} />}
+          </DateInput>
+          <Button><ChevronDown size={16} /></Button>
+        </Group>
+        {description && <Text slot="description">{description}</Text>}
+        <FieldError>{errorMessage}</FieldError>
+        <Popover hideArrow>
+          <RangeCalendar firstDayOfWeek={firstDayOfWeek} />
+        </Popover>
+      </AriaDateRangePicker>
+    )
+  );
+}
diff --git a/starters/docs/src/Dialog.css b/starters/docs/src/Dialog.css
new file mode 100644
index 00000000000..a5051aeb2c6
--- /dev/null
+++ b/starters/docs/src/Dialog.css
@@ -0,0 +1,17 @@
+@import "./theme.css";
+@import './Button.css';
+@import './TextField.css';
+@import './Modal.css';
+
+.react-aria-Dialog {
+  outline: none;
+  padding: 30px;
+  max-height: inherit;
+  box-sizing: border-box;
+  overflow: auto;
+
+  .react-aria-Heading[slot=title] {
+    line-height: 1em;
+    margin-top: 0;
+  }
+}
diff --git a/starters/docs/src/Dialog.tsx b/starters/docs/src/Dialog.tsx
new file mode 100644
index 00000000000..f9d491da3dd
--- /dev/null
+++ b/starters/docs/src/Dialog.tsx
@@ -0,0 +1,7 @@
+'use client';
+import {Dialog as RACDialog, DialogProps} from 'react-aria-components';
+import './Dialog.css';
+
+export function Dialog(props: DialogProps) {
+  return <RACDialog {...props} />;
+}
diff --git a/starters/docs/src/Disclosure.css b/starters/docs/src/Disclosure.css
new file mode 100644
index 00000000000..97a0ce5fc11
--- /dev/null
+++ b/starters/docs/src/Disclosure.css
@@ -0,0 +1,32 @@
+@import "./theme.css";
+@import './Button.css';
+
+.react-aria-Disclosure {
+  .react-aria-Button[slot=trigger] {
+    background: none;
+    border: none;
+    box-shadow: none;
+    font-weight: bold;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    svg {
+      rotate: 0deg;
+      transition: rotate 200ms;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 3px;
+    }
+  }
+
+  &[data-expanded] .react-aria-Button[slot=trigger] svg {
+    rotate: 90deg;
+  }
+}
+
+.react-aria-DisclosurePanel {
+  margin-left: 32px;
+  color: var(--text-color);
+}
diff --git a/starters/docs/src/Disclosure.tsx b/starters/docs/src/Disclosure.tsx
new file mode 100644
index 00000000000..27fa6eae384
--- /dev/null
+++ b/starters/docs/src/Disclosure.tsx
@@ -0,0 +1,34 @@
+'use client';
+import {
+  Button,
+  Disclosure as AriaDisclosure,
+  DisclosurePanel,
+  DisclosureProps as AriaDisclosureProps,
+  Heading
+} from 'react-aria-components';
+import {ChevronRight} from 'lucide-react';
+
+import './Disclosure.css';
+
+export interface DisclosureProps extends Omit<AriaDisclosureProps, 'children'> {
+  title?: string;
+  children?: React.ReactNode;
+}
+
+export function Disclosure({ title, children, ...props }: DisclosureProps) {
+  return (
+    (
+      <AriaDisclosure {...props}>
+        <Heading>
+          <Button slot="trigger">
+            <ChevronRight />
+            {title}
+          </Button>
+        </Heading>
+        <DisclosurePanel>
+          <p>{children}</p>
+        </DisclosurePanel>
+      </AriaDisclosure>
+    )
+  );
+}
diff --git a/starters/docs/src/DisclosureGroup.css b/starters/docs/src/DisclosureGroup.css
new file mode 100644
index 00000000000..a6bfd3f1af0
--- /dev/null
+++ b/starters/docs/src/DisclosureGroup.css
@@ -0,0 +1,3 @@
+@import "./theme.css";
+@import './Button.css';
+@import './Disclosure.css'
diff --git a/starters/docs/src/DisclosureGroup.tsx b/starters/docs/src/DisclosureGroup.tsx
new file mode 100644
index 00000000000..a4ba8b635ff
--- /dev/null
+++ b/starters/docs/src/DisclosureGroup.tsx
@@ -0,0 +1,7 @@
+'use client';
+import {DisclosureGroup as RACDisclosureGroup, DisclosureGroupProps} from 'react-aria-components';
+import './DisclosureGroup.css';
+
+export function DisclosureGroup(props: DisclosureGroupProps) {
+  return <RACDisclosureGroup {...props} />;
+}
diff --git a/starters/docs/src/Form.css b/starters/docs/src/Form.css
new file mode 100644
index 00000000000..984c3d0a8b3
--- /dev/null
+++ b/starters/docs/src/Form.css
@@ -0,0 +1,31 @@
+@import "./theme.css";
+@import './Button.css';
+
+.react-aria-Form {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
+}
+
+.react-aria-Form [role=alert] {
+  border: 2px solid var(--invalid-color);
+  background: var(--overlay-background);
+  border-radius: 6px;
+  padding: 12px;
+  max-width: 250px;
+  outline: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  h3 {
+    margin-top: 0;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
diff --git a/starters/docs/src/Form.tsx b/starters/docs/src/Form.tsx
new file mode 100644
index 00000000000..2daca77d814
--- /dev/null
+++ b/starters/docs/src/Form.tsx
@@ -0,0 +1,7 @@
+'use client';
+import {Form as RACForm, FormProps} from 'react-aria-components';
+import './Form.css';
+
+export function Form(props: FormProps) {
+  return <RACForm {...props} />;
+}
diff --git a/starters/docs/src/GridList.css b/starters/docs/src/GridList.css
new file mode 100644
index 00000000000..823d4d8bb4a
--- /dev/null
+++ b/starters/docs/src/GridList.css
@@ -0,0 +1,190 @@
+@import './Button.css';
+@import './Checkbox.css';
+@import './ToggleButton.css';
+@import "./theme.css";
+
+.react-aria-GridList {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: inherit;
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--overlay-background);
+  forced-color-adjust: none;
+  outline: none;
+  width: 250px;
+  max-height: 300px;
+  min-height: 100px;
+  box-sizing: border-box;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+
+  .react-aria-GridListItem {
+    display: flex;
+    align-items: center;
+    gap: 0.499625rem;
+    min-height: 28px;
+    padding: 0.25025rem 0.25025rem 0.25025rem 0.499625rem;
+    border-radius: 6px;
+    outline: none;
+    cursor: default;
+    color: var(--text-color);
+    font-size: 0.9380000000000001rem;
+    position: relative;
+    transform: translateZ(0);
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -2px;
+    }
+
+    &[data-pressed] {
+      background: var(--gray-100);
+    }
+
+    &[data-selected] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+      --focus-ring-color: var(--highlight-foreground);
+
+      &[data-focus-visible] {
+        outline-color: var(--highlight-foreground);
+        outline-offset: -4px;
+      }
+
+      .react-aria-Button {
+        color: var(--highlight-foreground);
+        --highlight-hover: rgb(255 255 255 / 0.1);
+        --highlight-pressed: rgb(255 255 255 / 0.2);
+      }
+    }
+
+    &[data-disabled] {
+      color: var(--text-color-disabled);
+    }
+
+    .react-aria-Button:not([slot]) {
+      margin-left: auto;
+    }
+
+    .react-aria-Button {
+      background: transparent;
+      border: none;
+      font-size: 1.05rem;
+      line-height: 1.2em;
+      padding: 0.25025rem 0.375375rem;
+      transition: background 200ms;
+
+      &[data-hovered] {
+        background: var(--highlight-hover);
+      }
+
+      &[data-pressed] {
+        background: var(--highlight-pressed);
+        box-shadow: none;
+      }
+    }
+
+    .react-aria-Button[slot='drag'] {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  /* join selected items if :has selector is supported */
+  @supports selector(:has(.foo)) {
+    gap: 0;
+
+    .react-aria-GridListItem[data-selected]:has(+ [data-selected]),
+    .react-aria-GridListItem[data-selected]:has(+ .react-aria-DropIndicator + [data-selected]) {
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    .react-aria-GridListItem[data-selected] + [data-selected],
+    .react-aria-GridListItem[data-selected] + .react-aria-DropIndicator + [data-selected] {
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+  }
+
+  :where(.react-aria-GridListItem) .react-aria-Checkbox {
+    --selected-color: var(--highlight-foreground);
+    --selected-color-pressed: var(--highlight-foreground-pressed);
+    --checkmark-color: var(--highlight-background);
+    --background-color: var(--highlight-background);
+  }
+}
+
+.react-aria-GridListItem[data-href] {
+  cursor: pointer;
+}
+
+.react-aria-GridList {
+  &[data-empty] {
+    align-items: center;
+    justify-content: center;
+    font-style: italic;
+  }
+}
+
+.react-aria-GridListItem {
+  &[data-allows-dragging] {
+    padding-left: 4px;
+  }
+
+  &[data-dragging] {
+    opacity: 0.6;
+  }
+
+  [slot=drag] {
+    all: unset;
+    width: 15px;
+    text-align: center;
+
+    &[data-focus-visible] {
+      border-radius: 4px;
+      outline: 2px solid var(--focus-ring-color);
+    }
+  }
+}
+
+.react-aria-DropIndicator {
+  &[data-drop-target] {
+    outline: 1px solid var(--highlight-background);
+  }
+
+  @supports not selector(:has(.foo)) {
+    /* Undo gap in browsers that don't support :has */
+    margin-bottom: -2px;
+  }
+}
+
+.react-aria-GridList[data-drop-target] {
+  outline: 2px solid var(--highlight-background);
+  outline-offset: -1px;
+  background: var(--highlight-overlay);
+}
+
+.react-aria-GridListItem[data-drop-target] {
+  outline: 2px solid var(--highlight-background);
+  background:var(--highlight-overlay);
+}
+
+.react-aria-DropIndicator {
+  &[data-drop-target] {
+    outline: 1px solid var(--highlight-background);
+  }
+
+  @supports not selector(:has(.foo)) {
+    /* Undo gap in browsers that don't support :has */
+    margin-bottom: -2px;
+  }
+}
diff --git a/starters/docs/src/GridList.tsx b/starters/docs/src/GridList.tsx
new file mode 100644
index 00000000000..318bdba69f8
--- /dev/null
+++ b/starters/docs/src/GridList.tsx
@@ -0,0 +1,47 @@
+'use client';
+import {
+  Button,
+  GridList as AriaGridList,
+  GridListItem as AriaGridListItem,
+  GridListItemProps,
+  GridListProps
+} from 'react-aria-components';
+import {Checkbox} from './Checkbox';
+import {VerticalGrip} from 'lucide-react';
+import './GridList.css';
+
+export function GridList<T extends object>(
+  { children, ...props }: GridListProps<T>
+) {
+  return (
+    (
+      <AriaGridList {...props}>
+        {children}
+      </AriaGridList>
+    )
+  );
+}
+
+export function GridListItem(
+  { children, ...props }: Omit<GridListItemProps, 'children'> & {
+    children?: React.ReactNode;
+  }
+) {
+  let textValue = typeof children === 'string' ? children : undefined;
+  return (
+    (
+      <AriaGridListItem textValue={textValue} {...props}>
+        {({ selectionMode, selectionBehavior, allowsDragging }) => (
+          <>
+            {/* Add elements for drag and drop and selection. */}
+            {allowsDragging && <Button slot="drag"><VerticalGrip size={16} /></Button>}
+            {selectionMode === 'multiple' && selectionBehavior === 'toggle' && (
+              <Checkbox slot="selection" />
+            )}
+            {children}
+          </>
+        )}
+      </AriaGridListItem>
+    )
+  );
+}
diff --git a/starters/docs/src/Link.css b/starters/docs/src/Link.css
new file mode 100644
index 00000000000..6e582149850
--- /dev/null
+++ b/starters/docs/src/Link.css
@@ -0,0 +1,32 @@
+@import "./theme.css";
+
+.react-aria-Link {
+  color: var(--link-color);
+  font-size: 18px;
+  transition: all 200ms;
+  text-decoration: underline;
+  cursor: pointer;
+  outline: none;
+  position: relative;
+
+  &[data-hovered] {
+    text-decoration-style: wavy;
+  }
+
+  &[data-pressed] {
+    color: var(--link-color-pressed);
+  }
+
+  &[data-focus-visible]:after {
+    content: '';
+    position: absolute;
+    inset: -3px -6px;
+    border-radius: 6px;
+    border: 2px solid var(--focus-ring-color);
+  }
+
+  &[data-disabled] {
+    cursor: default;
+    color: var(--text-color-disabled);
+  }
+}
diff --git a/starters/docs/src/Link.tsx b/starters/docs/src/Link.tsx
new file mode 100644
index 00000000000..b3662fa638a
--- /dev/null
+++ b/starters/docs/src/Link.tsx
@@ -0,0 +1,7 @@
+'use client';
+import {Link as RACLink, LinkProps} from 'react-aria-components';
+import './Link.css';
+
+export function Link(props: LinkProps) {
+  return <RACLink {...props} />;
+}
diff --git a/starters/docs/src/ListBox.css b/starters/docs/src/ListBox.css
new file mode 100644
index 00000000000..3a84a03b3f4
--- /dev/null
+++ b/starters/docs/src/ListBox.css
@@ -0,0 +1,219 @@
+@import './Checkbox.css';
+@import "./theme.css";
+
+.react-aria-ListBox {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: inherit;
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--overlay-background);
+  forced-color-adjust: none;
+  outline: none;
+  width: 250px;
+  max-height: 300px;
+  min-height: 100px;
+  box-sizing: border-box;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+}
+
+.react-aria-ListBoxItem {
+  padding: 0 0.499625rem;
+  border-radius: 6px;
+  outline: none;
+  cursor: default;
+  color: var(--text-color);
+  font-size: 0.9380000000000001rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 32px;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -2px;
+  }
+
+  &[data-selected] {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+
+    &[data-focus-visible] {
+      outline-color: var(--highlight-foreground);
+      outline-offset: -4px;
+    }
+  }
+}
+
+.react-aria-ListBoxItem[href] {
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-touch-callout: none;
+}
+
+.react-aria-ListBox {
+  .react-aria-ListBoxSection:not(:first-child) {
+    margin-top: 12px;
+  }
+
+  .react-aria-Header {
+    font-size: 1.000125rem;
+    font-weight: bold;
+    padding: 0 0.6247499999999999rem;
+  }
+}
+
+.react-aria-ListBoxItem {
+  [slot=label] {
+    font-weight: bold;
+  }
+
+  [slot=description] {
+    font-size: small;
+  }
+}
+
+.react-aria-ListBox[data-orientation=horizontal],
+.react-aria-ListBox[data-layout=grid] {
+  flex-direction: row;
+  width: fit-content;
+  max-width: 100%;
+  padding: 4px;
+
+  .react-aria-ListBoxItem {
+    position: relative;
+    margin: 0;
+    padding: 4px;
+
+    & img {
+      object-fit: cover;
+      aspect-ratio: 1/1;
+      max-width: 150px;
+      margin-bottom: 4px;
+      border-radius: 4px;
+    }
+
+    &[data-selected] {
+      background: none;
+      color: inherit;
+
+      &:after {
+        content: '✓';
+        content: '✓' / '';
+        alt: ' ';
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        background: var(--highlight-background);
+        border: 2px solid var(--highlight-foreground);
+        color: var(--highlight-foreground);
+        width: 22px;
+        height: 22px;
+        border-radius: 22px;
+        box-sizing: border-box;
+        font-size: 14px;
+        line-height: 1em;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 0 8px rgb(0 0 0 / .5);
+      }
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -2px;
+    }
+  }
+}
+
+.react-aria-ListBox[data-layout=grid] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  scrollbar-gutter: stable;
+}
+
+.react-aria-ListBox[data-layout=grid][data-orientation=horizontal] {
+  width: 100%;
+  max-width: none;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: 58px 58px;
+  grid-template-columns: none;
+  grid-auto-columns: 250px;
+  max-height: 200px;
+  gap: 8px;
+
+  .react-aria-ListBoxItem {
+    display: grid;
+    grid-template-areas: "image ."
+                         "image title"
+                         "image description"
+                         "image .";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr auto auto 1fr;
+    column-gap: 8px;
+
+    & img {
+      width: 50px;
+      height: 50px;
+      grid-area: image;
+      margin-bottom: 0;
+    }
+
+    [slot=label] {
+      grid-area: title;
+    }
+
+    [slot=description] {
+      grid-area: description;
+    }
+  }
+}
+
+.react-aria-ListBoxItem {
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+  }
+}
+
+.react-aria-ListBox {
+  &[data-empty] {
+    align-items: center;
+    justify-content: center;
+    font-style: italic;
+  }
+}
+
+.react-aria-ListBoxItem {
+  &[data-dragging] {
+    opacity: 0.6;
+  }
+}
+
+.react-aria-DropIndicator[data-drop-target] {
+  outline: 1px solid var(--highlight-background);
+}
+
+.react-aria-ListBox[data-drop-target] {
+  outline: 2px solid var(--highlight-background);
+  outline-offset: -1px;
+  background: var(--highlight-overlay)
+}
+
+.react-aria-ListBoxItem[data-drop-target] {
+  outline: 2px solid var(--highlight-background);
+  background: var(--highlight-overlay)
+}
+
+.react-aria-DropIndicator[data-drop-target] {
+  outline: 1px solid var(--highlight-background);
+}
diff --git a/starters/docs/src/ListBox.tsx b/starters/docs/src/ListBox.tsx
new file mode 100644
index 00000000000..4a448121676
--- /dev/null
+++ b/starters/docs/src/ListBox.tsx
@@ -0,0 +1,25 @@
+'use client';
+import {
+  ListBox as AriaListBox,
+  ListBoxItem as AriaListBoxItem,
+  ListBoxItemProps,
+  ListBoxProps
+} from 'react-aria-components';
+
+import './ListBox.css';
+
+export function ListBox<T extends object>(
+  { children, ...props }: ListBoxProps<T>
+) {
+  return (
+    (
+      <AriaListBox {...props}>
+        {children}
+      </AriaListBox>
+    )
+  );
+}
+
+export function ListBoxItem(props: ListBoxItemProps) {
+  return <AriaListBoxItem {...props} />;
+}
diff --git a/starters/docs/src/Menu.css b/starters/docs/src/Menu.css
new file mode 100644
index 00000000000..2b3eb4f3c7f
--- /dev/null
+++ b/starters/docs/src/Menu.css
@@ -0,0 +1,120 @@
+@import './Button.css';
+@import './Popover.css';
+@import './SearchField.css';
+@import "./theme.css";
+
+.react-aria-Menu {
+  max-height: inherit;
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 2px;
+  min-width: 150px;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.react-aria-MenuItem {
+  margin: 2px;
+  padding: 0.25025rem 0.499625rem;
+  border-radius: 6px;
+  outline: none;
+  cursor: default;
+  color: var(--text-color);
+  font-size: 0.9380000000000001rem;
+  position: relative;
+  display: grid;
+  grid-template-areas: "label kbd"
+                      "desc  kbd";
+  align-items: center;
+  column-gap: 20px;
+  forced-color-adjust: none;
+
+  &[data-focused] {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+  }
+}
+
+.react-aria-MenuItem {
+  &[data-selection-mode] {
+    padding-left: 24px;
+
+    &::before {
+      position: absolute;
+      left: 4px;
+      font-weight: 600;
+    }
+
+    &[data-selection-mode=multiple][data-selected]::before {
+      content: '✓';
+      content: '✓' / '';
+      alt: ' ';
+      position: absolute;
+      left: 4px;
+      font-weight: 600;
+    }
+
+    &[data-selection-mode=single][data-selected]::before {
+      content: '●';
+      content: '●' / '';
+      transform: scale(0.7)
+    }
+  }
+}
+
+.react-aria-MenuItem[href] {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.react-aria-Menu {
+  .react-aria-MenuSection:not(:first-child) {
+    margin-top: 12px;
+  }
+
+  .react-aria-Header {
+    font-size: 1.000125rem;
+    font-weight: bold;
+    padding: 0 0.6247499999999999rem;
+  }
+
+  .react-aria-Separator {
+    height: 1px;
+    background: var(--border-color);
+    margin: 2px 4px;
+  }
+}
+
+.react-aria-MenuItem {
+  [slot=label] {
+    font-weight: bold;
+    grid-area: label;
+  }
+
+  [slot=description] {
+    font-size: small;
+    grid-area: desc;
+  }
+
+  kbd {
+    grid-area: kbd;
+    font-family: monospace;
+    text-align: end;
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+  }
+}
+
+.react-aria-Popover[data-trigger=SubmenuTrigger][data-placement="right"] {
+  margin-left: -5px;
+}
+
+.react-aria-Popover[data-trigger=SubmenuTrigger][data-placement="left"] {
+  margin-right: -5px;
+}
+
+.react-aria-Popover[data-trigger=SubmenuTrigger] .react-aria-SearchField {
+  margin: 4px 8px;
+}
diff --git a/starters/docs/src/Menu.tsx b/starters/docs/src/Menu.tsx
new file mode 100644
index 00000000000..24d8a9bbde7
--- /dev/null
+++ b/starters/docs/src/Menu.tsx
@@ -0,0 +1,55 @@
+'use client';
+import {
+  Button,
+  Menu,
+  MenuItem as AriaMenuItem,
+  MenuItemProps,
+  MenuProps,
+  MenuTrigger,
+  MenuTriggerProps,
+  Popover
+} from 'react-aria-components';
+import {ChevronRight} from 'lucide-react';
+
+import './Menu.css';
+
+export interface MenuButtonProps<T extends object>
+  extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {
+  label?: string;
+}
+
+export function MenuButton<T extends object>(
+  { label, children, ...props }: MenuButtonProps<T>
+) {
+  return (
+    <MenuTrigger {...props}>
+      <Button>{label}</Button>
+      <Popover>
+        <Menu {...props}>
+          {children}
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  );
+}
+
+export function MenuItem(
+  props: Omit<MenuItemProps, 'children'> & { children?: React.ReactNode }
+) {
+  let textValue = props.textValue ||
+    (typeof props.children === 'string' ? props.children : undefined);
+  return (
+    (
+      <AriaMenuItem {...props} textValue={textValue}>
+        {({ hasSubmenu }) => (
+          <>
+            {props.children}
+            {hasSubmenu && (
+              <ChevronRight />
+            )}
+          </>
+        )}
+      </AriaMenuItem>
+    )
+  );
+}
diff --git a/starters/docs/src/Meter.css b/starters/docs/src/Meter.css
new file mode 100644
index 00000000000..6fe0833fe62
--- /dev/null
+++ b/starters/docs/src/Meter.css
@@ -0,0 +1,37 @@
+@import "./theme.css";
+
+.react-aria-Meter {
+  --fill-color: forestgreen;
+
+  display: grid;
+  grid-template-areas: "label value"
+                       "bar bar";
+  grid-template-columns: 1fr auto;
+  gap: 4px;
+  width: 250px;
+  color: var(--text-color);
+
+  .value {
+    grid-area: value;
+  }
+
+  .bar {
+    grid-area: bar;
+    box-shadow: inset 0px 0px 0px 1px var(--border-color);
+    forced-color-adjust: none;
+    height: 10px;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  .fill {
+    background: var(--fill-color);
+    height: 100%;
+  }
+}
+
+@media (forced-colors: active) {
+  .react-aria-Meter {
+    --fill-color: Highlight;
+  }
+}
diff --git a/starters/docs/src/Meter.tsx b/starters/docs/src/Meter.tsx
new file mode 100644
index 00000000000..8e6485f0a0e
--- /dev/null
+++ b/starters/docs/src/Meter.tsx
@@ -0,0 +1,30 @@
+'use client';
+import {
+  Label,
+  Meter as AriaMeter,
+  MeterProps as AriaMeterProps
+} from 'react-aria-components';
+
+import './Meter.css';
+
+export interface MeterProps extends AriaMeterProps {
+  label?: string;
+}
+
+export function Meter({ label, ...props }: MeterProps) {
+  return (
+    (
+      <AriaMeter {...props}>
+        {({ percentage, valueText }) => (
+          <>
+            <Label>{label}</Label>
+            <span className="value">{valueText}</span>
+            <div className="bar">
+              <div className="fill" style={{ width: percentage + '%' }} />
+            </div>
+          </>
+        )}
+      </AriaMeter>
+    )
+  );
+}
diff --git a/starters/docs/src/Modal.css b/starters/docs/src/Modal.css
new file mode 100644
index 00000000000..f8fec116425
--- /dev/null
+++ b/starters/docs/src/Modal.css
@@ -0,0 +1,84 @@
+@import './Button.css';
+@import './TextField.css';
+@import "./theme.css";
+
+.react-aria-ModalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: var(--visual-viewport-height);
+  background: rgba(0 0 0 / .5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+
+  &[data-entering] {
+    animation: modal-fade 200ms;
+  }
+
+  &[data-exiting] {
+    animation: modal-fade 150ms reverse ease-in;
+  }
+}
+
+.react-aria-Modal {
+  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
+  border-radius: 6px;
+  background: var(--overlay-background);
+  color: var(--text-color);
+  border: 1px solid var(--gray-400);
+  outline: none;
+  max-width: 300px;
+
+  &[data-entering] {
+    animation: modal-zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  .react-aria-TextField {
+    margin-bottom: 8px;
+  }
+}
+
+@keyframes modal-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-zoom {
+  from {
+    transform: scale(0.8);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes mymodal-blur {
+  from {
+    background: rgba(45 0 0 / 0);
+    backdrop-filter: blur(0);
+  }
+
+  to {
+    background: rgba(45 0 0 / .3);
+    backdrop-filter: blur(10px);
+  }
+}
+
+@keyframes mymodal-slide {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
diff --git a/starters/docs/src/Modal.tsx b/starters/docs/src/Modal.tsx
new file mode 100644
index 00000000000..98d08e60c82
--- /dev/null
+++ b/starters/docs/src/Modal.tsx
@@ -0,0 +1,7 @@
+'use client';
+import {Modal as RACModal, ModalOverlayProps} from 'react-aria-components';
+import './Modal.css';
+
+export function Modal(props: ModalOverlayProps) {
+  return <RACModal {...props} />;
+}
diff --git a/starters/docs/src/NumberField.css b/starters/docs/src/NumberField.css
new file mode 100644
index 00000000000..8ef9a35ad28
--- /dev/null
+++ b/starters/docs/src/NumberField.css
@@ -0,0 +1,92 @@
+@import './Button.css';
+@import './Form.css';
+@import "./theme.css";
+
+.react-aria-NumberField {
+  margin-bottom: 8px;
+  color: var(--text-color);
+
+  .react-aria-Group {
+    display: flex;
+    width: fit-content;
+    border-radius: 4px;
+
+    &[data-focus-within] {
+      outline: 1px solid var(--focus-ring-color);
+      .react-aria-Input,
+      .react-aria-Button {
+        border-color: var(--focus-ring-color);
+      }
+    }
+  }
+
+  .react-aria-Button {
+    font-size: 1.2249999999999999rem;
+    width: 2.0124999999999997rem;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &[slot=decrement] {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &[slot=increment] {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+  }
+
+  .react-aria-Input {
+    background: var(--field-background);
+    border: 1px solid var(--border-color);
+    border-radius: 0;
+    color: var(--field-text-color);
+    margin: 0 -1px;
+    z-index: 1;
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.499625rem;
+    outline: none;
+    width: 5.25rem;
+    flex: 1;
+  }
+
+  &[data-invalid] {
+    .react-aria-Input,
+    .react-aria-Button {
+      border-color: var(--invalid-color);
+    }
+
+    &:focus-within {
+      .react-aria-Input,
+      .react-aria-Button {
+        border-color: var(--focus-ring-color);
+      }
+    }
+  }
+
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+
+  [slot=description] {
+    font-size: 12px;
+  }
+
+  .react-aria-Button {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+
+  .react-aria-Input {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+}
diff --git a/starters/docs/src/NumberField.tsx b/starters/docs/src/NumberField.tsx
new file mode 100644
index 00000000000..e997a1acbc2
--- /dev/null
+++ b/starters/docs/src/NumberField.tsx
@@ -0,0 +1,40 @@
+'use client';
+import {
+  Button,
+  FieldError,
+  Group,
+  Input,
+  Label,
+  NumberField as AriaNumberField,
+  NumberFieldProps as AriaNumberFieldProps,
+  Text,
+  ValidationResult
+} from 'react-aria-components';
+import {Plus, Minus} from 'lucide-react';
+
+import './NumberField.css';
+
+export interface NumberFieldProps extends AriaNumberFieldProps {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
+
+export function NumberField(
+  { label, description, errorMessage, ...props }: NumberFieldProps
+) {
+  return (
+    (
+      <AriaNumberField {...props}>
+        <Label>{label}</Label>
+        <Group>
+          <Button slot="decrement"><Minus /></Button>
+          <Input />
+          <Button slot="increment"><Plus /></Button>
+        </Group>
+        {description && <Text slot="description">{description}</Text>}
+        <FieldError>{errorMessage}</FieldError>
+      </AriaNumberField>
+    )
+  );
+}
diff --git a/starters/docs/src/Popover.css b/starters/docs/src/Popover.css
new file mode 100644
index 00000000000..0851134fd41
--- /dev/null
+++ b/starters/docs/src/Popover.css
@@ -0,0 +1,74 @@
+@import './Button.css';
+@import './Dialog.css';
+@import './Switch.css';
+@import "./theme.css";
+
+.react-aria-Popover {
+  --background-color: var(--overlay-background);
+
+  border: 1px solid var(--border-color);
+  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
+  border-radius: 6px;
+  background: var(--background-color);
+  color: var(--text-color);
+  outline: none;
+  max-width: 250px;
+  transition: transform 200ms, opacity 200ms;
+
+  .react-aria-OverlayArrow svg {
+    display: block;
+    fill: var(--background-color);
+    stroke: var(--border-color);
+    stroke-width: 1px;
+  }
+
+  &[data-entering],
+  &[data-exiting] {
+    transform: var(--origin);
+    opacity: 0;
+  }
+
+  &[data-placement=top] {
+    --origin: translateY(8px);
+
+    &:has(.react-aria-OverlayArrow) {
+      margin-bottom: 6px;
+    }
+  }
+
+  &[data-placement=bottom] {
+    --origin: translateY(-8px);
+
+    &:has(.react-aria-OverlayArrow) {
+      margin-top: 6px;
+    }
+
+    .react-aria-OverlayArrow svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  &[data-placement=right] {
+    --origin: translateX(-8px);
+
+    &:has(.react-aria-OverlayArrow) {
+      margin-left: 6px;
+    }
+
+    .react-aria-OverlayArrow svg {
+      transform: rotate(90deg);
+    }
+  }
+
+  &[data-placement=left] {
+    --origin: translateX(8px);
+
+    &:has(.react-aria-OverlayArrow) {
+      margin-right: 6px;
+    }
+
+    .react-aria-OverlayArrow svg {
+      transform: rotate(-90deg);
+    }
+  }
+}
diff --git a/starters/docs/src/Popover.tsx b/starters/docs/src/Popover.tsx
new file mode 100644
index 00000000000..25e1517b0d7
--- /dev/null
+++ b/starters/docs/src/Popover.tsx
@@ -0,0 +1,30 @@
+'use client';
+import {
+  OverlayArrow,
+  Popover as AriaPopover,
+  PopoverProps as AriaPopoverProps
+} from 'react-aria-components';
+
+import './Popover.css';
+
+export interface PopoverProps extends Omit<AriaPopoverProps, 'children'> {
+  children: React.ReactNode;
+  hideArrow?: boolean;
+}
+
+export function Popover({ children, hideArrow, ...props }: PopoverProps) {
+  return (
+    (
+      <AriaPopover {...props} className="react-aria-Popover react-aria-Dialog">
+        {!hideArrow && (
+          <OverlayArrow>
+            <svg width={12} height={12} viewBox="0 0 12 12">
+              <path d="M0 0 L6 6 L12 0" />
+            </svg>
+          </OverlayArrow>
+        )}
+        {children}
+      </AriaPopover>
+    )
+  );
+}
diff --git a/starters/docs/src/ProgressBar.css b/starters/docs/src/ProgressBar.css
new file mode 100644
index 00000000000..de35556b806
--- /dev/null
+++ b/starters/docs/src/ProgressBar.css
@@ -0,0 +1,49 @@
+@import "./theme.css";
+
+.react-aria-ProgressBar {
+  display: grid;
+  grid-template-areas: "label value"
+                       "bar bar";
+  grid-template-columns: 1fr auto;
+  gap: 4px;
+  width: 250px;
+  color: var(--text-color);
+
+  .value {
+    grid-area: value;
+  }
+
+  .bar {
+    grid-area: bar;
+    box-shadow: inset 0px 0px 0px 1px var(--border-color);
+    forced-color-adjust: none;
+    height: 10px;
+    border-radius: 5px;
+    overflow: hidden;
+    will-change: transform;
+  }
+
+  .fill {
+    background: var(--highlight-background);
+    height: 100%;
+  }
+
+  &:not([aria-valuenow]) {
+    .fill {
+      width: 120px;
+      border-radius: inherit;
+      animation: indeterminate 1.5s infinite ease-in-out;
+      will-change: transform;
+    }
+  }
+}
+
+@keyframes indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(250px);
+  }
+}
diff --git a/starters/docs/src/ProgressBar.tsx b/starters/docs/src/ProgressBar.tsx
new file mode 100644
index 00000000000..0604969fbe9
--- /dev/null
+++ b/starters/docs/src/ProgressBar.tsx
@@ -0,0 +1,30 @@
+'use client';
+import {
+  Label,
+  ProgressBar as AriaProgressBar,
+  ProgressBarProps as AriaProgressBarProps
+} from 'react-aria-components';
+
+import './ProgressBar.css';
+
+export interface ProgressBarProps extends AriaProgressBarProps {
+  label?: string;
+}
+
+export function ProgressBar({ label, ...props }: ProgressBarProps) {
+  return (
+    (
+      <AriaProgressBar {...props}>
+        {({ percentage, valueText }) => (
+          <>
+            <Label>{label}</Label>
+            <span className="value">{valueText}</span>
+            <div className="bar">
+              <div className="fill" style={{ width: percentage + '%' }} />
+            </div>
+          </>
+        )}
+      </AriaProgressBar>
+    )
+  );
+}
diff --git a/starters/docs/src/RadioGroup.css b/starters/docs/src/RadioGroup.css
new file mode 100644
index 00000000000..1d32232f0f5
--- /dev/null
+++ b/starters/docs/src/RadioGroup.css
@@ -0,0 +1,89 @@
+@import './Button.css';
+@import './Form.css';
+@import "./theme.css";
+
+.react-aria-RadioGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--text-color);
+}
+
+.react-aria-Radio {
+  display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
+  align-items: center;
+  gap: 0.499625rem;
+  font-size: 1.000125rem;
+  color: var(--text-color);
+  forced-color-adjust: none;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 1.12525rem;
+    height: 1.12525rem;
+    box-sizing: border-box;
+    border: 0.125125rem solid var(--border-color);
+    background: var(--field-background);
+    border-radius: 1.12525rem;
+    transition: all 200ms;
+  }
+
+  &[data-pressed]:before {
+    border-color: var(--border-color-pressed);
+  }
+
+  &[data-selected] {
+    &:before {
+      border-color: var(--highlight-background);
+      border-width: 0.375375rem;
+    }
+
+    &[data-pressed]:before {
+      border-color: var(--highlight-background-pressed);
+    }
+  }
+
+  &[data-focus-visible]:before {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-invalid] {
+    &:before {
+      border-color: var(--invalid-color);
+    }
+
+    &[data-pressed]:before {
+      border-color: var(--invalid-color-pressed);
+    }
+  }
+}
+
+.react-aria-RadioGroup {
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+
+  [slot=description] {
+    font-size: 12px;
+  }
+
+  &[data-orientation=horizontal] {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.react-aria-Radio {
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+
+    &:before {
+      border-color: var(--border-color-disabled);
+    }
+  }
+}
diff --git a/starters/docs/src/RadioGroup.tsx b/starters/docs/src/RadioGroup.tsx
new file mode 100644
index 00000000000..49180e63082
--- /dev/null
+++ b/starters/docs/src/RadioGroup.tsx
@@ -0,0 +1,39 @@
+'use client';
+import {
+  FieldError,
+  Label,
+  RadioGroup as AriaRadioGroup,
+  RadioGroupProps as AriaRadioGroupProps,
+  Text,
+  ValidationResult
+} from 'react-aria-components';
+
+import './RadioGroup.css';
+
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children'> {
+  children?: React.ReactNode;
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
+
+export function RadioGroup(
+  {
+    label,
+    description,
+    errorMessage,
+    children,
+    ...props
+  }: RadioGroupProps
+) {
+  return (
+    (
+      <AriaRadioGroup {...props}>
+        <Label>{label}</Label>
+        {children}
+        {description && <Text slot="description">{description}</Text>}
+        <FieldError>{errorMessage}</FieldError>
+      </AriaRadioGroup>
+    )
+  );
+}
diff --git a/starters/docs/src/RangeCalendar.css b/starters/docs/src/RangeCalendar.css
new file mode 100644
index 00000000000..dcb289c7576
--- /dev/null
+++ b/starters/docs/src/RangeCalendar.css
@@ -0,0 +1,103 @@
+@import './Button.css';
+@import "./theme.css";
+
+.react-aria-RangeCalendar {
+  width: fit-content;
+  max-width: 100%;
+  color: var(--text-color);
+
+  & header {
+    display: flex;
+    align-items: center;
+    margin: 0 4px 0.4375rem 4px;
+
+    .react-aria-Heading {
+      flex: 1;
+      margin: 0;
+      text-align: center;
+      font-size: 1.203125rem;
+    }
+  }
+
+  .react-aria-Button {
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+  }
+
+  & table {
+    border-collapse: collapse;
+
+    & td {
+      padding: 2px 0;
+    }
+  }
+
+  .react-aria-CalendarCell {
+    width: 2.00025rem;
+    line-height: 2.00025rem;
+    text-align: center;
+    border-radius: 6px;
+    cursor: default;
+    outline: none;
+    forced-color-adjust: none;
+
+    &[data-outside-month] {
+      display: none;
+    }
+
+    &[data-pressed] {
+      background: var(--gray-100);
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--highlight-background);
+      outline-offset: -2px;
+    }
+
+    &[data-selected] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+      border-radius: 0;
+
+      &[data-focus-visible] {
+        outline-color: var(--highlight-foreground);
+        outline-offset: -3px;
+      }
+    }
+
+    &[data-selection-start] {
+      border-start-start-radius: 6px;
+      border-end-start-radius: 6px;
+    }
+
+    &[data-selection-end] {
+      border-start-end-radius: 6px;
+      border-end-end-radius: 6px;
+    }
+  }
+
+  .react-aria-CalendarCell {
+    &[data-disabled] {
+      color: var(--text-color-disabled);
+    }
+  }
+
+  .react-aria-CalendarCell {
+
+    &[data-unavailable] {
+      text-decoration: line-through;
+      color: var(--invalid-color);
+    }
+
+    &[data-invalid] {
+      background: var(--invalid-color);
+      color: var(--highlight-foreground);
+    }
+  }
+
+  [slot=errorMessage] {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+}
diff --git a/starters/docs/src/RangeCalendar.tsx b/starters/docs/src/RangeCalendar.tsx
new file mode 100644
index 00000000000..8a2debf9715
--- /dev/null
+++ b/starters/docs/src/RangeCalendar.tsx
@@ -0,0 +1,38 @@
+'use client';
+import {
+  CalendarCell,
+  CalendarGrid,
+  DateValue,
+  Heading,
+  RangeCalendar as AriaRangeCalendar,
+  RangeCalendarProps as AriaRangeCalendarProps,
+  Text
+} from 'react-aria-components';
+import {Button} from './Button';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
+import './RangeCalendar.css';
+
+export interface RangeCalendarProps<T extends DateValue>
+  extends AriaRangeCalendarProps<T> {
+  errorMessage?: string;
+}
+
+export function RangeCalendar<T extends DateValue>(
+  { errorMessage, ...props }: RangeCalendarProps<T>
+) {
+  return (
+    (
+      <AriaRangeCalendar {...props}>
+        <header>
+          <Button slot="previous"><ChevronLeft size={16} /></Button>
+          <Heading />
+          <Button slot="next"><ChevronRight size={16} /></Button>
+        </header>
+        <CalendarGrid>
+          {(date) => <CalendarCell date={date} />}
+        </CalendarGrid>
+        {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
+      </AriaRangeCalendar>
+    )
+  );
+}
diff --git a/starters/docs/src/SearchField.css b/starters/docs/src/SearchField.css
new file mode 100644
index 00000000000..5c0eb244280
--- /dev/null
+++ b/starters/docs/src/SearchField.css
@@ -0,0 +1,90 @@
+@import './Button.css';
+@import './Form.css';
+@import "./theme.css";
+
+.react-aria-SearchField {
+  display: grid;
+  grid-template-areas: "label label"
+                       "input button"
+                       "help  help";
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  width: fit-content;
+  color: var(--text-color);
+
+  .react-aria-Input {
+    grid-area: input;
+    width: 100%;
+    padding: 0.25025rem 1.49975rem 0.25025rem 0.25025rem;
+    margin: 0;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--field-background);
+    font-size: 1.000125rem;
+    color: var(--field-text-color);
+    outline: none;
+
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration {
+      -webkit-appearance: none;
+    }
+
+    &::placeholder {
+      color: var(--text-color-placeholder);
+      opacity: 1;
+    }
+
+    &[data-focused] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  .react-aria-Button {
+    grid-area: button;
+    width: 1.000125rem;
+    height: 1.000125rem;
+    border-radius: 1.000125rem;
+    margin-left: -1.250375rem;
+    font-size: 0.749875rem;
+    line-height: 0.749875rem;
+    vertical-align: middle;
+    text-align: center;
+    background: var(--gray-500);
+    color: var(--gray-50);
+    border: none;
+    padding: 0;
+
+    &[data-pressed] {
+      background: var(--gray-600);
+    }
+  }
+
+  &[data-empty] button {
+    display: none;
+  }
+
+  .react-aria-Input{
+    &[data-invalid] {
+      border-color: var(--invalid-color);
+    }
+  }
+
+  .react-aria-FieldError {
+    grid-area: help;
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+
+  [slot=description] {
+    grid-area: help;
+    font-size: 12px;
+  }
+
+  .react-aria-Input {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+}
diff --git a/starters/docs/src/SearchField.tsx b/starters/docs/src/SearchField.tsx
new file mode 100644
index 00000000000..4497af15edc
--- /dev/null
+++ b/starters/docs/src/SearchField.tsx
@@ -0,0 +1,36 @@
+'use client';
+import {
+  Button,
+  FieldError,
+  Input,
+  Label,
+  SearchField as AriaSearchField,
+  SearchFieldProps as AriaSearchFieldProps,
+  Text,
+  ValidationResult
+} from 'react-aria-components';
+import {X} from 'lucide-react';
+import './SearchField.css';
+
+export interface SearchFieldProps extends AriaSearchFieldProps {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  placeholder?: string;
+}
+
+export function SearchField(
+  { label, description, errorMessage, placeholder, ...props }: SearchFieldProps
+) {
+  return (
+    (
+      <AriaSearchField {...props}>
+        {label && <Label>{label}</Label>}
+        <Input placeholder={placeholder} />
+        <Button><X size={14} /></Button>
+        {description && <Text slot="description">{description}</Text>}
+        <FieldError>{errorMessage}</FieldError>
+      </AriaSearchField>
+    )
+  );
+}
diff --git a/starters/docs/src/Select.css b/starters/docs/src/Select.css
new file mode 100644
index 00000000000..12c5db76ce4
--- /dev/null
+++ b/starters/docs/src/Select.css
@@ -0,0 +1,149 @@
+@import './ListBox.css';
+@import './Popover.css';
+@import './Button.css';
+@import './Form.css';
+@import "./theme.css";
+
+.react-aria-Select {
+  color: var(--text-color);
+  position: relative;
+  max-width: 250px;
+  width: fit-content;
+
+  .react-aria-Button {
+    box-shadow: 0 1px 2px rgba(0 0 0 / 0.1);
+    border-radius: 6px;
+    font-size: 0.9380000000000001rem;
+    padding: 0.25025rem 0.25025rem 0.25025rem 0.499625rem;
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  .react-aria-SelectValue {
+    flex: 1 0 auto;
+    text-align: start;
+
+    &[data-placeholder] {
+      font-style: italic;
+      color: var(--text-color-placeholder);
+    }
+  }
+
+  span[aria-hidden] {
+    width: 1.429rem;
+    height: 1.429rem;
+    line-height: 1.375rem;
+    margin-left: 1rem;
+    padding: 1px;
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+    forced-color-adjust: none;
+    border-radius: 4px;
+    font-size: 0.857rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.react-aria-Popover[data-trigger=Select] {
+  min-width: var(--trigger-width);
+
+  .react-aria-ListBox {
+    display: block;
+    width: unset;
+    max-height: inherit;
+    min-height: unset;
+    border: none;
+
+    .react-aria-Header {
+      padding-left: 1.374625rem;
+    }
+  }
+
+  .react-aria-ListBoxItem {
+    padding: 0 0.499625rem 0 1.374625rem;
+
+    &[data-focus-visible] {
+      outline: none;
+    }
+
+    &[data-selected] {
+      font-weight: 600;
+      background: unset;
+      color: var(--text-color);
+
+      &::before {
+        content: '✓';
+        content: '✓' / '';
+        alt: ' ';
+        position: absolute;
+        top: 4px;
+        left: 4px;
+      }
+    }
+
+    &[data-focused],
+    &[data-pressed] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+    }
+  }
+}
+
+.react-aria-ListBoxItem[href] {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.react-aria-Select {
+  .react-aria-SelectValue {
+    [slot=description] {
+      display: none;
+    }
+  }
+
+  .react-aria-Button {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+      span[aria-hidden] {
+        background: var(--border-color-disabled);
+        color: var(--text-color-disabled);
+      }
+
+      .react-aria-SelectValue {
+        &[data-placeholder] {
+          color: var(--text-color-disabled);
+        }
+      }
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  .react-aria-Select {
+    .react-aria-Button {
+      &[data-disabled] span[aria-hidden] {
+        background: 0 0;
+      }
+    }
+  }
+}
+
+.react-aria-Select {
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+
+  [slot=description] {
+    font-size: 12px;
+  }
+}
diff --git a/starters/docs/src/Select.tsx b/starters/docs/src/Select.tsx
new file mode 100644
index 00000000000..9b3175c0dab
--- /dev/null
+++ b/starters/docs/src/Select.tsx
@@ -0,0 +1,54 @@
+'use client';
+import {
+  Button,
+  FieldError,
+  Label,
+  ListBoxItemProps,
+  Popover,
+  Select as AriaSelect,
+  SelectProps as AriaSelectProps,
+  SelectValue,
+  Text,
+  ValidationResult
+} from 'react-aria-components';
+import {ListBox, ListBoxItem} from './ListBox';
+import {ChevronDown} from 'lucide-react';
+import './Select.css';
+
+export interface SelectProps<T extends object>
+  extends Omit<AriaSelectProps<T>, 'children'> {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  items?: Iterable<T>;
+  children: React.ReactNode | ((item: T) => React.ReactNode);
+}
+
+export function Select<T extends object>(
+  { label, description, errorMessage, children, items, ...props }: SelectProps<
+    T
+  >
+) {
+  return (
+    (
+      <AriaSelect {...props}>
+        <Label>{label}</Label>
+        <Button>
+          <SelectValue />
+          <span aria-hidden="true"><ChevronDown size={16} /></span>
+        </Button>
+        {description && <Text slot="description">{description}</Text>}
+        <FieldError>{errorMessage}</FieldError>
+        <Popover>
+          <ListBox items={items}>
+            {children}
+          </ListBox>
+        </Popover>
+      </AriaSelect>
+    )
+  );
+}
+
+export function SelectItem(props: ListBoxItemProps) {
+  return <ListBoxItem {...props} />;
+}
diff --git a/starters/docs/src/Slider.css b/starters/docs/src/Slider.css
new file mode 100644
index 00000000000..cd8716f5696
--- /dev/null
+++ b/starters/docs/src/Slider.css
@@ -0,0 +1,106 @@
+@import './NumberField.css';
+@import "./theme.css";
+
+.react-aria-Slider {
+  display: grid;
+  grid-template-areas: "label output"
+                       "track track";
+  grid-template-columns: 1fr auto;
+  max-width: 300px;
+  color: var(--text-color);
+
+  .react-aria-Label {
+    grid-area: label;
+  }
+
+  .react-aria-SliderOutput {
+    grid-area: output;
+  }
+
+  .react-aria-SliderTrack {
+    grid-area: track;
+    position: relative;
+
+    /* track line */
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      background: var(--border-color);
+    }
+  }
+
+  .react-aria-SliderThumb {
+    width: 1.250375rem;
+    height: 1.250375rem;
+    border-radius: 50%;
+    background: var(--highlight-background);
+    border: 2px solid var(--background-color);
+    forced-color-adjust: none;
+
+    &[data-dragging] {
+      background: var(--highlight-background-pressed);
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+    }
+  }
+
+  &[data-orientation=horizontal] {
+    flex-direction: column;
+    width: 300px;
+
+    .react-aria-SliderTrack {
+      height: 30px;
+      width: 100%;
+
+      &:before {
+        height: 3px;
+        width: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    .react-aria-SliderThumb {
+      top: 50%;
+    }
+  }
+
+  &[data-orientation=vertical] {
+    height: 150px;
+    display: block;
+
+    .react-aria-Label,
+    .react-aria-SliderOutput {
+      display: none;
+    }
+
+    .react-aria-SliderTrack {
+      width: 30px;
+      height: 100%;
+
+      &:before {
+        width: 3px;
+        height: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    .react-aria-SliderThumb {
+      left: 50%;
+    }
+  }
+
+  &[data-disabled] {
+    .react-aria-SliderTrack:before {
+      background: var(--border-color-disabled);
+    }
+
+    .react-aria-SliderThumb {
+      background: var(--border-color-disabled);
+    }
+  }
+}
diff --git a/starters/docs/src/Slider.tsx b/starters/docs/src/Slider.tsx
new file mode 100644
index 00000000000..c2e813564cb
--- /dev/null
+++ b/starters/docs/src/Slider.tsx
@@ -0,0 +1,38 @@
+'use client';
+import {
+  Label,
+  Slider as AriaSlider,
+  SliderOutput,
+  SliderProps as AriaSliderProps,
+  SliderThumb,
+  SliderTrack
+} from 'react-aria-components';
+
+import './Slider.css';
+
+export interface SliderProps<T> extends AriaSliderProps<T> {
+  label?: string;
+  thumbLabels?: string[];
+}
+
+export function Slider<T extends number | number[]>(
+  { label, thumbLabels, ...props }: SliderProps<T>
+) {
+  return (
+    (
+      <AriaSlider {...props}>
+        {label && <Label>{label}</Label>}
+        <SliderOutput>
+          {({ state }) =>
+            state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}
+        </SliderOutput>
+        <SliderTrack>
+          {({ state }) =>
+            state.values.map((_, i) => (
+              <SliderThumb key={i} index={i} aria-label={thumbLabels?.[i]} />
+            ))}
+        </SliderTrack>
+      </AriaSlider>
+    )
+  );
+}
diff --git a/starters/docs/src/Switch.css b/starters/docs/src/Switch.css
new file mode 100644
index 00000000000..88dc3691a8a
--- /dev/null
+++ b/starters/docs/src/Switch.css
@@ -0,0 +1,76 @@
+@import "./theme.css";
+
+.react-aria-Switch {
+  display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
+  align-items: center;
+  gap: 0.499625rem;
+  font-size: 1.000125rem;
+  color: var(--text-color);
+  forced-color-adjust: none;
+
+  .indicator {
+    width: 1.75rem;
+    height: 1.000125rem;
+    border: 2px solid var(--border-color);
+    background: var(--background-color);
+    border-radius: 1.000125rem;
+    transition: all 200ms;
+
+    &:before {
+      content: '';
+      display: block;
+      margin: 0.125125rem;
+      width: 0.749875rem;
+      height: 0.749875rem;
+      background: var(--highlight-background);
+      border-radius: 16px;
+      transition: all 200ms;
+    }
+  }
+
+  &[data-pressed] .indicator {
+    border-color: var(--border-color-pressed);
+
+    &:before {
+      background: var(--highlight-background-pressed);
+    }
+  }
+
+  &[data-selected] {
+    .indicator {
+      border-color: var(--highlight-background);
+      background: var(--highlight-background);
+
+      &:before {
+        background: var(--field-background);
+        transform: translateX(100%);
+      }
+    }
+
+    &[data-pressed] {
+      .indicator {
+        border-color: var(--highlight-background-pressed);
+        background: var(--highlight-background-pressed);
+      }
+    }
+  }
+
+  &[data-focus-visible] .indicator {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+
+    .indicator {
+      border-color: var(--border-color-disabled);
+
+      &:before {
+        background: var(--border-color-disabled);
+      }
+    }
+  }
+}
diff --git a/starters/docs/src/Switch.tsx b/starters/docs/src/Switch.tsx
new file mode 100644
index 00000000000..704b449a7b7
--- /dev/null
+++ b/starters/docs/src/Switch.tsx
@@ -0,0 +1,22 @@
+'use client';
+import {
+  Switch as AriaSwitch,
+  SwitchProps as AriaSwitchProps
+} from 'react-aria-components';
+
+import './Switch.css';
+
+export interface SwitchProps extends Omit<AriaSwitchProps, 'children'> {
+  children: React.ReactNode;
+}
+
+export function Switch({ children, ...props }: SwitchProps) {
+  return (
+    (
+      <AriaSwitch {...props}>
+        <div className="indicator" />
+        {children}
+      </AriaSwitch>
+    )
+  );
+}
diff --git a/starters/docs/src/Table.css b/starters/docs/src/Table.css
new file mode 100644
index 00000000000..24e496c3baf
--- /dev/null
+++ b/starters/docs/src/Table.css
@@ -0,0 +1,277 @@
+@import './Button.css';
+@import './ToggleButton.css';
+@import './CheckboxGroup.css';
+@import './Checkbox.css';
+@import './Popover.css';
+@import './Menu.css';
+@import "./theme.css";
+
+.react-aria-Table {
+  padding: 0.25025rem;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--overlay-background);
+  outline: none;
+  border-spacing: 0;
+  min-height: 100px;
+  align-self: start;
+  max-width: 100%;
+  word-break: break-word;
+  forced-color-adjust: none;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+
+  .react-aria-TableHeader {
+    color: var(--text-color);
+
+    &:after {
+      content: '';
+      display: table-row;
+      height: 2px;
+    }
+
+    & tr:last-child .react-aria-Column {
+      border-bottom: 1px solid var(--border-color);
+      cursor: default;
+    }
+  }
+
+  .react-aria-Row {
+    --radius-top: 6px;
+    --radius-bottom: 6px;
+    --radius: var(--radius-top) var(--radius-top) var(--radius-bottom) var(--radius-bottom);
+    border-radius: var(--radius);
+    clip-path: inset(0 round var(--radius)); /* firefox */
+    outline: none;
+    cursor: default;
+    color: var(--text-color);
+    font-size: 0.9380000000000001rem;
+    position: relative;
+    transform: scale(1);
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -2px;
+    }
+
+    &[data-pressed] {
+      background: var(--gray-100);
+    }
+
+    &[data-selected] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+      --focus-ring-color: var(--highlight-foreground);
+
+      &[data-focus-visible],
+      .react-aria-Cell[data-focus-visible] {
+        outline-offset: -4px;
+      }
+    }
+
+    &[data-disabled] {
+      color: var(--text-color-disabled);
+    }
+  }
+
+  .react-aria-Cell,
+  .react-aria-Column {
+    padding: 4px 8px;
+    text-align: left;
+    outline: none;
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -2px;
+    }
+  }
+
+  .react-aria-Cell {
+    transform: translateZ(0);
+
+    &:first-child {
+      border-radius: var(--radius-top) 0 0 var(--radius-bottom);
+    }
+
+    &:last-child {
+      border-radius: 0 var(--radius-top) var(--radius-bottom) 0;
+    }
+  }
+
+  /* join selected items if :has selector is supported */
+  @supports selector(:has(.foo)) {
+    .react-aria-Row[data-selected]:has(+ [data-selected]),
+    .react-aria-Row[data-selected]:has(+ .react-aria-DropIndicator + [data-selected]) {
+      --radius-bottom: 0px;
+    }
+
+    .react-aria-Row[data-selected] + [data-selected],
+    .react-aria-Row[data-selected] + .react-aria-DropIndicator + [data-selected]{
+      --radius-top: 0px;
+    }
+  }
+}
+
+:where(.react-aria-Row) .react-aria-Checkbox {
+  --selected-color: var(--highlight-foreground);
+  --selected-color-pressed: var(--highlight-foreground-pressed);
+  --checkmark-color: var(--highlight-background);
+  --background-color: var(--highlight-background);
+}
+
+.react-aria-Row[data-href] {
+  cursor: pointer;
+}
+
+.react-aria-Column {
+  .column-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .sort-indicator {
+    padding: 0 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:not([data-sort-direction]) .sort-indicator {
+    visibility: hidden;
+  }
+}
+
+.react-aria-TableBody {
+  &[data-empty] {
+    text-align: center;
+    font-style: italic;
+  }
+}
+
+.react-aria-ResizableTableContainer {
+  max-width: 400px;
+  overflow: auto;
+  position: relative;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--background-color);
+
+  .react-aria-Table {
+    border: none;
+  }
+
+  .column-name,
+  .react-aria-Button {
+    --background-color: var(--overlay-background);
+    flex: 1;
+    font: inherit;
+    text-align: start;
+    color: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-color: transparent;
+    transition: background 200ms;
+    &[data-hovered] {
+      background: var(--highlight-hover);
+    }
+
+    &[data-pressed] {
+      background: var(--highlight-pressed);
+      box-shadow: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--focus-ring-color);
+    }
+  }
+
+  .react-aria-ColumnResizer {
+    width: 15px;
+    background-color: grey;
+    height: 25px;
+    flex: 0 0 auto;
+    touch-action: none;
+    box-sizing: border-box;
+    border: 5px;
+    border-style: none solid;
+    border-color: transparent;
+    background-clip: content-box;
+
+    &[data-resizable-direction=both] {
+      cursor: ew-resize;
+    }
+
+    &[data-resizable-direction=left] {
+      cursor: e-resize;
+    }
+
+    &[data-resizable-direction=right] {
+      cursor: w-resize;
+    }
+
+    &[data-focus-visible] {
+      background-color: var(--focus-ring-color);
+    }
+
+    &[data-resizing] {
+      border-color: var(--focus-ring-color);
+      background-color: transparent;
+    }
+  }
+
+  .react-aria-Column,
+  .react-aria-Cell {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.react-aria-Row {
+  &[data-dragging] {
+    opacity: 0.6;
+    transform: translateZ(0);
+  }
+
+  [slot=drag] {
+    all: unset;
+    width: 15px;
+    text-align: center;
+
+    &[data-focus-visible] {
+      border-radius: 4px;
+      outline: 2px solid var(--focus-ring-color);
+    }
+  }
+}
+
+.react-aria-DropIndicator[data-drop-target] {
+  outline: 1px solid var(--highlight-background);
+  transform: translateZ(0);
+}
+
+.react-aria-Table[data-drop-target] {
+  outline: 2px solid var(--highlight-background);
+  outline-offset: -1px;
+  background: var(--highlight-overlay)
+}
+
+.react-aria-Row[data-drop-target] {
+  outline: 2px solid var(--highlight-background);
+  background: var(--highlight-overlay)
+}
+
+.react-aria-DropIndicator[data-drop-target] {
+  outline: 1px solid var(--highlight-background);
+  transform: translateZ(0);
+}
+
+.react-aria-Cell img {
+  height: 30px;
+  width: 30px;
+  object-fit: cover;
+  display: block;
+}
diff --git a/starters/docs/src/Table.tsx b/starters/docs/src/Table.tsx
new file mode 100644
index 00000000000..4fc31f6641a
--- /dev/null
+++ b/starters/docs/src/Table.tsx
@@ -0,0 +1,92 @@
+'use client';
+import {
+  Button,
+  Cell,
+  Collection,
+  Column as AriaColumn,
+  ColumnProps,
+  Row as AriaRow,
+  RowProps,
+  Table as AriaTable,
+  TableHeader as AriaTableHeader,
+  TableHeaderProps,
+  TableProps,
+  useTableOptions
+} from 'react-aria-components';
+import {Checkbox} from './Checkbox';
+import {ChevronUp, ChevronDown, GripVertical} from 'lucide-react';
+import './Table.css';
+
+export function Table(props: TableProps) {
+  return <AriaTable {...props} />;
+}
+
+export function Column(
+  props: Omit<ColumnProps, 'children'> & { children?: React.ReactNode }
+) {
+  return (
+    (
+      <AriaColumn {...props}>
+        {({ allowsSorting, sortDirection }) => (
+          <div className="column-header">
+            {props.children}
+            {allowsSorting && (
+              <span aria-hidden="true" className="sort-indicator">
+                {sortDirection === 'ascending' ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+              </span>
+            )}
+          </div>
+        )}
+      </AriaColumn>
+    )
+  );
+}
+
+export function TableHeader<T extends object>(
+  { columns, children }: TableHeaderProps<T>
+) {
+  let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
+
+  return (
+    (
+      <AriaTableHeader>
+        {/* Add extra columns for drag and drop and selection. */}
+        {allowsDragging && <AriaColumn />}
+        {selectionBehavior === 'toggle' && (
+          <AriaColumn>
+            {selectionMode === 'multiple' && <Checkbox slot="selection" />}
+          </AriaColumn>
+        )}
+        <Collection items={columns}>
+          {children}
+        </Collection>
+      </AriaTableHeader>
+    )
+  );
+}
+
+export function Row<T extends object>(
+  { id, columns, children, ...otherProps }: RowProps<T>
+) {
+  let { selectionBehavior, allowsDragging } = useTableOptions();
+
+  return (
+    (
+      <AriaRow id={id} {...otherProps}>
+        {allowsDragging && (
+          <Cell>
+            <Button slot="drag"><GripVertical size={16} /></Button>
+          </Cell>
+        )}
+        {selectionBehavior === 'toggle' && (
+          <Cell>
+            <Checkbox slot="selection" />
+          </Cell>
+        )}
+        <Collection items={columns}>
+          {children}
+        </Collection>
+      </AriaRow>
+    )
+  );
+}
diff --git a/starters/docs/src/Tabs.css b/starters/docs/src/Tabs.css
new file mode 100644
index 00000000000..c18b5f8f792
--- /dev/null
+++ b/starters/docs/src/Tabs.css
@@ -0,0 +1,102 @@
+@import './Button.css';
+@import './Link.css';
+@import "./theme.css";
+
+.react-aria-Tabs {
+  display: flex;
+  color: var(--text-color);
+
+  &[data-orientation=horizontal] {
+    flex-direction: column;
+  }
+}
+
+.react-aria-TabList {
+  display: flex;
+
+  &[data-orientation=horizontal] {
+    border-bottom: 1px solid var(--border-color);
+
+    .react-aria-Tab {
+      border-bottom: 3px solid var(--border-color);
+    }
+  }
+}
+
+.react-aria-Tab {
+  padding: 10px;
+  cursor: default;
+  outline: none;
+  position: relative;
+  color: var(--text-color-base);
+  transition: color 200ms;
+  --border-color: transparent;
+  forced-color-adjust: none;
+
+  &[data-hovered],
+  &[data-focused] {
+    color: var(--text-color-hover);
+  }
+
+  &[data-selected] {
+    --border-color: var(--highlight-background);
+    color: var(--text-color);
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+    &[data-selected] {
+      --border-color: var(--text-color-disabled);
+    }
+  }
+
+  &[data-focus-visible]:after {
+    content: '';
+    position: absolute;
+    inset: 4px;
+    border-radius: 4px;
+    border: 2px solid var(--focus-ring-color);
+  }
+}
+
+.react-aria-TabPanel {
+  margin-top: 4px;
+  padding: 10px;
+  border-radius: 4px;
+  outline: none;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+  }
+}
+
+.react-aria-Tabs {
+  &[data-orientation=vertical] {
+    flex-direction: row;
+  }
+}
+
+.react-aria-TabList {
+  &[data-orientation=vertical] {
+    flex-direction: column;
+    border-inline-end: 1px solid gray;
+
+    .react-aria-Tab {
+      border-inline-end: 3px solid var(--border-color, transparent);
+    }
+  }
+}
+
+.react-aria-Tab {
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+    &[data-selected] {
+      --border-color: var(--border-color-disabled);
+    }
+  }
+}
+
+.react-aria-Tab[href] {
+  text-decoration: none;
+  cursor: pointer;
+}
diff --git a/starters/docs/src/Tabs.tsx b/starters/docs/src/Tabs.tsx
new file mode 100644
index 00000000000..f5ed380baa0
--- /dev/null
+++ b/starters/docs/src/Tabs.tsx
@@ -0,0 +1,7 @@
+'use client';
+import {Tabs as RACTabs, TabsProps} from 'react-aria-components';
+import './Tabs.css';
+
+export function Tabs(props: TabsProps) {
+  return <RACTabs {...props} />;
+}
diff --git a/starters/docs/src/TagGroup.css b/starters/docs/src/TagGroup.css
new file mode 100644
index 00000000000..f65c51af854
--- /dev/null
+++ b/starters/docs/src/TagGroup.css
@@ -0,0 +1,102 @@
+@import './ToggleButton.css';
+@import "./theme.css";
+
+.react-aria-TagGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: small;
+  color: var(--text-color);
+}
+
+.react-aria-TagList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.react-aria-Tag {
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  forced-color-adjust: none;
+  border-radius: 4px;
+  padding: 2px 8px;
+  font-size: 0.812875rem;
+  outline: none;
+  cursor: default;
+  display: flex;
+  align-items: center;
+  transition: border-color 200ms;
+
+  &[data-hovered] {
+    border-color: var(--border-color-hover);
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-selected] {
+    border-color: var(--highlight-background);
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+  }
+
+  [slot=remove] {
+    background: none;
+    border: 1px solid var(--border-color);
+    padding: 0;
+    margin-left: 4px;
+    color: var(--text-color-base);
+    transition: color 200ms;
+    outline: none;
+    font-size: 0.95em;
+    border-radius: 100%;
+    aspect-ratio: 1/1;
+    height: calc(100% - 4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &[data-hovered] {
+      color: var(--text-color-hover);
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  &[data-selected] {
+    [slot=remove] {
+      color: inherit;
+    }
+  }
+}
+
+.react-aria-Tag[data-href] {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.react-aria-TagList {
+  .react-aria-Tag {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+}
+
+.react-aria-TagGroup {
+  [slot=description] {
+    font-size: 12px;
+  }
+
+  [slot=errorMessage] {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+}
diff --git a/starters/docs/src/TagGroup.tsx b/starters/docs/src/TagGroup.tsx
new file mode 100644
index 00000000000..fb6a7058330
--- /dev/null
+++ b/starters/docs/src/TagGroup.tsx
@@ -0,0 +1,68 @@
+'use client';
+import {
+  Button,
+  Label,
+  Tag as AriaTag,
+  TagGroup as AriaTagGroup,
+  TagGroupProps as AriaTagGroupProps,
+  TagList,
+  TagListProps,
+  TagProps,
+  Text
+} from 'react-aria-components';
+import {X} from 'lucide-react';
+import './TagGroup.css';
+
+export interface TagGroupProps<T>
+  extends
+    Omit<AriaTagGroupProps, 'children'>,
+    Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'> {
+  label?: string;
+  description?: string;
+  errorMessage?: string;
+}
+
+export function TagGroup<T extends object>(
+  {
+    label,
+    description,
+    errorMessage,
+    items,
+    children,
+    renderEmptyState,
+    ...props
+  }: TagGroupProps<T>
+) {
+  return (
+    (
+      <AriaTagGroup {...props}>
+        <Label>{label}</Label>
+        <TagList items={items} renderEmptyState={renderEmptyState}>
+          {children}
+        </TagList>
+        {description && <Text slot="description">{description}</Text>}
+        {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
+      </AriaTagGroup>
+    )
+  );
+}
+
+export function Tag(
+  { children, ...props }: Omit<TagProps, 'children'> & {
+    children?: React.ReactNode;
+  }
+) {
+  let textValue = typeof children === 'string' ? children : undefined;
+  return (
+    (
+      <AriaTag textValue={textValue} {...props}>
+        {({ allowsRemoving }) => (
+          <>
+            {children}
+            {allowsRemoving && <Button slot="remove"><X size={12} /></Button>}
+          </>
+        )}
+      </AriaTag>
+    )
+  );
+}
diff --git a/starters/docs/src/TextField.css b/starters/docs/src/TextField.css
new file mode 100644
index 00000000000..3ca4c45f624
--- /dev/null
+++ b/starters/docs/src/TextField.css
@@ -0,0 +1,50 @@
+@import './Button.css';
+@import './Form.css';
+@import "./theme.css";
+
+.react-aria-TextField {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  color: var(--text-color);
+
+  .react-aria-Input,
+  .react-aria-TextArea {
+    padding: 0.25025rem;
+    margin: 0;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--field-background);
+    font-size: 1.000125rem;
+    color: var(--field-text-color);
+
+    &[data-focused] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  .react-aria-Input,
+  .react-aria-TextArea {
+    &[data-invalid] {
+      border-color: var(--invalid-color);
+    }
+  }
+
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+
+  [slot=description] {
+    font-size: 12px;
+  }
+
+  .react-aria-Input,
+  .react-aria-TextArea {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+}
diff --git a/starters/docs/src/TextField.tsx b/starters/docs/src/TextField.tsx
new file mode 100644
index 00000000000..60a7914b6cc
--- /dev/null
+++ b/starters/docs/src/TextField.tsx
@@ -0,0 +1,33 @@
+'use client';
+import {
+  FieldError,
+  Input,
+  Label,
+  Text,
+  TextField as AriaTextField,
+  TextFieldProps as AriaTextFieldProps,
+  ValidationResult
+} from 'react-aria-components';
+
+import './TextField.css';
+
+export interface TextFieldProps extends AriaTextFieldProps {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
+
+export function TextField(
+  { label, description, errorMessage, ...props }: TextFieldProps
+) {
+  return (
+    (
+      <AriaTextField {...props}>
+        <Label>{label}</Label>
+        <Input />
+        {description && <Text slot="description">{description}</Text>}
+        <FieldError>{errorMessage}</FieldError>
+      </AriaTextField>
+    )
+  );
+}
diff --git a/starters/docs/src/TimeField.css b/starters/docs/src/TimeField.css
new file mode 100644
index 00000000000..6d249142e8a
--- /dev/null
+++ b/starters/docs/src/TimeField.css
@@ -0,0 +1,70 @@
+@import './Form.css';
+@import './Button.css';
+@import "./theme.css";
+
+.react-aria-TimeField {
+  color: var(--text-color);
+  display: flex;
+  flex-direction: column;
+}
+
+.react-aria-DateInput {
+  display: inline;
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--field-background);
+  width: fit-content;
+  min-width: 150px;
+  white-space: nowrap;
+  forced-color-adjust: none;
+
+  &[data-focus-within] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+}
+
+.react-aria-DateSegment {
+  padding: 0 2px;
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+  color: var(--text-color);
+
+  &[data-type=literal] {
+    padding: 0;
+  }
+
+  &[data-placeholder] {
+    color: var(--text-color-placeholder);
+    font-style: italic;
+  }
+
+  &:focus {
+    color: var(--highlight-foreground);
+    background: var(--highlight-background);
+    outline: none;
+    border-radius: 4px;
+    caret-color: transparent;
+  }
+
+  &[data-invalid] {
+    color: var(--invalid-color);
+
+    &:focus {
+      background: var(--highlight-background-invalid);
+      color: var(--highlight-foreground);
+    }
+  }
+}
+
+.react-aria-TimeField {
+  .react-aria-FieldError {
+    font-size: 12px;
+    color: var(--invalid-color);
+  }
+
+  [slot=description] {
+    font-size: 12px;
+  }
+}
diff --git a/starters/docs/src/TimeField.tsx b/starters/docs/src/TimeField.tsx
new file mode 100644
index 00000000000..cd5529469c1
--- /dev/null
+++ b/starters/docs/src/TimeField.tsx
@@ -0,0 +1,38 @@
+'use client';
+import {
+  DateInput,
+  DateSegment,
+  FieldError,
+  Label,
+  Text,
+  TimeField as AriaTimeField,
+  TimeFieldProps as AriaTimeFieldProps,
+  TimeValue,
+  ValidationResult
+} from 'react-aria-components';
+
+import './TimeField.css';
+
+export interface TimeFieldProps<T extends TimeValue>
+  extends AriaTimeFieldProps<T> {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
+
+export function TimeField<T extends TimeValue>(
+  { label, description, errorMessage, ...props }: TimeFieldProps<T>
+) {
+  return (
+    (
+      <AriaTimeField {...props}>
+        <Label>{label}</Label>
+        <DateInput>
+          {(segment) => <DateSegment segment={segment} />}
+        </DateInput>
+        {description && <Text slot="description">{description}</Text>}
+        <FieldError>{errorMessage}</FieldError>
+      </AriaTimeField>
+    )
+  );
+}
diff --git a/starters/docs/src/ToggleButton.css b/starters/docs/src/ToggleButton.css
new file mode 100644
index 00000000000..ab44aa03aae
--- /dev/null
+++ b/starters/docs/src/ToggleButton.css
@@ -0,0 +1,47 @@
+@import "./theme.css";
+
+.react-aria-ToggleButton {
+  color: var(--text-color);
+  background: var(--button-background);
+  border: 1px solid var(--border-color);
+  forced-color-adjust: none;
+  border-radius: 4px;
+  appearance: none;
+  vertical-align: middle;
+  font-size: 0.875rem;
+  text-align: center;
+  margin: 0;
+  outline: none;
+  padding: 6px 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &[data-pressed] {
+    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
+    background: var(--button-background-pressed);
+    border-color: var(--border-color-pressed);
+  }
+
+  &[data-selected] {
+    background: var(--highlight-background);
+    border-color: var(--highlight-background);
+    color: var(--highlight-foreground);
+
+    &[data-pressed] {
+      background: var(--highlight-background-pressed);
+      border-color: var(--highlight-background-pressed);
+    }
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    border-color: var(--border-color-disabled);
+    background: var(--button-background);
+    color: var(--text-color-disabled);
+  }
+}
diff --git a/starters/docs/src/ToggleButton.tsx b/starters/docs/src/ToggleButton.tsx
new file mode 100644
index 00000000000..cc8c4f666f2
--- /dev/null
+++ b/starters/docs/src/ToggleButton.tsx
@@ -0,0 +1,7 @@
+'use client';
+import {ToggleButton as RACToggleButton, ToggleButtonProps} from 'react-aria-components';
+import './ToggleButton.css';
+
+export function ToggleButton(props: ToggleButtonProps) {
+  return <RACToggleButton {...props} />;
+}
diff --git a/starters/docs/src/ToggleButtonGroup.css b/starters/docs/src/ToggleButtonGroup.css
new file mode 100644
index 00000000000..5f097ccdc9c
--- /dev/null
+++ b/starters/docs/src/ToggleButtonGroup.css
@@ -0,0 +1,56 @@
+@import "./theme.css";
+@import './Button.css';
+@import './ToggleButton.css';
+
+.react-aria-ToggleButtonGroup {
+  display: flex;
+
+  > button {
+    border-radius: 0;
+    z-index: 1;
+
+    &[data-disabled] {
+      z-index: 0;
+    }
+
+    &[data-selected],
+    &[data-focus-visible] {
+      z-index: 2;
+    }
+  }
+}
+
+.react-aria-ToggleButtonGroup[data-orientation=horizontal] {
+  flex-direction: row;
+
+  > button {
+    margin-inline-start: -1px;
+    
+    &:first-child {
+      border-radius: 4px 0 0 4px;
+      margin-inline-start: 0;
+    }
+
+    &:last-child {
+      border-radius: 0 4px 4px 0;
+    }
+  }
+}
+
+.react-aria-ToggleButtonGroup[data-orientation=vertical] {
+  flex-direction: column;
+  width: fit-content;
+
+  > button {
+    margin-block-start: -1px;
+    
+    &:first-child {
+      border-radius: 4px 4px 0 0;
+      margin-block-start: 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+}
diff --git a/starters/docs/src/ToggleButtonGroup.tsx b/starters/docs/src/ToggleButtonGroup.tsx
new file mode 100644
index 00000000000..390eea7f654
--- /dev/null
+++ b/starters/docs/src/ToggleButtonGroup.tsx
@@ -0,0 +1,7 @@
+'use client';
+import {ToggleButtonGroup as RACToggleButtonGroup, ToggleButtonGroupProps} from 'react-aria-components';
+import './ToggleButtonGroup.css';
+
+export function ToggleButtonGroup(props: ToggleButtonGroupProps) {
+  return <RACToggleButtonGroup {...props} />;
+}
diff --git a/starters/docs/src/Toolbar.css b/starters/docs/src/Toolbar.css
new file mode 100644
index 00000000000..7b8ea5bb7d6
--- /dev/null
+++ b/starters/docs/src/Toolbar.css
@@ -0,0 +1,50 @@
+@import './Checkbox.css';
+@import './Button.css';
+@import './ToggleButton.css';
+@import "./theme.css";
+
+.react-aria-Toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+
+  &[data-orientation=horizontal] {
+    flex-direction: row;
+  }
+
+  .react-aria-Group {
+    display: contents;
+  }
+
+  .react-aria-ToggleButton {
+    width: 32px;
+  }
+}
+
+.react-aria-Separator {
+  align-self: stretch;
+  background-color: var(--border-color);
+
+  &[aria-orientation=vertical] {
+    width: 1px;
+    margin: 0px 10px;
+  }
+}
+
+.react-aria-Toolbar {
+  width: fit-content;
+
+  &[data-orientation=vertical] {
+    flex-direction: column;
+    align-items: start;
+  }
+}
+
+.react-aria-Separator {
+  &:not([aria-orientation=vertical]) {
+    border: none;
+    height: 1px;
+    width: 100%;
+    margin: 10px 0;
+  }
+}
diff --git a/starters/docs/src/Toolbar.tsx b/starters/docs/src/Toolbar.tsx
new file mode 100644
index 00000000000..472fed91cc7
--- /dev/null
+++ b/starters/docs/src/Toolbar.tsx
@@ -0,0 +1,7 @@
+'use client';
+import {Toolbar as RACToolbar, ToolbarProps} from 'react-aria-components';
+import './Toolbar.css';
+
+export function Toolbar(props: ToolbarProps) {
+  return <RACToolbar {...props} />;
+}
diff --git a/starters/docs/src/Tooltip.css b/starters/docs/src/Tooltip.css
new file mode 100644
index 00000000000..2999c7ab08d
--- /dev/null
+++ b/starters/docs/src/Tooltip.css
@@ -0,0 +1,56 @@
+@import './Button.css';
+@import "./theme.css";
+
+.react-aria-Tooltip {
+  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
+  border-radius: 4px;
+  background: var(--highlight-background);
+  color: var(--highlight-foreground);
+  forced-color-adjust: none;
+  outline: none;
+  padding: 2px 8px;
+  max-width: 150px;
+  /* fixes FF gap */
+  transform: translate3d(0, 0, 0);
+  transition: transform 200ms, opacity 200ms;
+
+  &[data-entering],
+  &[data-exiting] {
+    transform: var(--origin);
+    opacity: 0;
+  }
+
+  &[data-placement=top] {
+    margin-bottom: 8px;
+    --origin: translateY(4px);
+  }
+
+  &[data-placement=bottom] {
+    margin-top: 8px;
+    --origin: translateY(-4px);
+    & .react-aria-OverlayArrow svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  &[data-placement=right] {
+    margin-left: 8px;
+    --origin: translateX(-4px);
+    & .react-aria-OverlayArrow svg {
+      transform: rotate(90deg);
+    }
+  }
+
+  &[data-placement=left] {
+    margin-right: 8px;
+    --origin: translateX(4px);
+    & .react-aria-OverlayArrow svg {
+      transform: rotate(-90deg);
+    }
+  }
+
+  & .react-aria-OverlayArrow svg {
+    display: block;
+    fill: var(--highlight-background);
+  }
+}
diff --git a/starters/docs/src/Tooltip.tsx b/starters/docs/src/Tooltip.tsx
new file mode 100644
index 00000000000..655f709e952
--- /dev/null
+++ b/starters/docs/src/Tooltip.tsx
@@ -0,0 +1,27 @@
+'use client';
+import {
+  OverlayArrow,
+  Tooltip as AriaTooltip,
+  TooltipProps as AriaTooltipProps
+} from 'react-aria-components';
+
+import './Tooltip.css';
+
+export interface TooltipProps extends Omit<AriaTooltipProps, 'children'> {
+  children: React.ReactNode;
+}
+
+export function Tooltip({ children, ...props }: TooltipProps) {
+  return (
+    (
+      <AriaTooltip {...props}>
+        <OverlayArrow>
+          <svg width={8} height={8} viewBox="0 0 8 8">
+            <path d="M0 0 L4 4 L8 0" />
+          </svg>
+        </OverlayArrow>
+        {children}
+      </AriaTooltip>
+    )
+  );
+}
diff --git a/starters/docs/src/Tree.css b/starters/docs/src/Tree.css
new file mode 100644
index 00000000000..894d8116d01
--- /dev/null
+++ b/starters/docs/src/Tree.css
@@ -0,0 +1,201 @@
+@import "./theme.css";
+@import './Button.css';
+@import './ToggleButton.css';
+@import './Checkbox.css';
+
+.react-aria-Tree {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--overlay-background);
+  forced-color-adjust: none;
+  outline: none;
+  width: 250px;
+  max-height: 300px;
+  box-sizing: border-box;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+
+  .react-aria-TreeItem {
+    display: flex;
+    align-items: center;
+    gap: 0.499625rem;
+    min-height: 28px;
+    padding: 0.25025rem 0.25025rem 0.25025rem 0.499625rem;
+    --padding: 16px;
+    border-radius: 6px;
+    outline: none;
+    cursor: default;
+    color: var(--text-color);
+    font-size: 0.9380000000000001rem;
+    position: relative;
+    transform: translateZ(0);
+
+    .react-aria-Button[slot=chevron] {
+      all: unset;
+      display: flex;
+      visibility: hidden;
+      align-items: center;
+      justify-content: center;
+      width: 1.1375rem;
+      height: 100%;
+      padding-left: calc((var(--tree-item-level) - 1) * var(--padding));
+
+      svg {
+        rotate: 0deg;
+        transition: rotate 200ms;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 3px;
+      }
+    }
+
+    &[data-has-child-items] .react-aria-Button[slot=chevron] {
+      visibility: visible;
+    }
+
+    &[data-expanded] .react-aria-Button[slot=chevron] svg {
+      rotate: 90deg;
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -2px;
+    }
+
+    &[data-pressed] {
+      background: var(--gray-100);
+    }
+
+    &[data-selected] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+      --focus-ring-color: var(--highlight-foreground);
+
+      &[data-focus-visible] {
+        outline-color: var(--highlight-foreground);
+        outline-offset: -4px;
+      }
+
+      .react-aria-Button {
+        color: var(--highlight-foreground);
+        --highlight-hover: rgb(255 255 255 / 0.1);
+        --highlight-pressed: rgb(255 255 255 / 0.2);
+      }
+    }
+
+    &[data-disabled] {
+      color: var(--text-color-disabled);
+    }
+
+    .react-aria-Button:not([slot]) {
+      margin-left: auto;
+      background: transparent;
+      border: none;
+      font-size: 1.05rem;
+      line-height: 1.2em;
+      padding: 0.25025rem 0.375375rem;
+      transition: background 200ms;
+
+      &[data-hovered] {
+        background: var(--highlight-hover);
+      }
+
+      &[data-pressed] {
+        background: var(--highlight-pressed);
+        box-shadow: none;
+      }
+    }
+  }
+
+  /* join selected items if :has selector is supported */
+  @supports selector(:has(.foo)) {
+    gap: 0;
+
+    .react-aria-TreeItem[data-selected]:has(+ [data-selected]) {
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    .react-aria-TreeItem[data-selected] + [data-selected] {
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+  }
+
+  :where(.react-aria-TreeItem) .react-aria-Checkbox {
+    --selected-color: var(--highlight-foreground);
+    --selected-color-pressed: var(--highlight-foreground-pressed);
+    --checkmark-color: var(--highlight-background);
+    --background-color: var(--highlight-background);
+  }
+}
+
+.react-aria-TreeItem[data-href] {
+  cursor: pointer;
+}
+
+.react-aria-Tree {
+  &[data-empty] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-style: italic;
+  }
+}
+
+.react-aria-TreeItem {
+  &[data-allows-dragging] {
+    padding-left: 4px;
+  }
+
+  &[data-dragging] {
+    opacity: 0.6;
+  }
+
+  &[data-drop-target] {
+    outline: 2px solid var(--highlight-background);
+    background: var(--highlight-overlay);
+  }
+
+  [slot=drag] {
+    all: unset;
+    width: 15px;
+    text-align: center;
+
+    &[data-focus-visible] {
+      border-radius: 4px;
+      outline: 2px solid var(--focus-ring-color);
+    }
+  }
+}
+
+.react-aria-Tree {
+  &[data-selection-mode=multiple] {
+    --checkbox-width: 28px;
+  }
+
+  &[data-allows-dragging] {
+    --drag-button-width: 23px;
+  }
+
+  .react-aria-DropIndicator {
+    &[data-drop-target] {
+      outline: 1px solid var(--highlight-background);
+      margin-left: calc(8px + var(--checkbox-width, 0px) + var(--drag-button-width, 0px) + 26px + (var(--tree-item-level) - 1) * 16px);
+    }
+  }
+}
+
+.react-aria-Tree[data-drop-target] {
+  outline: 2px solid var(--highlight-background);
+  outline-offset: -1px;
+  background: var(--highlight-overlay);
+}
diff --git a/starters/docs/src/Tree.tsx b/starters/docs/src/Tree.tsx
new file mode 100644
index 00000000000..9c42d110da6
--- /dev/null
+++ b/starters/docs/src/Tree.tsx
@@ -0,0 +1,63 @@
+'use client';
+import {
+  Button,
+  Tree as AriaTree,
+  TreeItem as AriaTreeItem,
+  TreeItemContent as AriaTreeItemContent,
+  TreeItemContentProps,
+  TreeItemContentRenderProps,
+  TreeItemProps as AriaTreeItemProps,
+  TreeProps
+} from 'react-aria-components';
+import {ChevronRight} from 'lucide-react';
+
+import {Checkbox} from './Checkbox';
+
+import './Tree.css';
+
+export function Tree<T extends object>(props: TreeProps<T>) {
+  return <AriaTree {...props} />;
+}
+
+export function TreeItemContent(
+  props: Omit<TreeItemContentProps, 'children'> & { children?: React.ReactNode }
+) {
+  return (
+    (
+      <AriaTreeItemContent>
+        {(
+          { selectionBehavior, selectionMode, allowsDragging }:
+            TreeItemContentRenderProps
+        ) => (
+          <>
+            {allowsDragging && <Button slot="drag">≡</Button>}
+            {selectionBehavior === 'toggle' && selectionMode !== 'none' && (
+              <Checkbox slot="selection" />
+            )}
+            <Button slot="chevron">
+              <ChevronRight />
+            </Button>
+            {props.children}
+          </>
+        )}
+      </AriaTreeItemContent>
+    )
+  );
+}
+
+export interface TreeItemProps extends Partial<AriaTreeItemProps> {
+  title: string;
+}
+
+export function TreeItem(props: TreeItemProps) {
+  return (
+    (
+      <AriaTreeItem textValue={props.title} {...props}>
+        <TreeItemContent>
+          {props.title}
+        </TreeItemContent>
+        {props.children}
+      </AriaTreeItem>
+    )
+  );
+}
diff --git a/starters/docs/src/theme.css b/starters/docs/src/theme.css
new file mode 100644
index 00000000000..e754f609ef3
--- /dev/null
+++ b/starters/docs/src/theme.css
@@ -0,0 +1,118 @@
+/* color themes for dark and light modes, generated with Leonardo.
+ * Light: https://leonardocolor.io/theme.html?name=Light&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A98%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
+:root {
+  --background-color: #f8f8f8;
+  --gray-50: #ffffff;
+  --gray-100: #d0d0d0;
+  --gray-200: #afafaf;
+  --gray-300: #8f8f8f;
+  --gray-400: #717171;
+  --gray-500: #555555;
+  --gray-600: #393939;
+  --purple-100: #d5c9fa;
+  --purple-200: #b8a3f6;
+  --purple-300: #997cf2;
+  --purple-400: #7a54ef;
+  --purple-500: #582ddc;
+  --purple-600: #3c1e95;
+  --red-100: #f7c4ba;
+  --red-200: #f29887;
+  --red-300: #eb664d;
+  --red-400: #de2300;
+  --red-500: #a81b00;
+  --red-600: #731200;
+  --highlight-hover: rgb(0 0 0 / 0.07);
+  --highlight-pressed: rgb(0 0 0 / 0.15);
+}
+
+/* Dark: https://leonardocolor.io/theme.html?name=Dark&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A11%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #1d1d1d;
+    --gray-50: #101010;
+    --gray-100: #393939;
+    --gray-200: #4f4f4f;
+    --gray-300: #686868;
+    --gray-400: #848484;
+    --gray-500: #a7a7a7;
+    --gray-600: #cfcfcf;
+    --purple-100: #3c1e95;
+    --purple-200: #522acd;
+    --purple-300: #6f46ed;
+    --purple-400: #8e6ef1;
+    --purple-500: #b099f5;
+    --purple-600: #d5c8fa;
+    --red-100: #721200;
+    --red-200: #9c1900;
+    --red-300: #cc2000;
+    --red-400: #e95034;
+    --red-500: #f08c79;
+    --red-600: #f7c3ba;
+    --highlight-hover: rgb(255 255 255 / 0.1);
+    --highlight-pressed: rgb(255 255 255 / 0.2);
+  }
+}
+
+/* Semantic colors */
+:root {
+  --focus-ring-color: var(--purple-400);
+  --text-color: var(--gray-600);
+  --text-color-base: var(--gray-500);
+  --text-color-hover: var(--gray-600);
+  --text-color-disabled: var(--gray-200);
+  --text-color-placeholder: var(--gray-400);
+  --link-color: var(--purple-500);
+  --link-color-secondary: var(--gray-500);
+  --link-color-pressed: var(--purple-600);
+  --border-color: var(--gray-300);
+  --border-color-hover: var(--gray-400);
+  --border-color-pressed: var(--gray-400);
+  --border-color-disabled: var(--gray-100);
+  --field-background: var(--gray-50);
+  --field-text-color: var(--gray-600);
+  --overlay-background: var(--gray-50);
+  --button-background: var(--gray-50);
+  --button-background-pressed: var(--background-color);
+  /* these colors are the same between light and dark themes
+   * to ensure contrast with the foreground color */
+  --highlight-background: #6f46ed; /* purple-300 from dark theme, 3.03:1 against background-color */
+  --highlight-background-pressed: #522acd; /* purple-200 from dark theme */
+  --highlight-background-invalid: #cc2000; /* red-300 from dark theme */
+  --highlight-foreground: white; /* 5.56:1 against highlight-background */
+  --highlight-foreground-pressed: #ddd;
+  --highlight-overlay: rgb(from #6f46ed r g b / 15%);
+  --invalid-color: var(--red-400);
+  --invalid-color-pressed: var(--red-500);
+}
+
+/* Windows high contrast mode overrides */
+@media (forced-colors: active) {
+  :root {
+    --background-color: Canvas;
+    --focus-ring-color: Highlight;
+    --text-color: ButtonText;
+    --text-color-base: ButtonText;
+    --text-color-hover: ButtonText;
+    --text-color-disabled: GrayText;
+    --text-color-placeholder: ButtonText;
+    --link-color: LinkText;
+    --link-color-secondary: LinkText;
+    --link-color-pressed: LinkText;
+    --border-color: ButtonBorder;
+    --border-color-hover: ButtonBorder;
+    --border-color-pressed: ButtonBorder;
+    --border-color-disabled: GrayText;
+    --field-background: Field;
+    --field-text-color: FieldText;
+    --overlay-background: Canvas;
+    --button-background: ButtonFace;
+    --button-background-pressed: ButtonFace;
+    --highlight-background: Highlight;
+    --highlight-background-pressed: Highlight;
+    --highlight-background-invalid: LinkText;
+    --highlight-foreground: HighlightText;
+    --highlight-foreground-pressed: HighlightText;
+    --invalid-color: LinkText;
+    --invalid-color-pressed: LinkText;
+  }
+}
diff --git a/starters/docs/stories/Autocomplete.stories.tsx b/starters/docs/stories/Autocomplete.stories.tsx
new file mode 100644
index 00000000000..50be16b1693
--- /dev/null
+++ b/starters/docs/stories/Autocomplete.stories.tsx
@@ -0,0 +1,33 @@
+import {Autocomplete} from '../src/Autocomplete';
+import {MenuItem} from 'react-aria-components';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Autocomplete> = {
+  component: Autocomplete,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Autocomplete>;
+
+export const Example: Story = (args) => (
+  <Autocomplete {...args}>
+    <MenuItem>Create new file...</MenuItem>
+    <MenuItem>Create new folder...</MenuItem>
+    <MenuItem>Assign to...</MenuItem>
+    <MenuItem>Assign to me</MenuItem>
+    <MenuItem>Change status...</MenuItem>
+    <MenuItem>Change priority...</MenuItem>
+    <MenuItem>Add label...</MenuItem>
+    <MenuItem>Remove label...</MenuItem>
+  </Autocomplete>
+);
+
+Example.args = {
+  label: 'Commands',
+  placeholder: 'Search commands...'
+};
diff --git a/starters/docs/stories/Breadcrumbs.stories.tsx b/starters/docs/stories/Breadcrumbs.stories.tsx
new file mode 100644
index 00000000000..60fe92a1774
--- /dev/null
+++ b/starters/docs/stories/Breadcrumbs.stories.tsx
@@ -0,0 +1,29 @@
+import {Breadcrumbs} from '../src/Breadcrumbs';
+import {Breadcrumb, Link} from 'react-aria-components';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Breadcrumbs> = {
+  component: Breadcrumbs,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Breadcrumbs>;
+
+export const Example: Story = (args) => (
+  <Breadcrumbs {...args}>
+    <Breadcrumb>
+      <Link href="/">Home</Link>
+    </Breadcrumb>
+    <Breadcrumb>
+      <Link href="/react-aria/">React Aria</Link>
+    </Breadcrumb>
+    <Breadcrumb>
+      <Link>Breadcrumbs</Link>
+    </Breadcrumb>
+  </Breadcrumbs>
+);
diff --git a/starters/docs/stories/Button.stories.tsx b/starters/docs/stories/Button.stories.tsx
new file mode 100644
index 00000000000..5423b6945a2
--- /dev/null
+++ b/starters/docs/stories/Button.stories.tsx
@@ -0,0 +1,20 @@
+import {Button} from '../src/Button';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Button>;
+
+export const Example: Story = (args) => <Button {...args}>Press me</Button>;
+
+Example.args = {
+  onPress: () => alert('Hello world!')
+};
diff --git a/starters/docs/stories/Calendar.stories.tsx b/starters/docs/stories/Calendar.stories.tsx
new file mode 100644
index 00000000000..22270e02ef5
--- /dev/null
+++ b/starters/docs/stories/Calendar.stories.tsx
@@ -0,0 +1,18 @@
+import {Calendar} from '../src/Calendar';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Calendar> = {
+  component: Calendar,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Calendar>;
+
+export const Example: Story = (args) => (
+  <Calendar aria-label="Event date" {...args} />
+);
diff --git a/starters/docs/stories/Checkbox.stories.tsx b/starters/docs/stories/Checkbox.stories.tsx
new file mode 100644
index 00000000000..5cca1c3e98f
--- /dev/null
+++ b/starters/docs/stories/Checkbox.stories.tsx
@@ -0,0 +1,17 @@
+import {Checkbox} from '../src/Checkbox';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Checkbox>;
+
+export const Example: Story = (args) => <Checkbox {...args}>Unsubscribe
+</Checkbox>;
diff --git a/starters/docs/stories/CheckboxGroup.stories.tsx b/starters/docs/stories/CheckboxGroup.stories.tsx
new file mode 100644
index 00000000000..b90361a84cc
--- /dev/null
+++ b/starters/docs/stories/CheckboxGroup.stories.tsx
@@ -0,0 +1,27 @@
+import {Checkbox} from '../src/Checkbox';
+import {CheckboxGroup} from '../src/CheckboxGroup';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof CheckboxGroup> = {
+  component: CheckboxGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof CheckboxGroup>;
+
+export const Example: Story = (args) => (
+  <CheckboxGroup {...args}>
+    <Checkbox value="soccer">Soccer</Checkbox>
+    <Checkbox value="baseball">Baseball</Checkbox>
+    <Checkbox value="basketball">Basketball</Checkbox>
+  </CheckboxGroup>
+);
+
+Example.args = {
+  label: 'Favorite sports'
+};
diff --git a/starters/docs/stories/ColorArea.stories.tsx b/starters/docs/stories/ColorArea.stories.tsx
new file mode 100644
index 00000000000..281b76906f6
--- /dev/null
+++ b/starters/docs/stories/ColorArea.stories.tsx
@@ -0,0 +1,20 @@
+import {ColorArea} from '../src/ColorArea';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof ColorArea> = {
+  component: ColorArea,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof ColorArea>;
+
+export const Example: Story = (args) => <ColorArea {...args} />;
+
+Example.args = {
+  defaultValue: 'hsl(30, 100%, 50%)'
+};
diff --git a/starters/docs/stories/ColorField.stories.tsx b/starters/docs/stories/ColorField.stories.tsx
new file mode 100644
index 00000000000..e0d23fe052f
--- /dev/null
+++ b/starters/docs/stories/ColorField.stories.tsx
@@ -0,0 +1,20 @@
+import {ColorField} from '../src/ColorField';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof ColorField> = {
+  component: ColorField,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof ColorField>;
+
+export const Example: Story = (args) => <ColorField {...args} />;
+
+Example.args = {
+  label: 'Color'
+};
diff --git a/starters/docs/stories/ColorPicker.stories.tsx b/starters/docs/stories/ColorPicker.stories.tsx
new file mode 100644
index 00000000000..2f78d7309e7
--- /dev/null
+++ b/starters/docs/stories/ColorPicker.stories.tsx
@@ -0,0 +1,21 @@
+import {ColorPicker} from '../src/ColorPicker';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof ColorPicker> = {
+  component: ColorPicker,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof ColorPicker>;
+
+export const Example: Story = (args) => <ColorPicker {...args} />;
+
+Example.args = {
+  label: 'Fill color',
+  defaultValue: '#f00'
+};
diff --git a/starters/docs/stories/ColorSlider.stories.tsx b/starters/docs/stories/ColorSlider.stories.tsx
new file mode 100644
index 00000000000..9d92f666e16
--- /dev/null
+++ b/starters/docs/stories/ColorSlider.stories.tsx
@@ -0,0 +1,22 @@
+import {ColorSlider} from '../src/ColorSlider';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof ColorSlider> = {
+  component: ColorSlider,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof ColorSlider>;
+
+export const Example: Story = (args) => <ColorSlider {...args} />;
+
+Example.args = {
+  label: 'Red Opacity',
+  defaultValue: '#f00',
+  channel: 'alpha'
+};
diff --git a/starters/docs/stories/ColorSwatch.stories.tsx b/starters/docs/stories/ColorSwatch.stories.tsx
new file mode 100644
index 00000000000..2c43b0971db
--- /dev/null
+++ b/starters/docs/stories/ColorSwatch.stories.tsx
@@ -0,0 +1,20 @@
+import {ColorSwatch} from '../src/ColorSwatch';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof ColorSwatch> = {
+  component: ColorSwatch,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof ColorSwatch>;
+
+export const Example: Story = (args) => <ColorSwatch {...args} />;
+
+Example.args = {
+  color: '#f00a'
+};
diff --git a/starters/docs/stories/ColorSwatchPicker.stories.tsx b/starters/docs/stories/ColorSwatchPicker.stories.tsx
new file mode 100644
index 00000000000..0f84c337666
--- /dev/null
+++ b/starters/docs/stories/ColorSwatchPicker.stories.tsx
@@ -0,0 +1,28 @@
+import {
+  ColorSwatchPicker,
+  ColorSwatchPickerItem
+} from '../src/ColorSwatchPicker';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof ColorSwatchPicker> = {
+  component: ColorSwatchPicker,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof ColorSwatchPicker>;
+
+export const Example: Story = (args) => (
+  <ColorSwatchPicker {...args}>
+    <ColorSwatchPickerItem color="#A00" />
+    <ColorSwatchPickerItem color="#f80" />
+    <ColorSwatchPickerItem color="#080" />
+    <ColorSwatchPickerItem color="#08f" />
+    <ColorSwatchPickerItem color="#088" />
+    <ColorSwatchPickerItem color="#008" />
+  </ColorSwatchPicker>
+);
diff --git a/starters/docs/stories/ColorWheel.stories.tsx b/starters/docs/stories/ColorWheel.stories.tsx
new file mode 100644
index 00000000000..6fd057b02bf
--- /dev/null
+++ b/starters/docs/stories/ColorWheel.stories.tsx
@@ -0,0 +1,20 @@
+import {ColorWheel} from '../src/ColorWheel';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof ColorWheel> = {
+  component: ColorWheel,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof ColorWheel>;
+
+export const Example: Story = (args) => <ColorWheel {...args} />;
+
+Example.args = {
+  defaultValue: 'hsl(30, 100%, 50%)'
+};
diff --git a/starters/docs/stories/ComboBox.stories.tsx b/starters/docs/stories/ComboBox.stories.tsx
new file mode 100644
index 00000000000..14d645e3dd8
--- /dev/null
+++ b/starters/docs/stories/ComboBox.stories.tsx
@@ -0,0 +1,27 @@
+import {ComboBox, ComboBoxItem} from '../src/ComboBox';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof ComboBox> = {
+  component: ComboBox,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof ComboBox>;
+
+export const Example: Story = (args) => (
+  <ComboBox {...args}>
+    <ComboBoxItem>Chocolate</ComboBoxItem>
+    <ComboBoxItem>Mint</ComboBoxItem>
+    <ComboBoxItem>Strawberry</ComboBoxItem>
+    <ComboBoxItem>Vanilla</ComboBoxItem>
+  </ComboBox>
+);
+
+Example.args = {
+  label: 'Ice cream flavor'
+};
diff --git a/starters/docs/stories/DateField.stories.tsx b/starters/docs/stories/DateField.stories.tsx
new file mode 100644
index 00000000000..e3b56fc7d9a
--- /dev/null
+++ b/starters/docs/stories/DateField.stories.tsx
@@ -0,0 +1,20 @@
+import {DateField} from '../src/DateField';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof DateField> = {
+  component: DateField,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof DateField>;
+
+export const Example: Story = (args) => <DateField {...args} />;
+
+Example.args = {
+  label: 'Event date'
+};
diff --git a/starters/docs/stories/DatePicker.stories.tsx b/starters/docs/stories/DatePicker.stories.tsx
new file mode 100644
index 00000000000..377b4cda13a
--- /dev/null
+++ b/starters/docs/stories/DatePicker.stories.tsx
@@ -0,0 +1,20 @@
+import {DatePicker} from '../src/DatePicker';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof DatePicker> = {
+  component: DatePicker,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof DatePicker>;
+
+export const Example: Story = (args) => <DatePicker {...args} />;
+
+Example.args = {
+  label: 'Event date'
+};
diff --git a/starters/docs/stories/DateRangePicker.stories.tsx b/starters/docs/stories/DateRangePicker.stories.tsx
new file mode 100644
index 00000000000..f6c28eed9cb
--- /dev/null
+++ b/starters/docs/stories/DateRangePicker.stories.tsx
@@ -0,0 +1,20 @@
+import {DateRangePicker} from '../src/DateRangePicker';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof DateRangePicker> = {
+  component: DateRangePicker,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof DateRangePicker>;
+
+export const Example: Story = (args) => <DateRangePicker {...args} />;
+
+Example.args = {
+  label: 'Event date'
+};
diff --git a/starters/docs/stories/Dialog.stories.tsx b/starters/docs/stories/Dialog.stories.tsx
new file mode 100644
index 00000000000..6b6c068a0e9
--- /dev/null
+++ b/starters/docs/stories/Dialog.stories.tsx
@@ -0,0 +1,47 @@
+import {Dialog} from '../src/Dialog';
+import {
+  Button,
+  DialogTrigger,
+  Heading,
+  Input,
+  Label,
+  Modal,
+  TextField
+} from 'react-aria-components';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Dialog> = {
+  component: Dialog,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Dialog>;
+
+export const Example: Story = (args) => (
+  <DialogTrigger>
+    <Button>Sign up…</Button>
+    <Modal>
+      <Dialog {...args}>
+        <form>
+          <Heading slot="title">Sign up</Heading>
+          <TextField autoFocus>
+            <Label>First Name</Label>
+            <Input />
+          </TextField>
+          <TextField>
+            <Label>Last Name</Label>
+            <Input />
+          </TextField>
+          <Button slot="close" style={{ marginTop: 8 }}>
+            Submit
+          </Button>
+        </form>
+      </Dialog>
+    </Modal>
+  </DialogTrigger>
+);
diff --git a/starters/docs/stories/Disclosure.stories.tsx b/starters/docs/stories/Disclosure.stories.tsx
new file mode 100644
index 00000000000..d3e0513c63e
--- /dev/null
+++ b/starters/docs/stories/Disclosure.stories.tsx
@@ -0,0 +1,22 @@
+import {Disclosure} from '../src/Disclosure';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Disclosure> = {
+  component: Disclosure,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Disclosure>;
+
+export const Example: Story = (args) => (
+  <Disclosure {...args} style={{width: '400px'}}>Details on managing your account</Disclosure>
+);
+
+Example.args = {
+  title: 'Manage your account'
+};
diff --git a/starters/docs/stories/DisclosureGroup.stories.tsx b/starters/docs/stories/DisclosureGroup.stories.tsx
new file mode 100644
index 00000000000..899d6e61f76
--- /dev/null
+++ b/starters/docs/stories/DisclosureGroup.stories.tsx
@@ -0,0 +1,30 @@
+import {DisclosureGroup} from '../src/DisclosureGroup';
+import {Disclosure} from '../src/Disclosure';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof DisclosureGroup> = {
+  component: DisclosureGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof DisclosureGroup>;
+
+export const Example: Story = (args) => (
+  <DisclosureGroup {...args} style={{width: '400px'}}>
+    <Disclosure id="personal" title="Personal Information">
+      <p>Personal information form here.</p>
+    </Disclosure>
+    <Disclosure id="billing" title="Billing Address">
+      <p>Billing address form here.</p>
+    </Disclosure>
+  </DisclosureGroup>
+);
+
+Example.args = {
+  defaultExpandedKeys: ['personal']
+};
diff --git a/starters/docs/stories/Form.stories.tsx b/starters/docs/stories/Form.stories.tsx
new file mode 100644
index 00000000000..768135b815e
--- /dev/null
+++ b/starters/docs/stories/Form.stories.tsx
@@ -0,0 +1,32 @@
+import {Form} from '../src/Form';
+import {
+  Button,
+  FieldError,
+  Input,
+  Label,
+  TextField
+} from 'react-aria-components';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Form> = {
+  component: Form,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Form>;
+
+export const Example: Story = (args) => (
+  <Form {...args}>
+    <TextField name="email" type="email" isRequired>
+      <Label>Email</Label>
+      <Input />
+      <FieldError />
+    </TextField>
+    <Button type="submit">Submit</Button>
+  </Form>
+);
diff --git a/starters/docs/stories/GridList.stories.tsx b/starters/docs/stories/GridList.stories.tsx
new file mode 100644
index 00000000000..64289f608d0
--- /dev/null
+++ b/starters/docs/stories/GridList.stories.tsx
@@ -0,0 +1,28 @@
+import {GridList, GridListItem} from '../src/GridList';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof GridList> = {
+  component: GridList,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof GridList>;
+
+export const Example: Story = (args) => (
+  <GridList aria-label="Ice cream flavors" {...args}>
+    <GridListItem>Chocolate</GridListItem>
+    <GridListItem>Mint</GridListItem>
+    <GridListItem>Strawberry</GridListItem>
+    <GridListItem>Vanilla</GridListItem>
+  </GridList>
+);
+
+Example.args = {
+  onAction: undefined,
+  selectionMode: 'multiple'
+};
diff --git a/starters/docs/stories/Link.stories.tsx b/starters/docs/stories/Link.stories.tsx
new file mode 100644
index 00000000000..bda0f166bba
--- /dev/null
+++ b/starters/docs/stories/Link.stories.tsx
@@ -0,0 +1,21 @@
+import {Link} from '../src/Link';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Link> = {
+  component: Link,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Link>;
+
+export const Example: Story = (args) => <Link {...args}>The missing link</Link>;
+
+Example.args = {
+  href: 'https://www.imdb.com/title/tt6348138/',
+  target: '_blank'
+};
diff --git a/starters/docs/stories/ListBox.stories.tsx b/starters/docs/stories/ListBox.stories.tsx
new file mode 100644
index 00000000000..565072638f5
--- /dev/null
+++ b/starters/docs/stories/ListBox.stories.tsx
@@ -0,0 +1,28 @@
+import {ListBox, ListBoxItem} from '../src/ListBox';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof ListBox> = {
+  component: ListBox,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof ListBox>;
+
+export const Example: Story = (args) => (
+  <ListBox aria-label="Ice cream flavor" {...args}>
+    <ListBoxItem>Chocolate</ListBoxItem>
+    <ListBoxItem>Mint</ListBoxItem>
+    <ListBoxItem>Strawberry</ListBoxItem>
+    <ListBoxItem>Vanilla</ListBoxItem>
+  </ListBox>
+);
+
+Example.args = {
+  onAction: undefined,
+  selectionMode: 'single'
+};
diff --git a/starters/docs/stories/Menu.stories.tsx b/starters/docs/stories/Menu.stories.tsx
new file mode 100644
index 00000000000..cc321ee85a0
--- /dev/null
+++ b/starters/docs/stories/Menu.stories.tsx
@@ -0,0 +1,24 @@
+import {MenuButton, MenuItem} from '../src/Menu';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof MenuButton> = {
+  component: MenuButton,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof MenuButton>;
+
+export const Example: Story = (args) => (
+  <MenuButton label="Edit" {...args}>
+    <MenuItem>Cut</MenuItem>
+    <MenuItem>Copy</MenuItem>
+    <MenuItem>Paste</MenuItem>
+  </MenuButton>
+);
+
+Example.args = {};
diff --git a/starters/docs/stories/Meter.stories.tsx b/starters/docs/stories/Meter.stories.tsx
new file mode 100644
index 00000000000..7f1dbdab198
--- /dev/null
+++ b/starters/docs/stories/Meter.stories.tsx
@@ -0,0 +1,21 @@
+import {Meter} from '../src/Meter';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Meter> = {
+  component: Meter,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Meter>;
+
+export const Example: Story = (args) => <Meter {...args} />;
+
+Example.args = {
+  label: 'Storage space',
+  value: 80
+};
diff --git a/starters/docs/stories/Modal.stories.tsx b/starters/docs/stories/Modal.stories.tsx
new file mode 100644
index 00000000000..a07633822aa
--- /dev/null
+++ b/starters/docs/stories/Modal.stories.tsx
@@ -0,0 +1,47 @@
+import {Modal} from '../src/Modal';
+import {
+  Button,
+  Dialog,
+  DialogTrigger,
+  Heading,
+  Input,
+  Label,
+  TextField
+} from 'react-aria-components';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Modal> = {
+  component: Modal,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Modal>;
+
+export const Example: Story = (args) => (
+  <DialogTrigger>
+    <Button>Sign up…</Button>
+    <Modal {...args}>
+      <Dialog>
+        <form>
+          <Heading slot="title">Sign up</Heading>
+          <TextField autoFocus>
+            <Label>First Name:</Label>
+            <Input />
+          </TextField>
+          <TextField>
+            <Label>Last Name:</Label>
+            <Input />
+          </TextField>
+          <Button slot="close">
+            Submit
+          </Button>
+        </form>
+      </Dialog>
+    </Modal>
+  </DialogTrigger>
+);
diff --git a/starters/docs/stories/NumberField.stories.tsx b/starters/docs/stories/NumberField.stories.tsx
new file mode 100644
index 00000000000..4467c5bdb10
--- /dev/null
+++ b/starters/docs/stories/NumberField.stories.tsx
@@ -0,0 +1,20 @@
+import {NumberField} from '../src/NumberField';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof NumberField> = {
+  component: NumberField,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof NumberField>;
+
+export const Example: Story = (args) => <NumberField {...args} />;
+
+Example.args = {
+  label: 'Cookies'
+};
diff --git a/starters/docs/stories/Popover.stories.tsx b/starters/docs/stories/Popover.stories.tsx
new file mode 100644
index 00000000000..091b0a98bda
--- /dev/null
+++ b/starters/docs/stories/Popover.stories.tsx
@@ -0,0 +1,27 @@
+import {Popover} from '../src/Popover';
+import {Button} from '../src/Button';
+import {DialogTrigger, Heading} from 'react-aria-components';
+import {HelpCircle} from 'lucide-react';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Popover> = {
+  component: Popover,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Popover>;
+
+export const Example: Story = (args) => (
+  <DialogTrigger>
+    <Button aria-label="Help"><HelpCircle /></Button>
+    <Popover {...args}>
+      <Heading slot="title">Help</Heading>
+      <p>For help accessing your account, please contact support.</p>
+    </Popover>
+  </DialogTrigger>
+);
diff --git a/starters/docs/stories/ProgressBar.stories.tsx b/starters/docs/stories/ProgressBar.stories.tsx
new file mode 100644
index 00000000000..4c1a817bebb
--- /dev/null
+++ b/starters/docs/stories/ProgressBar.stories.tsx
@@ -0,0 +1,21 @@
+import {ProgressBar} from '../src/ProgressBar';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof ProgressBar> = {
+  component: ProgressBar,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof ProgressBar>;
+
+export const Example: Story = (args) => <ProgressBar {...args} />;
+
+Example.args = {
+  label: 'Loading…',
+  value: 80
+};
diff --git a/starters/docs/stories/RadioGroup.stories.tsx b/starters/docs/stories/RadioGroup.stories.tsx
new file mode 100644
index 00000000000..7532b387553
--- /dev/null
+++ b/starters/docs/stories/RadioGroup.stories.tsx
@@ -0,0 +1,28 @@
+import {RadioGroup} from '../src/RadioGroup';
+import {Radio} from 'react-aria-components';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof RadioGroup> = {
+  component: RadioGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof RadioGroup>;
+
+export const Example: Story = (args) => (
+  <RadioGroup {...args}>
+    <Radio value="soccer">Soccer</Radio>
+    <Radio value="baseball">Baseball</Radio>
+    <Radio value="basketball">Basketball</Radio>
+  </RadioGroup>
+);
+
+Example.args = {
+  label: 'Favorite sport'
+};
diff --git a/starters/docs/stories/RangeCalendar.stories.tsx b/starters/docs/stories/RangeCalendar.stories.tsx
new file mode 100644
index 00000000000..d124c8d0453
--- /dev/null
+++ b/starters/docs/stories/RangeCalendar.stories.tsx
@@ -0,0 +1,19 @@
+import {RangeCalendar} from '../src/RangeCalendar';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof RangeCalendar> = {
+  component: RangeCalendar,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof RangeCalendar>;
+
+export const Example: Story = (args) => (
+  <RangeCalendar aria-label="Trip dates" {...args} />
+);
diff --git a/starters/docs/stories/SearchField.stories.tsx b/starters/docs/stories/SearchField.stories.tsx
new file mode 100644
index 00000000000..923155298b5
--- /dev/null
+++ b/starters/docs/stories/SearchField.stories.tsx
@@ -0,0 +1,21 @@
+import {SearchField} from '../src/SearchField';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof SearchField> = {
+  component: SearchField,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof SearchField>;
+
+export const Example: Story = (args) => <SearchField {...args} />;
+
+Example.args = {
+  label: 'Search'
+};
diff --git a/starters/docs/stories/Select.stories.tsx b/starters/docs/stories/Select.stories.tsx
new file mode 100644
index 00000000000..e24cfd939c5
--- /dev/null
+++ b/starters/docs/stories/Select.stories.tsx
@@ -0,0 +1,28 @@
+import {Select, SelectItem} from '../src/Select';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Select> = {
+  component: Select,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof Select>;
+
+export const Example: Story = (args) => (
+  <Select {...args}>
+    <SelectItem>Chocolate</SelectItem>
+    <SelectItem>Mint</SelectItem>
+    <SelectItem>Strawberry</SelectItem>
+    <SelectItem>Vanilla</SelectItem>
+  </Select>
+);
+
+Example.args = {
+  label: 'Ice cream flavor'
+};
diff --git a/starters/docs/stories/Slider.stories.tsx b/starters/docs/stories/Slider.stories.tsx
new file mode 100644
index 00000000000..083f195f821
--- /dev/null
+++ b/starters/docs/stories/Slider.stories.tsx
@@ -0,0 +1,23 @@
+import {Slider} from '../src/Slider';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Slider> = {
+  component: Slider,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof Slider>;
+
+export const Example: Story = (args) => <Slider {...args} />;
+
+Example.args = {
+  label: 'Range',
+  defaultValue: [30, 60],
+  thumbLabels: ['start', 'end']
+};
diff --git a/starters/docs/stories/Switch.stories.tsx b/starters/docs/stories/Switch.stories.tsx
new file mode 100644
index 00000000000..e64f464386e
--- /dev/null
+++ b/starters/docs/stories/Switch.stories.tsx
@@ -0,0 +1,16 @@
+import {Switch} from '../src/Switch';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Switch> = {
+  component: Switch,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryFn<typeof Switch>;
+
+export const Example: Story = (args) => <Switch {...args}>Wi-Fi</Switch>;
diff --git a/starters/docs/stories/Table.stories.tsx b/starters/docs/stories/Table.stories.tsx
new file mode 100644
index 00000000000..3090cb7261e
--- /dev/null
+++ b/starters/docs/stories/Table.stories.tsx
@@ -0,0 +1,48 @@
+import {Column, Row, Table, TableHeader} from '../src/Table';
+import {Cell, TableBody} from 'react-aria-components';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Table> = {
+  component: Table,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof Table>;
+
+export const Example: Story = (args) => (
+  <Table aria-label="Files" {...args}>
+    <TableHeader>
+      <Column isRowHeader>Name</Column>
+      <Column>Type</Column>
+      <Column>Date Modified</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>Games</Cell>
+        <Cell>File folder</Cell>
+        <Cell>6/7/2020</Cell>
+      </Row>
+      <Row>
+        <Cell>Program Files</Cell>
+        <Cell>File folder</Cell>
+        <Cell>4/7/2021</Cell>
+      </Row>
+      <Row>
+        <Cell>bootmgr</Cell>
+        <Cell>System file</Cell>
+        <Cell>11/20/2010</Cell>
+      </Row>
+    </TableBody>
+  </Table>
+);
+
+Example.args = {
+  onRowAction: undefined,
+  selectionMode: 'multiple'
+};
diff --git a/starters/docs/stories/Tabs.stories.tsx b/starters/docs/stories/Tabs.stories.tsx
new file mode 100644
index 00000000000..be2d4c96d3c
--- /dev/null
+++ b/starters/docs/stories/Tabs.stories.tsx
@@ -0,0 +1,39 @@
+import {Tabs} from '../src/Tabs';
+import {Tab, TabList, TabPanel} from 'react-aria-components';
+import {fn} from '@storybook/test';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Tabs> = {
+  component: Tabs,
+  parameters: {
+    layout: 'centered'
+  },
+  args: {
+    onSelectionChange: fn()
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof Tabs>;
+
+export const Example: Story = (args) => (
+  <Tabs {...args}>
+    <TabList aria-label="History of Ancient Rome">
+      <Tab id="FoR">Founding of Rome</Tab>
+      <Tab id="MaR">Monarchy and Republic</Tab>
+      <Tab id="Emp">Empire</Tab>
+    </TabList>
+    <TabPanel id="FoR">
+      Arma virumque cano, Troiae qui primus ab oris.
+    </TabPanel>
+    <TabPanel id="MaR">
+      Senatus Populusque Romanus.
+    </TabPanel>
+    <TabPanel id="Emp">
+      Alea jacta est.
+    </TabPanel>
+  </Tabs>
+);
diff --git a/starters/docs/stories/TagGroup.stories.tsx b/starters/docs/stories/TagGroup.stories.tsx
new file mode 100644
index 00000000000..289a4ebbf07
--- /dev/null
+++ b/starters/docs/stories/TagGroup.stories.tsx
@@ -0,0 +1,29 @@
+import {Tag, TagGroup} from '../src/TagGroup';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof TagGroup> = {
+  component: TagGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof TagGroup>;
+
+export const Example: Story = (args) => (
+  <TagGroup {...args}>
+    <Tag>Chocolate</Tag>
+    <Tag>Mint</Tag>
+    <Tag>Strawberry</Tag>
+    <Tag>Vanilla</Tag>
+  </TagGroup>
+);
+
+Example.args = {
+  label: 'Ice cream flavor',
+  selectionMode: 'single'
+};
diff --git a/starters/docs/stories/TextField.stories.tsx b/starters/docs/stories/TextField.stories.tsx
new file mode 100644
index 00000000000..0eb42385414
--- /dev/null
+++ b/starters/docs/stories/TextField.stories.tsx
@@ -0,0 +1,21 @@
+import {TextField} from '../src/TextField';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof TextField> = {
+  component: TextField,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof TextField>;
+
+export const Example: Story = (args) => <TextField {...args} />;
+
+Example.args = {
+  label: 'Name'
+};
diff --git a/starters/docs/stories/TimeField.stories.tsx b/starters/docs/stories/TimeField.stories.tsx
new file mode 100644
index 00000000000..c97c441398d
--- /dev/null
+++ b/starters/docs/stories/TimeField.stories.tsx
@@ -0,0 +1,21 @@
+import {TimeField} from '../src/TimeField';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof TimeField> = {
+  component: TimeField,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof TimeField>;
+
+export const Example: Story = (args) => <TimeField {...args} />;
+
+Example.args = {
+  label: 'Event time'
+};
diff --git a/starters/docs/stories/ToggleButton.stories.tsx b/starters/docs/stories/ToggleButton.stories.tsx
new file mode 100644
index 00000000000..efd128a500a
--- /dev/null
+++ b/starters/docs/stories/ToggleButton.stories.tsx
@@ -0,0 +1,18 @@
+import {ToggleButton} from '../src/ToggleButton';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof ToggleButton> = {
+  component: ToggleButton,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof ToggleButton>;
+
+export const Example: Story = (args) => <ToggleButton {...args}>Pin
+</ToggleButton>;
diff --git a/starters/docs/stories/ToggleButtonGroup.stories.tsx b/starters/docs/stories/ToggleButtonGroup.stories.tsx
new file mode 100644
index 00000000000..f9d79ebd34b
--- /dev/null
+++ b/starters/docs/stories/ToggleButtonGroup.stories.tsx
@@ -0,0 +1,24 @@
+import {ToggleButtonGroup} from '../src/ToggleButtonGroup';
+import {ToggleButton} from 'react-aria-components';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof ToggleButtonGroup> = {
+  component: ToggleButtonGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof ToggleButtonGroup>;
+
+export const Example: Story = (args) => (
+  <ToggleButtonGroup {...args}>
+    <ToggleButton id="left">Left</ToggleButton>
+    <ToggleButton id="center">Center</ToggleButton>
+    <ToggleButton id="right">Right</ToggleButton>
+  </ToggleButtonGroup>
+);
diff --git a/starters/docs/stories/Toolbar.stories.tsx b/starters/docs/stories/Toolbar.stories.tsx
new file mode 100644
index 00000000000..a1d72d462e7
--- /dev/null
+++ b/starters/docs/stories/Toolbar.stories.tsx
@@ -0,0 +1,53 @@
+import {Toolbar} from '../src/Toolbar';
+import {
+  Button,
+  Checkbox,
+  Group,
+  Separator,
+  ToggleButton
+} from 'react-aria-components';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Toolbar> = {
+  component: Toolbar,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof Toolbar>;
+
+export const Example: Story = (args) => (
+  <Toolbar aria-label="Text formatting" {...args}>
+    <Group aria-label="Style">
+      <ToggleButton aria-label="Bold">
+        <b>B</b>
+      </ToggleButton>
+      <ToggleButton aria-label="Italic">
+        <i>I</i>
+      </ToggleButton>
+      <ToggleButton aria-label="Underline">
+        <u>U</u>
+      </ToggleButton>
+    </Group>
+    <Separator orientation="vertical" />
+    <Group aria-label="Clipboard">
+      <Button>Copy</Button>
+      <Button>Paste</Button>
+      <Button>Cut</Button>
+    </Group>
+    <Separator orientation="vertical" />
+    <Checkbox>
+      <div className="checkbox">
+        <svg viewBox="0 0 18 18" aria-hidden="true">
+          <polyline points="1 9 7 14 15 4" />
+        </svg>
+      </div>
+      Night Mode
+    </Checkbox>
+  </Toolbar>
+);
diff --git a/starters/docs/stories/Tooltip.stories.tsx b/starters/docs/stories/Tooltip.stories.tsx
new file mode 100644
index 00000000000..d6fb5397738
--- /dev/null
+++ b/starters/docs/stories/Tooltip.stories.tsx
@@ -0,0 +1,25 @@
+import {Tooltip} from '../src/Tooltip';
+import {TooltipTrigger} from 'react-aria-components';
+import {Button} from '../src/Button';
+import {Save} from 'lucide-react';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof Tooltip>;
+
+export const Example: Story = (args) => (
+  <TooltipTrigger>
+    <Button><Save /></Button>
+    <Tooltip {...args}>Save</Tooltip>
+  </TooltipTrigger>
+);
diff --git a/starters/docs/stories/Tree.stories.tsx b/starters/docs/stories/Tree.stories.tsx
new file mode 100644
index 00000000000..aa041d95cff
--- /dev/null
+++ b/starters/docs/stories/Tree.stories.tsx
@@ -0,0 +1,34 @@
+import {Tree, TreeItem} from '../src/Tree';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+const meta: Meta<typeof Tree> = {
+  component: Tree,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryFn<typeof Tree>;
+
+export const Example: Story = (args) => (
+  <Tree aria-label="Files" {...args}>
+    <TreeItem title="Documents">
+      <TreeItem title="Project">
+        <TreeItem title="Weekly Report" />
+      </TreeItem>
+    </TreeItem>
+    <TreeItem title="Photos">
+      <TreeItem title="Image 1" />
+      <TreeItem title="Image 2" />
+    </TreeItem>
+  </Tree>
+);
+
+Example.args = {
+  style: { height: '300px' },
+  defaultExpandedKeys: ['documents', 'photos', 'project']
+};