iTwinUI

https://itwinui.bentley.com/
Admin
iTwinUI delivers common UI components and UI layouts bundled with accessibility best practices,...
Tokens:138,159
Snippets:1,158
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Basic Combobox Usage with Options

Source: https://itwinui.bentley.com/docs/combobox

Demonstrates how to use the Combobox component with a predefined list of options. This example shows a typical setup for selecting a country from a list.

```jsx
const options = [
    { label: 'Sierra Leone', value: 'SL' },
    { label: 'Singapore', value: 'SG' },
    { label: 'Slovakia', value: 'SK' },
    { label: 'Slovenia', value: 'SI' },
    { label: 'Solomon Islands', value: 'SB' },
    { label: 'Somalia', value: 'SO' },
    { label: 'South Africa', value: 'ZA' },
    { label: 'South Georgia and the South Sandwich Islands', value: 'GS' },
    { label: 'Spain', value: 'ES' },
    { label: 'Sri Lanka', value: 'LK' },
    { label: 'Sudan', value: 'SD' },
    { label: 'Surilabel', value: 'SR' },
    { label: 'Svalbard and Jan Mayen', value: 'SJ' },
    { label: 'Swaziland', value: 'SZ' },
    { label: 'Sweden', value: 'SE' },
    { label: 'Switzerland', value: 'CH' },
    { label: 'Syrian Arab Republic', value: 'SY' },
    { label: 'Taiwan, Province of China', value: 'TW' },
    { label: 'Tajikistan', value: 'TJ' },
    { label: 'Tanzania, United Republic of', value: 'TZ' },
    { label: 'Thailand', value: 'TH' },
    { label: 'Timor-Leste', value: 'TL' },
    { label: 'Togo', value: 'TG' },
    { label: 'Tokelau', value: 'TK' },
    { label: 'Tonga', value: 'TO' },
    { label: 'Trinidad and Tobago', value: 'TT' },
    { label: 'Tunisia', value: 'TN' },
    { label: 'Turkey', value: 'TR' },
    { label: 'Turkmenistan', value: 'TM' },
    { label: 'Turks and Caicos Islands', value: 'TC' },
    { label: 'Tuvalu', value: 'TV' },
    { label: 'Uganda', value: 'UG' },
    { label: 'Ukraine', value: 'UA' },
    { label: 'United Arab Emirates', value: 'AE' },
    { label: 'United Kingdom', value: 'GB' },
    { label: 'United States', value: 'US' },
    { label: 'United States Minor Outlying Islands', value: 'UM' },
    { label: 'Uruguay', value: 'UY' },
    { label: 'Uzbekistan', value: 'UZ' },
    { label: 'Vanuatu', value: 'VU' },
    { label: 'Venezuela', value: 'VE' },
    { label: 'Viet Nam', value: 'VN' },
    { label: 'Virgin Islands, British', value: 'VG' },
    { label: 'Virgin Islands, U.S.', value: 'VI' },
    { label: 'Wallis and Futuna', value: 'WF' },
    { label: 'Western Sahara', value: 'EH' },
    { label: 'Yemen', value: 'YE' },
    { label: 'Zambia', value: 'ZM' },
    { label: 'Zimbabwe', value: 'ZW' },
  ];

  return (
    <ComboBox
      options={options}
      inputProps={{ placeholder: 'Select a country' }}
      onChange={setValue}
      value={value}
      enableVirtualization
    />
  );
};
```

--------------------------------

### Dropdown Menu with Start Icons

Source: https://itwinui.bentley.com/docs/dropdownmenu

This example demonstrates how to add start icons to menu items for better visualization. Each menu item includes an icon on its left side.

```javascript
import * as React from 'react';
import { MenuItem, DropdownMenu, IconButton } from '@itwin/itwinui-react';
import {
  SvgMore,
  SvgCrop,
  SvgClipboard,
  SvgMove,
} from '@itwin/itwinui-icons-react';

export default () => {
  const dropdownMenuItems = (close) => [
    <MenuItem key={1} onClick={() => close()} startIcon={<SvgCrop />}>
      Crop
    </MenuItem>,
    <MenuItem key={2} onClick={() => close()} startIcon={<SvgClipboard />}>
      Paste
    </MenuItem>,
    <MenuItem key={3} onClick={() => close()} startIcon={<SvgMove />}>
      Move
    </MenuItem>,
  ];

  return (
    <>
      <DropdownMenu menuItems={dropdownMenuItems}>
        <IconButton aria-label='More options'>
          <SvgMore />
        </IconButton>
      </DropdownMenu>
    </>
  );
};
```

--------------------------------

### Virtualization Example for Tree Component

Source: https://itwinui.bentley.com/docs/tree

This example demonstrates how to implement virtualization for a large dataset in the Tree component. It includes functions for generating tree data and nodes, and rendering the Tree with virtualization enabled.

