Skip to content

fix: docs use client usage in examples #9595

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
snowystinger merged 1 commit into from
Feb 4, 2026
Merged

fix: docs use client usage in examples #9595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/react-aria/Slider.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ function Example() {
Set the `value` or `defaultValue` to an array of numbers to render multiple thumbs. Each thumb should have an `aria-label` to describe it for assistive technologies (provided via `thumbLabels` here).

```tsx render
"use client";
import {Slider} from 'vanilla-starter/Slider';

<Slider
Expand Down
2 changes: 2 additions & 0 deletions .../dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ Number fields can be used to represent many different types of numeric values, e
We use the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API built into browsers to handle all of these formatting requirements across all locales. Our number field component supports most of the formatting options that the Intl API supports, which ensures that it is international friendly and supports many common formatting options out of the box. The browser currently only provides formatting support, however, not parsing support, so we built a custom number parser using information from the formatter. We'll discuss how this works in detail later in the post.

```tsx render
"use client";
import {NumberField} from '@react-spectrum/s2';

<NumberField
Expand All @@ -70,6 +71,7 @@ Many number fields also support incrementing and decrementing their value using
One area of complexity here is dealing with floating point rounding errors. All JavaScript numbers are double precision floating point, which means when you add or subtract two numbers, you can get rounding errors. For example, `0.1 + 0.2 === 0.30000000000000004`. This isn't really what users expect, however, so to fix this, we determine how many decimal places there are, multiply to convert the two numbers to integers, perform the addition or subtraction, and then divide again to get a decimal. A similar fix is necessary to perform step snapping on blur.

```tsx render
"use client";
import {NumberField} from '@react-spectrum/s2';

<NumberField
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/react-aria/selection.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -868,6 +868,7 @@ import {TagGroup, Tag} from 'vanilla-starter/TagGroup';
```

```tsx render wide docs={docs.exports.Table} links={docs.links} props={['disabledBehavior']}
"use client";
import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table';

<Table
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/AvatarGroup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const description = 'A grouping of avatars that are related to each other
<PageDescription>{docs.exports.AvatarGroup.description}</PageDescription>

```tsx render docs={docs.exports.AvatarGroup} links={docs.links} props={['label', 'size']} initialProps={{'aria-label': 'Collaborators', label: '123 members'}} controlOptions={{size: {control: 'picker'}}} type="s2"
"use client";
import {AvatarGroup, Avatar} from '@react-spectrum/s2';

<AvatarGroup/* PROPS */>
Expand Down
3 changes: 2 additions & 1 deletion packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const description = 'Display a hierarchy of links to the current page or
<PageDescription>{docs.exports.Breadcrumbs.description}</PageDescription>

```tsx render docs={docs.exports.Breadcrumbs} links={docs.links} props={['size', 'isDisabled']} initialProps={{}} type="s2"
"use client";
import {Breadcrumbs, Breadcrumb} from '@react-spectrum/s2';

<Breadcrumbs/* PROPS */>
Expand Down Expand Up @@ -74,7 +75,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
padding: 16,
boxSizing: 'border-box',
borderWidth: 1,
borderStyle: 'solid',
borderStyle: 'solid',
borderColor: 'gray-300',
borderRadius: 'default',
resize: 'horizontal',
Expand Down
3 changes: 2 additions & 1 deletion packages/dev/s2-docs/pages/s2/ButtonGroup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const description = 'A grouping of buttons whose actions are related to e
<PageDescription>{docs.exports.ButtonGroup.description}</PageDescription>

```tsx render docs={docs.exports.ButtonGroup} links={docs.links} props={['orientation', 'align', 'size', 'isDisabled']} type="s2"
"use client";
import {ButtonGroup, Button} from '@react-spectrum/s2';

<ButtonGroup/* PROPS */>
Expand All @@ -37,7 +38,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
padding: 16,
boxSizing: 'border-box',
borderWidth: 1,
borderStyle: 'solid',
borderStyle: 'solid',
borderColor: 'gray-300',
borderRadius: 'default',
resize: 'horizontal',
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/Card.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ import Select from '@react-spectrum/s2/icons/Select';
Wrap a card in a [Skeleton](Skeleton) to display a loading state. Placeholder text content and images are displayed in a skeleton style.

```tsx render docs={docs.exports.Skeleton} links={docs.links} props={['isLoading']} initialProps={{isLoading: true}} type="s2" wide
"use client";
import {Skeleton, Card, CardPreview, Image, Content, Text} from '@react-spectrum/s2';

<Skeleton isLoading>
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const description = 'Allows a user to select one or more items in a list
<PageDescription>{docs.exports.CheckboxGroup.description}</PageDescription>

```tsx render docs={docs.exports.CheckboxGroup} links={docs.links} props={['label', 'size', 'orientation', 'labelPosition', 'description', 'contextualHelp', 'isEmphasized', 'isDisabled']} initialProps={{label: 'Favorite sports'}} type="s2"
"use client";
import {CheckboxGroup, Checkbox} from '@react-spectrum/s2';

<CheckboxGroup/* PROPS */>
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/ComboBox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const description = 'Combines a text input with a listbox, and allows a u
<PageDescription>{docs.exports.ComboBox.description}</PageDescription>

