Add more styled examples (#3280)

Author: devongovett

packages/@react-aria/checkbox/docs/buttongroup-example.png

@@ -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/tailwind-example.png

@@ -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/checkbox/docs/useCheckbox.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/checkbox/docs/useCheckboxGroup.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