```javascript
const generateItem = React.useCallback(
    (index, parentNode = '', depth = 0) => {
      const keyValue = parentNode ? `${parentNode}-${index}` : `${index}`;
      return {
        id: `Node-${keyValue}`,
        label: `Node ${keyValue}`,
        sublabel: `Sublabel for Node ${keyValue}`,
        subItems:
          depth < 10
            ? Array(Math.round(index % 5))
                .fill(null)
                .map((_, index) => generateItem(index, keyValue, depth + 1))
            : [],
      };
    },
    [],
  );

  const data = React.useMemo(
    () =>
      Array(10000)
        .fill(null)
        .map((_, index) => generateItem(index)),
    [generateItem],
  );

  const getNode = React.useCallback(
    (node) => {
      return {
        subNodes: node.subItems,
        nodeId: node.id,
        node: node,
        isExpanded: expandedNodes[node.id],
        hasSubNodes: node.subItems.length > 0,
      };
    },
    [expandedNodes],
  );

  return (
    <Tree
      className='demo-tree'
      style={{ height: '400px' }}
      data={data}
      getNode={getNode}
      enableVirtualization
      nodeRenderer={React.useCallback(
        ({ node, ...rest }) => (
          <TreeNode label={node.label} onExpanded={onNodeExpanded} {...rest} />
        ),
        [onNodeExpanded],
      )}
    />
  );
};
```

--------------------------------

### Basic Badge Example

Source: https://itwinui.bentley.com/docs/badge

A simple example of how to render a basic Badge component with a custom background color.

```javascript
import * as React from 'react';
import { Badge } from '@itwin/itwinui-react';

export default () => {
  return <Badge backgroundColor='skyblue'>Badge</Badge>;
};
```

--------------------------------

### Combobox Options Loading Example

Source: https://itwinui.bentley.com/docs/combobox

This example demonstrates how to populate a Combobox with a large list of options, such as countries. Ensure the data is correctly formatted as an array of objects with 'label' and 'value' properties.

```javascript
{ label: 'Mali', value: 'ML' },
      { label: 'Malta', value: 'MT' },
      { label: 'Marshall Islands', value: 'MH' },
      { label: 'Martinique', value: 'MQ' },
      { label: 'Mauritania', value: 'MR' },
      { label: 'Mauritius', value: 'MU' },
      { label: 'Mayotte', value: 'YT' },
      { label: 'Mexico', value: 'MX' },
      { label: 'Micronesia, Federated States of', value: 'FM' },
      { label: 'Moldova, Republic of', value: 'MD' },
      { label: 'Monaco', value: 'MC' },
      { label: 'Mongolia', value: 'MN' },
      { label: 'Montserrat', value: 'MS' },
      { label: 'Morocco', value: 'MA' },
      { label: 'Mozambique', value: 'MZ' },
      { label: 'Myanmar', value: 'MM' },
      { label: 'Namibia', value: 'NA' },
      { label: 'Nauru', value: 'NR' },
      { label: 'Nepal', value: 'NP' },
      { label: 'Netherlands', value: 'NL' },
      { label: 'Netherlands Antilles', value: 'AN' },
      { label: 'New Caledonia', value: 'NC' },
      { label: 'New Zealand', value: 'NZ' },
      { label: 'Nicaragua', value: 'NI' },
      { label: 'Niger', value: 'NE' },
      { label: 'Nigeria', value: 'NG' },
      { label: 'Niue', value: 'NU' },
      { label: 'Norfolk Island', value: 'NF' },
      { label: 'Northern Mariana Islands', value: 'MP' },
      { label: 'Norway', value: 'NO' },
      { label: 'Oman', value: 'OM' },
      { label: 'Pakistan', value: 'PK' },
      { label: 'Palau', value: 'PW' },
      { label: 'Palestinian Territory, Occupied', value: 'PS' },
      { label: 'Panama', value: 'PA' },
      { label: 'Papua New Guinea', value: 'PG' },
      { label: 'Paraguay', value: 'PY' },
      { label: 'Peru', value: 'PE' },
      { label: 'Philippines', value: 'PH' },
      { label: 'Pitcairn', value: 'PN' },
      { label: 'Poland', value: 'PL' },
      { label: 'Portugal', value: 'PT' },
      { label: 'Puerto Rico', value: 'PR' },
      { label: 'Qatar', value: 'QA' },
      { label: 'Reunion', value: 'RE' },
      { label: 'Romania', value: 'RO' },
      { label: 'Russian Federation', value: 'RU' },
      { label: 'RWANDA', value: 'RW' },
      { label: 'Saint Helena', value: 'SH' },
      { label: 'Saint Kitts and Nevis', value: 'KN' },
      { label: 'Saint Lucia', value: 'LC' },
      { label: 'Saint Pierre and Miquelon', value: 'PM' },
      { label: 'Saint Vincent and the Grenadines', value: 'VC' },
      { label: 'Samoa', value: 'WS' },
      { label: 'San Marino', value: 'SM' },
      { label: 'Sao Tome and Principe', value: 'ST' },
      { label: 'Saudi Arabia', value: 'SA' },
      { label: 'Senegal', value: 'SN' },
      { label: 'Serbia and Montenegro', value: 'CS' },
      { label: 'Seychelles', value: 'SC' },
      { label: 'Sierra Leone', value: 'SL' },
      { label: 'Singapore', value: 'SG' },
      { label: 'Slovakia', value: 'SK' },
      { label: 'Slovenia', value: 'SI' },
      { label: 'Solomon Islands', value: 'SB' },
      { label: 'Somalia', value: 'SO' },
      { label: 'South Africa', value: 'ZA' },
      { label: 'South Georgia and the South Sandwich Islands', value: 'GS' },
      { label: 'Spain', value: 'ES' },
      { label: 'Sri Lanka', value: 'LK' },
      { label: 'Sudan', value: 'SD' },
      { label: 'Surilabel', value: 'SR' },
      { label: 'Svalbard and Jan Mayen', value: 'SJ' },
      { label: 'Swaziland', value: 'SZ' },
      { label: 'Sweden', value: 'SE' },
      { label: 'Switzerland', value: 'CH' },
      { label: 'Syrian Arab Republic', value: 'SY' },
      { label: 'Taiwan, Province of China', value: 'TW' },
      { label: 'Tajikistan', value: 'TJ' },
      { label: 'Tanzania, United Republic of', value: 'TZ' },
      { label: 'Thailand', value: 'TH' },
      { label: 'Timor-Leste', value: 'TL' },
      { label: 'Togo', value: 'TG' },
      { label: 'Tokelau', value: 'TK' },
      { label: 'Tonga', value: 'TO' },
      { label: 'Trinidad and Tobago', value: 'TT' },
      { label: 'Tunisia', value: 'TN' },
      { label: 'Turkey', value: 'TR' },
      { label: 'Turkmenistan', value: 'TM' },
      { label: 'Turks and Caicos Islands', value: 'TC' },
      { label: 'Tuvalu', value: 'TV' },
      { label: 'Uganda', value: 'UG' },
      { label: 'Ukraine', value: 'UA' },
      { label: 'United Arab Emirates', value: 'AE' },
      { label: 'United Kingdom', value: 'GB' },
      { label: 'United States', value: 'US' },
      { label: 'United States Minor Outlying Islands', value: 'UM' },
      { label: 'Uruguay', value: 'UY' },
      { label: 'Uzbekistan', value: 'UZ' },
      { label: 'Vanuatu', value: 'VU' },
      { label: 'Venezuela', value: 'VE' },
      { label: 'Viet Nam', value: 'VN' },
      { label: 'Virgin Islands, British', value: 'VG' },
      { label: 'Virgin Islands, U.S.', value: 'VI' },
      { label: 'Wallis and Futuna', value: 'WF' },
      { label: 'Western Sahara', value: 'EH' },
      { label: 'Yemen', value: 'YE' },
      { label: 'Zambia', value: 'ZM' },
      { label: 'Zimbabwe', value: 'ZW' }
```