```tsx render docs={docs.exports.ComboBox} links={docs.links} props={['label', 'placeholder', 'size', 'labelPosition', 'description', 'contextualHelp', 'isDisabled']} initialProps={{label: 'Ice cream flavor', placeholder: 'Select a flavor'}} type="s2"
"use client";
import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';

<ComboBox/* PROPS */>
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/ContextualHelp.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const description = 'Shows extra information about an adjacent component.
<PageDescription>{docs.exports.ContextualHelp.description}</PageDescription>

```tsx render docs={docs.exports.ContextualHelp} links={docs.links} props={['variant', 'size', 'placement']} initialProps={{variant: 'help'}} type="s2"
"use client";
import {ContextualHelp, Heading, Content, Footer, Link} from '@react-spectrum/s2';

<ContextualHelp/* PROPS */>
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/Form.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export const description = 'Provides layout and alignment for a grouping of fiel


```tsx render docs={docs.exports.Form} links={docs.links} props={['size', 'labelPosition', 'labelAlign', 'necessityIndicator', 'isRequired', 'isDisabled', 'isEmphasized']} type="s2"
"use client";
import {Form, TextField, Checkbox, ButtonGroup, Button} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/Picker.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const description = 'Displays a collapsible list of options, and allows a
<PageDescription>{docs.exports.Picker.description}</PageDescription>

```tsx render docs={docs.exports.Picker} links={docs.links} props={['label', 'selectionMode', 'size', 'labelPosition', 'description', 'contextualHelp', 'isQuiet', 'isDisabled']} initialProps={{label: 'Ice cream flavor'}} type="s2"
"use client";
import {Picker, PickerItem} from '@react-spectrum/s2';

<Picker/* PROPS */>
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/RadioGroup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const description = 'Allows a user to select a single item from a list of
<PageDescription>{docs.exports.RadioGroup.description}</PageDescription>

```tsx render docs={docs.exports.RadioGroup} links={docs.links} props={['label', 'size', 'orientation', 'labelPosition', 'description', 'contextualHelp', 'isEmphasized', 'isDisabled']} initialProps={{label: 'Favorite pet'}} type="s2"
"use client";
import {RadioGroup, Radio} from '@react-spectrum/s2';

<RadioGroup/* PROPS */>
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/SegmentedControl.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const description = 'A mutually exclusive group of buttons used for view
<PageDescription>{docs.exports.SegmentedControl.description}</PageDescription>

```tsx render docs={docs.exports.SegmentedControl} links={docs.links} props={['isJustified', 'isDisabled']} initialProps={{'aria-label': 'Time granularity'}} type="s2" wide
"use client";
import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';

<SegmentedControl/* PROPS */>
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/TableView.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const description = 'Displays data in rows and columns, with row selectio
<PageDescription>{docs.exports.TableView.description}</PageDescription>

```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'overflowMode', 'density', 'isQuiet']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple'}} type="s2"
"use client";
import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/TagGroup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const description = 'Displays a list of items, with support for keyboard
<PageDescription>{docs.exports.TagGroup.description}</PageDescription>

```tsx render docs={docs.exports.TagGroup} links={docs.links} props={['label', 'selectionMode', 'size', 'labelPosition', 'maxRows', 'description', 'contextualHelp', 'isEmphasized']} initialProps={{label: 'Ice cream flavors', selectionMode: 'multiple', maxRows: 2}} controlOptions={{maxRows: {minValue: 1}}} type="s2"
"use client";
import {TagGroup, Tag} from '@react-spectrum/s2';

<TagGroup/* PROPS */>
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/TreeView.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const description = 'Displays hierarchical data with selection and collap
<PageDescription>{docs.exports.TreeView.description}</PageDescription>

```tsx render docs={docs.exports.TreeView} links={docs.links} props={['selectionMode']} initialProps={{selectionMode: 'multiple'}} type="s2" wide
"use client";
import {TreeView, TreeViewItem, TreeViewItemContent} from '@react-spectrum/s2';

<TreeView
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/forms.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const description = 'How to build accessible forms with validation.';
Accessible forms start with clear, descriptive labels for each field. Use the `label` prop to add a visible label to any field. Additional help text can also be added via the `description` prop. The label and help text are announced by screen readers when the field is focused.

```tsx render
"use client";
import {TextField} from '@react-spectrum/s2';

<TextField
Expand Down
1 change: 1 addition & 0 deletions packages/dev/s2-docs/pages/s2/selection.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1186,6 +1186,7 @@ import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice';
```

```tsx render wide type="s2"
"use client";
import {TableView, TableHeader, Column, Row, TableBody, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

Expand Down
1 change: 1 addition & 0 deletions packages/react-aria-components/docs/Tree.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,7 @@ A Tree consists of a container element, with items containing data inside. The i
If the tree supports item selection, each item can optionally include a selection checkbox.

```tsx render=false
"use client";
import {Tree, TreeItem, TreeItemContent, Button, Checkbox, SelectionIndicator} from 'react-aria-components';

<Tree>
Expand Down