# Jupyter UI toolkit

## Components

The component tags are prefixed by `jp-` (`anchored-region` ➙ `jp-anchored-region`)
when using `@jupyter/web-components` and are capitalized (`anchored-region` ➙ `AnchoredRegion`) when using `@jupyter/react-components`.

Here is the list of components part of the Jupyter UI toolkit:

| Name              | Reference                                                                                      | Documentation                                                     |
| ----------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| `accordion`       | [Accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)                       | [Stories](?path=/story/components-accordion--documentation)       |
| `anchor`          | [Anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)                  | [Stories](?path=/story/components-anchor--documentation)          |
| `anchored-region` | Position content relative to another "anchor" element                                          | [Stories](?path=/story/components-anchored-region--documentation) |
| `avatar`          | Visual represent an user or an object                                                          | [Stories](?path=/story/components-avatar--documentation)          |
| `badge`           | Highlight an item and attract attention or flag status                                         | [Stories](?path=/story/components-badge--documentation)           |
| `breadcrumb`      | [Breadcrumb pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)                     | [Stories](?path=/story/components-breadcrumb--documentation)      |
| `button`          | [Button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)             | [Stories](?path=/story/components-button--documentation)          |
| `card`            | Visual container                                                                               | [Stories](?path=/story/components-card--documentation)            |
| `checkbox`        | [Checkbox element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox)   | [Stories](?path=/story/components-checkbox--documentation)        |
| `combobox`        | [Combobox element](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)                         | [Stories](?path=/story/components-combobox--documentation)        |
| `data-grid`       | [Grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/)                                 | [Stories](?path=/story/components-data-grid--documentation)       |
| `date-field`      | [Date input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)     | [Stories](?path=/story/components-date-field--documentation)      |
| `design-system-provider` | Theme provider | [Stories](?path=/story/components-design-system-provider--documentation)       |
| `dialog`          | [Dialog (Modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)               | [Stories](?path=/story/components-dialog--documentation)          |
| `disclosure`      | [Disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) | [Stories](?path=/story/components-disclosure--documentation)          |
| `divider`         | [Horizontal or vertical rule](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)    | [Stories](?path=/story/components-divider--documentation)         |
| `listbox`         | [Listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)                                   | [Stories](?path=/story/components-listbox--documentation)         |
| `menu`            | [Menu](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)                                      | [Stories](?path=/story/components-menu--documentation)            |
| `number-field`    | [Number input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number) | [Stories](?path=/story/components-number-field--documentation)    |
| `progress`        | [Meter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/meter/) as line                       | [Stories](?path=/story/components-progress--documentation)        |
| `progress-ring`   | [Meter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/meter/) as ring                       | [Stories](?path=/story/components-progress-ring--documentation)   |
| `radio-group`     | [Radio pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)                               | [Stories](?path=/story/components-radio-group--documentation)     |
| `search`          | [Search input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search) | [Stories](?path=/story/components-search--documentation)          |
| `select`          | [Select element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)             | [Stories](?path=/story/components-select--documentation)          |
| `skeleton`        | [Skeleton element](https://open-ui.org/components/skeleton.research/)                          | [Stories](?path=/story/components-skeleton--documentation)        |
| `slider`          | [Range input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)   | [Stories](?path=/story/components-slider--documentation)          |
| `switch`          | [Switch pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)                             | [Stories](?path=/story/components-switch--documentation)          |
| `tabs`            | [Tab panel pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)                            | [Stories](?path=/story/components-tabs--documentation)            |
| `text-area`       | [Text area element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)        | [Stories](?path=/story/components-text-area--documentation)       |
| `text-field`      | [Text input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text)     | [Stories](?path=/story/components-text-field--documentation)      |
| `toolbar`         | [Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)                           | [Stories](?path=/story/components-toolbar--documentation)         |
| `tooltip`         | [Tooltip pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)                           | [Stories](?path=/story/components-tooltip--documentation)         |
| `tree-view`       | [Tree view pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)                        | [Stories](?path=/story/components-tree-view--documentation)       |

Draft components are prefixed with `jp-draft-`. Their API is unstable and may change between minor versions. Once stability
is reached, they will be prefixed with simply `jp-`.

| Name              | Reference                                                                                      | Documentation                                                     |
| ----------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| `picker`      | Variant of select for large list | [Stories](?path=/story/components-picker--documentation)          |