--------------------------------

### Tile with Status Example

Source: https://itwinui.bentley.com/docs/tile

Demonstrates how to apply status indicators (positive, warning, negative) to a tile.

```javascript
import * as React from 'react';
import { Tile, MenuItem } from '@itwin/itwinui-react';
import { SvgImodelHollow } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <Tile.Wrapper status='positive'>
      <Tile.Name name='Positive Tile' />
      <Tile.ThumbnailArea>
        <Tile.ThumbnailPicture>
          <SvgImodelHollow />
        </Tile.ThumbnailPicture>
      </Tile.ThumbnailArea>
      <Tile.ContentArea>
        <Tile.Description>Description</Tile.Description>
        <Tile.MoreOptions>
          <MenuItem key={1}>Item 1</MenuItem>
          <MenuItem key={2}>Item 2</MenuItem>
        </Tile.MoreOptions>
        <Tile.Metadata>
          <span>Tile with status</span>
        </Tile.Metadata>
      </Tile.ContentArea>
    </Tile.Wrapper>
  );
};
```

--------------------------------

### Basic Panels Example

Source: https://itwinui.bentley.com/docs/panels

Demonstrates a basic two-panel UI where one panel triggers the display of another. This example uses Surface components for panel structure.

```jsx
import * as React from 'react';
import {
  unstable_Panels as Panels,
  List,
  ListItem,
  Surface,
  Text,
} from '@itwin/itwinui-react';

export default () => {
  const panelIdRoot = 'root';
  const panelIdMoreInfo = 'more-info';

  return (
    <Panels.Wrapper as={Surface} className='demo-panels-wrapper'>
      <Panels.Panel id={panelIdRoot}>
        <Surface.Header as={Panels.Header}>Root</Surface.Header>
        <Surface.Body as={List}>
          <ListItem>
            <Panels.Trigger for={panelIdMoreInfo}>
              <ListItem.Action>More details</ListItem.Action>
            </Panels.Trigger>
          </ListItem>
        </Surface.Body>
      </Panels.Panel>

      <Panels.Panel id={panelIdMoreInfo}>
        <Surface.Header as={Panels.Header}>More details</Surface.Header>
        <Surface.Body isPadded>
          <Text>Content</Text>
        </Surface.Body>
      </Panels.Panel>
    </Panels.Wrapper>
  );
};
```

--------------------------------

### Multi-panel Information Panel Example

