Add more styled examples

packages/@react-aria/checkbox/docs/useCheckbox.mdx

@@ -18,6 +18,8 @@ import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescr
 import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/checkbox/package.json';
 import Anatomy from './checkbox-anatomy.svg';
+import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import tailwindPreview from 'url:./tailwind-example.png';
 
 ---
 category: Forms
@@ -165,6 +167,14 @@ function Checkbox(props) {
 <Checkbox>Foo</Checkbox>
 ```
 
+## Styled examples
+
+<ExampleCard
+  url="https://codesandbox.io/s/bold-river-0v44z6?file=/src/Checkbox.tsx"
+  preview={tailwindPreview}
+  title="Tailwind CSS"
+  description="An animated Checkbox built with Tailwind and React Aria." />
+
 ## Internationalization
 
 ### RTL

packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx

@@ -18,6 +18,8 @@ import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescr
 import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/checkbox/package.json';
 import Anatomy from './checkboxgroup-anatomy.svg';
+import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import buttongroupPreview from 'url:./buttongroup-example.png';
 
 ---
 category: Forms
@@ -148,3 +150,11 @@ function Checkbox(props) {
 ## Styling
 
 See the [useCheckbox](useCheckbox.html#styling) docs for details on how to customize the styling of checkbox elements.
+
+## Styled examples
+
+<ExampleCard
+  url="https://codesandbox.io/s/magical-bose-l7z36b?file=/src/ButtonGroup.js"
+  preview={buttongroupPreview}
+  title="Button Group"
+  description="A multi-selectable segmented ButtonGroup component." />

packages/@react-aria/meter/docs/useMeter.mdx

@@ -14,6 +14,8 @@ import docs from 'docs:@react-aria/meter';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, PageDescription} from '@react-spectrum/docs';
 import packageData from '@react-aria/meter/package.json';
 import Anatomy from './anatomy.svg';
+import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import circularPreview from 'url:./circular-example.png';
 
 ---
 category: Status
@@ -117,6 +119,14 @@ function Meter(props) {
   maxValue={1000} />
 ```
 
+## Styled examples
+
+<ExampleCard
+  url="https://codesandbox.io/s/lucid-jackson-xj8pok?file=/src/App.js"
+  preview={circularPreview}
+  title="Circular Gauge"
+  description="A circular meter built with SVG." />
+
 ## Internationalization
 
 ### Value formatting

packages/@react-aria/radio/docs/useRadioGroup.mdx

@@ -18,6 +18,10 @@ import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescr
 import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/radio/package.json';
 import Anatomy from './anatomy.svg';
+import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import buttongroupPreview from 'url:./buttongroup-example.png';
+import cardPreview from 'url:./card-example.png';
+import swatchPreview from 'url:./swatch-example.png';
 
 ---
 category: Forms
@@ -216,6 +220,26 @@ function Radio(props) {
 </RadioGroup>
 ```
 
+## Styled examples
+
+<ExampleCard
+  url="https://codesandbox.io/s/bold-wood-pxm478?file=/src/SwatchGroup.tsx"
+  preview={swatchPreview}
+  title="Swatch Group"
+  description="A color swatch picker built with Tailwind CSS." />
+
+<ExampleCard
+  url="https://codesandbox.io/s/recursing-night-pu6w2g?file=/src/CardGroup.tsx"
+  preview={cardPreview}
+  title="Selectable Cards"
+  description="A selectable card group built with Styled Components." />
+
+<ExampleCard
+  url="https://codesandbox.io/s/epic-faraday-qoiy0l?file=/src/ButtonGroup.js"
+  preview={buttongroupPreview}
+  title="Button Group"
+  description="A single-selectable segmented button group." />
+
 ## Internationalization
 
 ### RTL

packages/@react-aria/tabs/docs/useTabList.mdx

@@ -16,6 +16,9 @@ import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescr
 import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/tabs/package.json';
 import Anatomy from './anatomy.svg';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
+import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import animatedPreview from 'url:./animated-example.png';
 
 ---
 category: Navigation
@@ -159,6 +162,14 @@ This example uses the same `Tabs` component from above. Try navigating from the
 </Tabs>
 ```
 
+## Styled examples
+
+<ExampleCard
+  url="https://codesandbox.io/s/practical-monad-punzo?file=/src/Tabs.js"
+  preview={animatedPreview}
+  title="Animated Selection"
+  description="A TabList component with an animated selection indicator." />
+
 ## Internationalization
 
 `useTabList` handles some aspects of internationalization automatically. For example, keyboard navigation is automatically mirrored for right-to-left languages. You are responsible for localizing all tab labels and content.