Source: https://itwinui.bentley.com/docs/panels

This example showcases a multi-panel layout where a root panel contains triggers to open other panels. Each panel has a header, body with content, and a footer, demonstrating navigation between panels.

```jsx
import * as React from 'react';
import {
  unstable_Panels as Panels,
  List,
  ListItem,
  Flex,
  Surface,
  Text,
  Divider,
} from '@itwin/itwinui-react';

export default () => {
  const initialActiveId = 'root';

  const panels = Array.from(Array(20).keys()).map((i) => ({
    id: `panel-${i}`,
    label: `Panel ${i}`,
  }));

  return (
    <Panels.Wrapper as={Surface} className='demo-panels-wrapper'>
      <Panels.Panel
        id={initialActiveId}
        as={Flex}
        flexDirection='column'
        alignItems='stretch'
        gap='0'
      >
        <Surface.Header as={Panels.Header}>Root</Surface.Header>
        <Surface.Body as={List}>
          {panels.map((panel) => (
            <ListItem key={panel.id}>
              <ListItem.Content>
                <Panels.Trigger for={`${panel.id}`}> 
                  <ListItem.Action>{panel.label}</ListItem.Action>
                </Panels.Trigger>
              </ListItem.Content>
            </ListItem>
          ))}
        </Surface.Body>
      </Panels.Panel>

      {panels.map((panel) => (
        <Panels.Panel
          as={Flex}
          key={panel.id}
          id={panel.id}
          flexDirection='column'
          alignItems='stretch'
        >
          <Surface.Header as={Panels.Header}>{panel.label}</Surface.Header>
          <Surface.Body as={Flex} flexDirection='column'>
            <Text>{`Content for ${panel.id}`}</Text>
            <Flex.Spacer />
            <Divider />
            <Text>{`Footer for ${panel.id}`}</Text>
          </Surface.Body>
        </Panels.Panel>
      ))}
    </Panels.Wrapper>
  );
};
```

--------------------------------

### Basic Input with Decorations

Source: https://itwinui.bentley.com/docs/inputwithdecorations

Demonstrates adding an icon and a button to an input field. Ensure '@itwin/itwinui-react' and '@itwin/itwinui-icons-react' are installed.

```javascript
import * as React from 'react';
import { InputWithDecorations, Icon } from '@itwin/itwinui-react';
import { SvgStar, SvgInfo } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <InputWithDecorations>
      <InputWithDecorations.Icon>
        <SvgInfo />
      </InputWithDecorations.Icon>
      <InputWithDecorations.Input placeholder='Input with decorations' />
      <InputWithDecorations.Button label='Icon button'>
        <SvgStar />
      </InputWithDecorations.Button>
    </InputWithDecorations>
  );
};

```

--------------------------------

### Install iTwinUI React

Source: https://itwinui.bentley.com/docs

Use npm to add the iTwinUI React package to your project. This is the first step to using iTwinUI components.

```bash
npm add @itwin/itwinui-react
```

--------------------------------

### Multi-level List Navigation Example

Source: https://itwinui.bentley.com/docs/panels

This example demonstrates a complex multi-level navigation structure using the Panels API, including nested lists for settings like quality, speed, and accessibility.

```jsx
import * as React from 'react';
import {
  unstable_Panels as Panels,
  List,
  ListItem,
  Surface,
  ToggleSwitch,
  Flex,
} from '@itwin/itwinui-react';

export default () => {
  const initialActiveId = React.useId();
  const qualityPanelId = React.useId();
  const speedPanelId = React.useId();
  const accessibilityPanelId = React.useId();

  const [repeat, setRepeat] = React.useState(false);
  const [quality, setQuality] = React.useState('240p');
  const [speed, setSpeed] = React.useState('1.0x');
  const [accessibilityOptions, setAccessibilityOptions] = React.useState([]);

  const panels = Panels.useInstance();

  const _Item = React.useCallback(
    ({ content, state, setState }) => {
      const selected = state === content;

      return (
        <ListItem
          active={selected}
          aria-selected={selected}
          onClick={() => {
            panels.goBack();
          }}
        >
          <ListItem.Action onClick={() => setState(content)}>
            {content}
          </ListItem.Action>
          <ListItem.Icon />
        </ListItem>
      );
    },
    [panels],
  );

  const _ItemQuality = React.useCallback(
    ({ content }) => (
      <_Item content={content} state={quality} setState={setQuality} />
    ),
    [_Item, quality],
  );

  const _ItemSpeed = React.useCallback(
    ({ content }) => (
      <_Item content={content} state={speed} setState={setSpeed} />
    ),
    [_Item, speed],
  );

  const _ItemAccessibility = React.useCallback(
    ({ content }) => (
      <_Item
        content={content}
        state={accessibilityOptions.includes(content) ? content : ''}
        setState={() => {
          setAccessibilityOptions((prev) =>
            prev.includes(content)
              ? prev.filter((item) => item !== content)
              : [...prev, content],
          );
        }}
      />
    ),
    [_Item, accessibilityOptions],
  );

  const qualities = React.useMemo(
    () => ['240p', '360p', '480p', '720p', '1080p'],
    [],
  );

  const speeds = React.useMemo(
    () => Array.from({ length: 21 }, (_, i) => (i * 0.1).toFixed(1) + 'x'),
    [],
  );

  const toggleSwitchId = React.useId();

  return (
    <>
      <Panels.Wrapper
        instance={panels}
        as={Surface}
        className='demo-panels-wrapper'
      >
        <Panels.Panel id={initialActiveId}>
          <List>
            <ListItem>
              <ListItem.Content as='label' htmlFor={toggleSwitchId}>
                Repeat
              </ListItem.Content>
              <ToggleSwitch
                id={toggleSwitchId}
                onChange={(e) => setRepeat(e.target.checked)}
                checked={repeat}
              />
            </ListItem>
            <ListItem>
              <Panels.Trigger for={qualityPanelId}>
                <ListItem.Action>Quality</ListItem.Action>
              </Panels.Trigger>
            </ListItem>
            <ListItem>
              <Panels.Trigger for={speedPanelId}>
                <ListItem.Action>Speed</ListItem.Action>
              </Panels.Trigger>
            </ListItem>
            <ListItem>
              <Panels.Trigger for={accessibilityPanelId}>
                <ListItem.Action>Accessibility</ListItem.Action>
              </Panels.Trigger>
            </ListItem>
          </List>
        </Panels.Panel>

```

--------------------------------

### Basic LabeledSelect Example

Source: https://itwinui.bentley.com/docs/select

Demonstrates the basic usage of LabeledSelect with a label, help message, and placeholder.

```javascript
import * as React from 'react';
import { LabeledSelect } from '@itwin/itwinui-react';

export default () => {
  return (
    <>
      <LabeledSelect
        label='Select label'
        message='Help message'
        placeholder='Labeled select'
        options={[
          { value: 1, label: 'Item #1' },
          { value: 2, label: 'Item #2' },
          { value: 3, label: 'Item #3' },
        ]}
      />
    </>
  );
};
```

--------------------------------

### Basic SearchBox Example

Source: https://itwinui.bentley.com/docs/searchbox

A simple SearchBox with a placeholder. Use inputProps to configure the underlying input element.

```javascript
import * as React from 'react';
import { SearchBox } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <SearchBox inputProps={{ placeholder: 'SearchBox component' }} />
    </div>
  );
};
```

--------------------------------

### Folder Tile Example

Source: https://itwinui.bentley.com/docs/tile

A distinct tile variant for folders, featuring a unique visual appearance, metadata, and a more options menu.

```javascript
import * as React from 'react';
import { Tile, MenuItem } from '@itwin/itwinui-react';
import { SvgFolder } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <Tile.Wrapper variant='folder'>
      <Tile.ThumbnailArea>
        <Tile.ThumbnailPicture>
          <SvgFolder />
        </Tile.ThumbnailPicture>
      </Tile.ThumbnailArea>
      <Tile.Name name='Folder Name' />
      <Tile.ContentArea>
        <Tile.Description>Folder description</Tile.Description>
        <Tile.MoreOptions>
          <MenuItem key={1}>Item 1</MenuItem>
          <MenuItem key={2}>Item 2</MenuItem>
        </Tile.MoreOptions>
        <Tile.Metadata>
          <span>Folder metadata</span>
        </Tile.Metadata>
      </Tile.ContentArea>
    </Tile.Wrapper>
  );
};
```

--------------------------------

### Basic Labeled Input Example

Source: https://itwinui.bentley.com/docs/input

Demonstrates a basic LabeledInput with a label, placeholder, and hint message. Ensure you import React and LabeledInput from '@itwin/itwinui-react'.

```javascript
import * as React from 'react';
import { LabeledInput } from '@itwin/itwinui-react';

export default () => {
  return (
    <>
      <LabeledInput
        label='Label'
        placeholder='Placeholder'
        message='Hint message'
      />
    </>
  );
};

```

--------------------------------

### Basic ComboBox Example

Source: https://itwinui.bentley.com/docs/combobox

A simple ComboBox with a list of fruits. It uses placeholder text for user guidance.

```javascript
import * as React from 'react';
import { ComboBox } from '@itwin/itwinui-react';

export default () => {
  const options = React.useMemo(
    () => [
      { label: 'Apple', value: 'apple' },
      { label: 'Banana', value: 'banana' },
      { label: 'Grapefruit', value: 'grapefruit' },
      { label: 'Lychee', value: 'lychee' },
      { label: 'Kiwi', value: 'kiwi' },
      { label: 'Orange', value: 'orange' },
    ],
    [],
  );

  return (
    <ComboBox
      options={options}
      inputProps={{ placeholder: 'Pick a fruit, any fruit' }}
    />
  );
};
```

--------------------------------

### Condensed Tile Example

Source: https://itwinui.bentley.com/docs/tile

A minimal tile variant showing only the title, thumbnail, and a more options menu.

```javascript
import * as React from 'react';
import { Tile, MenuItem } from '@itwin/itwinui-react';
import { SvgImodelHollow } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <Tile.Wrapper>
      <Tile.Name name='Condensed' />
      <Tile.ThumbnailArea>
        <Tile.ThumbnailPicture>
          <SvgImodelHollow />
        </Tile.ThumbnailPicture>
      </Tile.ThumbnailArea>
      <Tile.ContentArea>
        <Tile.MoreOptions>
          <MenuItem key={1}>Item 1</MenuItem>
          <MenuItem key={2}>Item 2</MenuItem>
        </Tile.MoreOptions>
      </Tile.ContentArea>
    </Tile.Wrapper>
  );
};
```

--------------------------------

### Programmatic Panel Control with useInstance

Source: https://itwinui.bentley.com/docs/panels

Shows how to control the Panels state programmatically using the useInstance hook. This example includes a button to navigate back.

```jsx
const panels = Panels.useInstance();


<Button onClick={() => panels.goBack()}>Go back</Button>
<Panels.Wrapper instance={panels}>{/* … */}</Panels.Wrapper>;
```

--------------------------------

### Full Page Dialog Example

Source: https://itwinui.bentley.com/docs/dialog

Implement a full-page dialog for settings or pages that occupy the entire screen. The 'styleType' prop should be set to 'fullPage'.

```javascript
import * as React from 'react';
import {
  Modal,
  Button,
  ModalContent,
  ModalButtonBar,
  LabeledInput,
  LabeledTextarea,
} from '@itwin/itwinui-react';

export default () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Button styleType='high-visibility' onClick={() => setIsOpen(true)}>
        Open full page dialog
      </Button>
      <Modal
        isOpen={isOpen}
        title={'New message'}
        styleType='fullPage'
        onClose={() => setIsOpen(false)}
      >
        <ModalContent>
          <LabeledInput label='Subject' />
          <LabeledTextarea label='Message' />
        </ModalContent>
        <ModalButtonBar>
          <Button styleType='high-visibility' onClick={() => setIsOpen(false)}>
            Submit
          </Button>
          <Button onClick={() => setIsOpen(false)}>Save draft</Button>
        </ModalButtonBar>
      </Modal>
    </>
  );
};
```

--------------------------------

### Alert Composition API Example

Source: https://itwinui.bentley.com/docs/alert

Shows how to build an alert using the composition API with a 'positive' type. This pattern is recommended for flexibility.

```jsx
<Alert.Wrapper type='positive'>
  <Alert.Icon />
  <Alert.Message>
    This is an alert
    <Alert.Action onClick={() => console.log('Clicked more info!')}>Learn more</Alert.Action>
  </Alert.Message>
  <Alert.CloseButton onClick={() => console.log('CLOSED')} />
</Alert.Wrapper>
```

--------------------------------

### Basic List Example

Source: https://itwinui.bentley.com/docs/list

A simple list displaying three basic list items. This demonstrates the fundamental usage of the List and ListItem components.

```javascript
import * as React from 'react';
import { List, ListItem } from '@itwin/itwinui-react';

export default () => {
  return (
    <List>
      <ListItem>Milk</ListItem>
      <ListItem>Cheese</ListItem>
      <ListItem>Yogurt</ListItem>
    </List>
  );
};
```

--------------------------------

### Alert Legacy API Example

Source: https://itwinui.bentley.com/docs/alert

Illustrates an equivalent alert using the legacy API. While functional, the composition API is preferred for future flexibility.

```jsx
<Alert
  type='positive'
  clickableText='Learn More'
  onClose={() => console.log('CLOSED')}
  clickableTextProps={{
    onClick={() => console.log('Clicked more info!')},
  }}
></Alert>
```

--------------------------------

### Selected Tile Example

Source: https://itwinui.bentley.com/docs/tile

Demonstrates how to render a Tile that is in a selected state. Use the `isSelected` prop to control the selection. This is useful for enabling bulk actions.

```jsx
import * as React from 'react';
import { Tile, Badge } from '@itwin/itwinui-react';

export default () => {
  const [selected, setSelected] = React.useState(true);
  return (
    <Tile.Wrapper isSelected={selected}>
      <Tile.Name>
        <Tile.NameIcon />
        <Tile.NameLabel>
          <Tile.Action onClick={() => setSelected((prev) => !prev)}>
            Selected Tile
          </Tile.Action>
        </Tile.NameLabel>
      </Tile.Name>
      <Tile.ThumbnailArea>
        <Tile.ThumbnailPicture url='https://itwinplatformcdn.azureedge.net/iTwinUI/stadium.png' />
        <Tile.BadgeContainer>
          <Badge backgroundColor='skyblue'>Badge</Badge>
        </Tile.BadgeContainer>
      </Tile.ThumbnailArea>
      <Tile.ContentArea>
        <Tile.Description>This tile is selected.</Tile.Description>
      </Tile.ContentArea>
    </Tile.Wrapper>
  );
};
```

--------------------------------

### Basic Toggle Switch Usage

Source: https://itwinui.bentley.com/docs/toggleswitch

Demonstrates the basic implementation of ToggleSwitch with different checked states and disabled options. Ensure '@itwin/itwinui-react' is installed.

```jsx
import * as React from 'react';
import { ToggleSwitch } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <ToggleSwitch label='Option 1' defaultChecked={true} />
      <ToggleSwitch label='Option 2' defaultChecked={false} />
      <ToggleSwitch label='Option 3' defaultChecked={true} disabled />
      <ToggleSwitch label='Option 4' defaultChecked={false} disabled />
    </div>
  );
};

```

--------------------------------

### Set Up ThemeProvider and Styles

Source: https://itwinui.bentley.com/docs

Wrap your application's entry point with ThemeProvider and import the global styles. This ensures consistent theming across all iTwinUI components.

```jsx
import { ThemeProvider } from '@itwin/itwinui-react';
import '@itwin/itwinui-react/styles.css';


export default function App() {
  return (
    <ThemeProvider>
      <>{/* Your components go here. */}</>
    </ThemeProvider>
  );
}
```

--------------------------------

### Configure Table with Pagination and Data

Source: https://itwinui.bentley.com/docs/table

This example demonstrates a fully configured Table with pagination, custom data, and columns. It utilizes `useCallback` and `useMemo` for performance optimization.

```javascript
import * as React from 'react';
import { Table, TablePaginator } from '@itwin/itwinui-react';

export default () => {
  const generateItem = React.useCallback((index, parentRow = '') => {
    const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`;
    return {
      product: `Product ${keyValue}`,
      price: ((index % 10) + 1) * 15,
    };
  }, []);

  const data = React.useMemo(
    () =>
      Array(100)
        .fill(null)
        .map((_, index) => generateItem(index)),
    [generateItem],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
      },
    ],
    [],
  );

  const pageSizeList = React.useMemo(() => [10, 25, 50], []);
  const paginator = React.useCallback(
    (props) => <TablePaginator {...props} pageSizeList={pageSizeList} />,
    [pageSizeList],
  );

  return (
    <div className='demo-container'>
      <Table
        caption='Products'
        columns={columns}
        emptyTableContent='No data.'
        data={data}
        pageSize={50}
        density='condensed'
        paginatorRenderer={paginator}
        style={{ height: '300px' }}
      />
    </div>
  );
};
```

--------------------------------

### List with Subcomponents and Large Size

Source: https://itwinui.bentley.com/docs/list

Demonstrates using ListItem subcomponents like Icon and Description, along with the 'large' size prop for uniform item height. Includes examples with start and end icons, and a description.

```javascript
import * as React from 'react';
import { List, ListItem } from '@itwin/itwinui-react';
import { SvgPlaceholder, SvgCheckmarkSmall } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <List>
      <ListItem size='large'>
        <ListItem.Icon>
          <SvgPlaceholder />
        </ListItem.Icon>
        <ListItem.Content>
          <div>Milk</div>
          <ListItem.Description>Whole, almond or oat milk</ListItem.Description>
        </ListItem.Content>
      </ListItem>

      <ListItem size='large'>
        <ListItem.Icon>
          <SvgPlaceholder />
        </ListItem.Icon>
        <ListItem.Content>
          <div>Cheese</div>
          <ListItem.Description>Blue or feta</ListItem.Description>
        </ListItem.Content>
        <ListItem.Icon>
          <SvgCheckmarkSmall />
        </ListItem.Icon>
      </ListItem>

      <ListItem size='large'>
        <ListItem.Icon>
          <SvgPlaceholder />
        </ListItem.Icon>
        Yogurt
      </ListItem>
    </List>
  );
};
```

--------------------------------

### Tile Composition API Example

Source: https://itwinui.bentley.com/docs/tile

This snippet showcases building a Tile using the composition API, demonstrating how to structure content within the Tile.ContentArea, including description and metadata with tags.

```jsx
import * as React from 'react';
import { Tile, TagContainer, Tag } from '@itwin/itwinui-react';
import { SvgStar, SvgInfo } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <Tile.Wrapper>
      <Tile.Name name='Tile name' />
      <Tile.ThumbnailArea>
        <Tile.ThumbnailPicture url='https://itwinplatformcdn.azureedge.net/iTwinUI/stadium.png' />
        <Tile.TypeIndicator>
          <Tile.IconButton label='Favorite'>
            <SvgStar />
          </Tile.IconButton>
        </Tile.TypeIndicator>
        <Tile.QuickAction>
          <Tile.IconButton label='More info'>
            <SvgInfo />
          </Tile.IconButton>
        </Tile.QuickAction>
      </Tile.ThumbnailArea>
      <Tile.ContentArea>
        <Tile.Description>
          This tile is constructed using composition API.
        </Tile.Description>
        <Tile.Metadata>
          <TagContainer>
            <Tag variant='basic'>Tag 1</Tag>
            <Tag variant='basic'>Tag 2</Tag>
          </TagContainer>
        </Tile.Metadata>
      </Tile.ContentArea>
    </Tile.Wrapper>
  );
};
```

--------------------------------

### Condensed Radio Tile Example

Source: https://itwinui.bentley.com/docs/radiotile

This example demonstrates the condensed version of Radio Tiles, featuring only labels and icons. It's ideal for saving space when descriptive text is not required. Ensure accessibility by always including text alongside icons.

```jsx
import * as React from 'react';
import { RadioTileGroup, RadioTile } from '@itwin/itwinui-react';

export default () => {
  return (
    <RadioTileGroup className='demo-radio-tile-group'>
      <RadioTile
        label='Google Maps'
        icon={
          <svg aria-hidden='true' viewBox='0 0 24 24'>
            <path
              d='m12 0a7.98189 7.98189 0 0 0 -6.9688 11.906c.1079.192.221.381.3438.563l6.625 11.531 6.625-11.531c.102-.151.19-.311.281-.469l.063-.094a7.98217 7.98217 0 0 0 -6.969-11.906zm0 4a4 4 0 1 1 -4 4 4.00011 4.00011 0 0 1 4-4z'
              fill='#e74c3c'
            />
            <path
              d='m12 3a5 5 0 1 0 5 5 5 5 0 0 0 -5-5zm0 2a3 3 0 1 1 -3 3 2.99988 2.99988 0 0 1 3-3z'
              fill='#c0392b'
            />
          </svg>
        }
        name='map'
        value='Google Maps'
      />
      <RadioTile
        label='Bentley Blue'
        icon={
          <svg aria-hidden='true' viewBox='0 0 24 24'>
            <path
              d='m12 0a8.12188 8.12188 0 0 0 -8.18182 7.95c0 1.8 1.235 4.65 3.55066 8.85 1.698 3 4.6311 7.2 4.6311 7.2s2.93308-4.35 4.63122-7.35c2.31571-4.2 3.55066-7.05 3.55066-8.85a8.09618 8.09618 0 0 0 -8.18188-7.8z'
              fill='#fff'
            />
            <path
              d='m12 1.10962a7.05246 7.05246 0 0 0 -7.0722 6.84038c0 1.88313 1.8238 5.43244 3.41275 8.31426 1.06435 1.88039 2.649 4.27827 3.64493 5.75084.99723-1.518 2.60183-4.00688 3.68-5.91171 1.58292-2.87099 3.40672-6.42031 3.40672-8.30339a6.98162 6.98162 0 0 0 -7.0722-6.69038zm.002 9.79947a3.27273 3.27273 0 1 1 3.27272-3.27273 3.27268 3.27268 0 0 1 -3.27272 3.27273z'
              fill='#6ab9ec'
            />
          </svg>
        }
        name='map'
        value='Bentley Blue'
        defaultChecked
      />
      <RadioTile
        label='Bentley Green'
        icon={
          <svg aria-hidden='true' viewBox='0 0 24 24'>
            <path
              d='m12 0a8.12188 8.12188 0 0 0 -8.18182 7.95c0 1.8 1.235 4.65 3.55066 8.85 1.698 3 4.6311 7.2 4.6311 7.2s2.93308-4.35 4.63122-7.35c2.31571-4.2 3.55066-7.05 3.55066-8.85a8.09618 8.09618 0 0 0 -8.18188-7.8z'
              fill='#fff'
            />
            <path
              d='m12 1.10962a7.05246 7.05246 0 0 0 -7.0722 6.84038c0 1.88313 1.8238 5.43244 3.41275 8.31426 1.06435 1.88039 2.649 4.27827 3.64493 5.75084.99723-1.518 2.60183-4.00688 3.68-5.91171 1.58292-2.87099 3.40672-6.42031 3.40672-8.30339a6.98162 6.98162 0 0 0 -7.0722-6.69038zm.002 9.79947a3.27273 3.27273 0 1 1 3.27272-3.27273 3.27268 3.27268 0 0 1 -3.27272 3.27273z'
              fill='#b1c854'
            />
          </svg>
        }
        name='map'
        value='Bentley Green'
      />
      <RadioTile
        label='Bentley Purple'
        icon={
          <svg aria-hidden='true' viewBox='0 0 24 24'>
            <path
              d='m12 0a8.12188 8.12188 0 0 0 -8.18182 7.95c0 1.8 1.235 4.65 3.55066 8.85 1.698 3 4.6311 7.2 4.6311 7.2s2.93308-4.35 4.63122-7.35c2.31571-4.2 3.55066-7.05 3.55066-8.85a8.09618 8.09618 0 0 0 -8.18188-7.8z'
              fill='#fff'
            />
            <path
              d='m12 1.10962a7.05246 7.05246 0 0 0 -7.0722 6.84038c0 1.88313 1.8238 5.43244 3.41275 8.31426 1.06435 1.88039 2.649 4.27827 3.64493 5.75084.99723-1.518 2.60183-4.00688 3.68-5.91171 1.58292-2.87099 3.40672-6.42031 3.40672-8.30339a6.98162 6.98162 0 0 0 -7.0722-6.69038zm.002 9.79947a3.27273 3.27273 0 1 1 3.27272-3.27273 3.27268 3.27268 0 0 1 -3.27272 3.27273z'
              fill='#A3779F'
            />
          </svg>
        }
        disabled
        name='map'
        value='Bentley Purple'
      />
    </RadioTileGroup>
  );
};

```
Tokens:
Raw