Zendesk Garden

https://garden.zendesk.com/components
Admin
Zendesk Garden is an open-source design system and collection of React components used to build...
Tokens:63,972
Snippets:818
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install @zendeskgarden/react-dropdowns

Source: https://garden.zendesk.com/components/menu

Install the package using npm.

```bash
npm install @zendeskgarden/react-dropdowns
```

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

### Install Tooltip package

Source: https://garden.zendesk.com/components/tooltip

Install the @zendeskgarden/react-tooltips package via npm.

```bash
npm install @zendeskgarden/react-tooltips
```

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

### Install @zendeskgarden/react-tables

Source: https://garden.zendesk.com/components/table

Install the tables package via npm.

```bash
npm install @zendeskgarden/react-tables
```

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

### Install @zendeskgarden/react-grid

Source: https://garden.zendesk.com/components/grid

Install the grid component package via npm.

```bash
npm install @zendeskgarden/react-grid
```

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

### npm install @zendeskgarden/react-forms

Source: https://garden.zendesk.com/components/checkbox

Installation command for the Checkbox component.

```bash
npm install @zendeskgarden/react-forms
```

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

### Install @zendeskgarden/react-tabs

Source: https://garden.zendesk.com/components/tabs

Install the Tabs component package using npm.

```bash
npm install @zendeskgarden/react-tabs
```

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

### Install @zendeskgarden/react-theming

Source: https://garden.zendesk.com/components/palette

Install the @zendeskgarden/react-theming package via npm. Version 9.15.7 is referenced on the page.

```bash
npm install @zendeskgarden/react-theming
```

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

### Install Well component

Source: https://garden.zendesk.com/components/well

Install the Well component from the @zendeskgarden/react-notifications package.

```bash
npm install @zendeskgarden/react-notifications
```

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

### Install ColorPickers package

Source: https://garden.zendesk.com/components/color-picker

Installs the @zendeskgarden/react-colorpickers package and its peer dependencies.

```bash
npm install @zendeskgarden/react-colorpickers
```

```bash
npm install react react-dom styled-components @zendeskgarden/react-theming
```

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

### Install peer dependencies for @zendeskgarden/react-theming

Source: https://garden.zendesk.com/components/palette

Install the required peer dependencies: react, react-dom, and styled-components.

```bash
npm install react react-dom styled-components
```

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

### Install @zendeskgarden/react-typography

Source: https://garden.zendesk.com/components/code

Install the package via npm. Required dependencies include react, react-dom, styled-components, and @zendeskgarden/react-theming.

```bash
npm install @zendeskgarden/react-typography
```

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

### Install Spinner with npm

Source: https://garden.zendesk.com/components/spinner

Install the @zendeskgarden/react-loaders package to use the Spinner component.

```bash
npm install @zendeskgarden/react-loaders
```

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

### Install @zendeskgarden/react-draggable

Source: https://garden.zendesk.com/components/draggable

Install the package using npm. Requires react, react-dom, styled-components, and @zendeskgarden/react-theming as peer dependencies.

```bash
npm install @zendeskgarden/react-draggable
```

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

### npm install dependencies for Checkbox

Source: https://garden.zendesk.com/components/checkbox

Installation command for peer dependencies of the Checkbox component.

```bash
npm install react react-dom styled-components @zendeskgarden/react-theming
```

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

### Install and import @zendeskgarden/react-typography

Source: https://garden.zendesk.com/components/paragraph

Install the @zendeskgarden/react-typography package and its peer dependencies, then import the Paragraph component and related typography components (LG, MD, SM) for use in your React application.

```bash
npm install @zendeskgarden/react-typography
```

```bash
npm install react react-dom styled-components @zendeskgarden/react-theming
```

```javascript
import { LG, MD, Paragraph, SM } from '@zendeskgarden/react-typography'
```

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

### Install ToggleButton with npm

Source: https://garden.zendesk.com/components/toggle-button

Install the @zendeskgarden/react-buttons package, which contains the ToggleButton component. Requires react, react-dom, styled-components, and @zendeskgarden/react-theming as peer dependencies.

```bash
npm install @zendeskgarden/react-buttons
```

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

### getColor usage with styled-components

Source: https://garden.zendesk.com/components/utilities

Example showing how to use getColor to resolve colors from the theme, including hover and active states with offset adjustments. The example imports styled-components and getColor, defines options objects for base, hover, and active states, and creates a styled component that applies the colors.

```javascript
import styled from 'styled-components';
import { getColor } from '@zendeskgarden/react-theming';

const options = { variable: 'background.primaryEmphasis' };
const offset100 = { dark: { offset: -100 }, light: { offset: 100 } };
const offset200 = { dark: { offset: -200 }, light: { offset: 200 } };

export const StyledCustomComponent = styled.div`
  background-color: ${props => getColor({ theme: props.theme, ...options })};

  :hover {
    background-color: ${props => getColor({ theme: props.theme, ...options, ...offset100 })};
  }

  :active {
    background-color: ${props => getColor({ theme: props.theme, ...options, ...offset200 })};
  }
`;
```

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

### Orientation Tabs example

Source: https://garden.zendesk.com/components/tabs

Tab layout is horizontal by default and can also stack vertically. The example includes three tabs with content. The code is available in the CodeSandbox and can be copied or viewed.

```jsx
// Code for the orientation Tabs example is not shown in the source text.
// The source provides a "View code" button and "Copy code" action, but the actual code is not displayed.
// Therefore, no code can be extracted.
```

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

### Default Tabs example

Source: https://garden.zendesk.com/components/tabs

Typical usage of the Tabs component. The example includes three tabs (Elm, Sugar Maple, Dogwood) with corresponding content panels. The code is available in the CodeSandbox and can be copied or viewed.

```jsx
// Code for the default Tabs example is not shown in the source text.
// The source provides a "View code" button and "Copy code" action, but the actual code is not displayed.
// Therefore, no code can be extracted.
```

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

### Size Combobox

Source: https://garden.zendesk.com/components/combobox

Combobox can be default or compact in size. The example shows a tree selection field.

```jsx
Tree
Sequoia
```

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

### Default Ordered List

Source: https://garden.zendesk.com/components/lists

Renders an ordered list with default styling. The example shows three list items: Plant, Water, Harvest.

```html
  1. Plant
  2. Water
  3. Harvest
```

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

### Hint text Combobox

Source: https://garden.zendesk.com/components/combobox

Hint text gives further clarification. The example shows a plant selection field with hint text.

```jsx
Plant
Choose your favorite plant
Succulent
```

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

### Wrapper components with forwardRef

Source: https://garden.zendesk.com/components/menu

Shows how to create wrapper components for Item and ItemGroup that forward refs, matching the prop signatures.

```jsx
const ItemComponent = forwardRef((props, ref) => (  <Item {...props} ref={ref} />))
const ItemGroupComponent = forwardRef((props, ref) => (  <ItemGroup {...props} ref={ref} />))
<Menu>  <ItemGroupComponent legend="Flowers">    <ItemComponent value="Violet" />    <ItemComponent value="Sunflower" />    <ItemComponent value="Daisy" />  </ItemGroupComponent></Menu>
```

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

### Import Pane and PaneProvider

Source: https://garden.zendesk.com/components/pane

Import the Pane and PaneProvider components from the @zendeskgarden/react-grid package.

```javascript
import { Pane, PaneProvider } from '@zendeskgarden/react-grid'
```

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

### Disabled Tabs example

Source: https://garden.zendesk.com/components/tabs

Individual tabs can be disabled to prevent user interaction. The example includes three tabs with one disabled. The code is available in the CodeSandbox and can be copied or viewed.

```jsx
// Code for the disabled Tabs example is not shown in the source text.
// The source provides a "View code" button and "Copy code" action, but the actual code is not displayed.
// Therefore, no code can be extracted.
```

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

### Hidden label Combobox

Source: https://garden.zendesk.com/components/combobox

Combobox labels can be hidden. The example shows an accessibly hidden label.

```jsx
Accessibly hidden label
```

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

### Span with StartIcon

Source: https://garden.zendesk.com/components/span

Use `<Span.StartIcon>` to include an icon at the beginning of the span.

```jsx
<Span.StartIcon />
```

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

### Search Combobox

Source: https://garden.zendesk.com/components/combobox

Combobox can be used to provide search suggestions. The example shows a search field for finding a vegetable.

```jsx
Find a vegetable
Search
```

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

### mediaQuery

Source: https://garden.zendesk.com/components/utilities

Returns a CSS media query string for the given query specifier, breakpoint name, and theme. Use this function to build responsive UI that works well with Garden's themed Grid.

```APIDOC
## mediaQuery

### Description
Returns a CSS media query string for the given query specifier, breakpoint name, and theme. Use this function to build responsive UI that works well with Garden's themed Grid.

### Parameters

#### Parameters
- **query** ('up' | 'down' | 'only' | 'between') - Required - Specifies the query, one of:
  - `'up'` match screen widths including the given breakpoint and up
  - `'down'` match screen widths included within the given breakpoint and down
  - `'only'` match screen widths included within the given breakpoint
  - `'between'` match screen widths including the first breakpoint up through screen widths included within the second breakpoint
- **breakpoint** ('xs' | 'sm' | 'md' | 'lg' | 'xl' | Array) - Required - Specifies a theme object breakpoints key, or an array of two keys when `'between'` is the specified query
- **theme** (DefaultTheme) - DEFAULT_THEME - Provides values used to resolve the specified breakpoint
```

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

### Multiselect Combobox

Source: https://garden.zendesk.com/components/combobox

Use the `isMultiselectable` prop to allow multiple selections. The example shows a seeds selection field.

```jsx
Seeds
Plan your vegetable garden
```

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

### Import components from @zendeskgarden/react-dropdowns

Source: https://garden.zendesk.com/components/menu

Import the Item, ItemGroup, Menu, and Separator components from the package.

```javascript
import { Item, ItemGroup, Menu, Separator } from '@zendeskgarden/react-dropdowns'
```

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

### Grouped options Combobox

Source: https://garden.zendesk.com/components/combobox

Use grouped options for categorization. The example shows a fruits and vegetables selection field.

```jsx
Fruits and vegetables
```

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

### Import Tooltip

Source: https://garden.zendesk.com/components/tooltip

Import the Tooltip component from the @zendeskgarden/react-tooltips package.

```javascript
import { Tooltip } from '@zendeskgarden/react-tooltips'
```

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

### Media Combobox

Source: https://garden.zendesk.com/components/combobox

Media elements add even more context to a Combobox and its options. The example shows a veggies selection field.

```jsx
Veggies
```

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

### Import Typography components

Source: https://garden.zendesk.com/components/typography

Import the Typography components: Blockquote, Ellipsis, LG, MD, SM, XL, XXL, and XXXL.

```javascript
import { Blockquote, Ellipsis, LG, MD, SM, XL, XXL, XXXL } from '@zendeskgarden/react-typography'
```

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

### Small Size List

Source: https://garden.zendesk.com/components/lists

Renders a list with the small size, which adjusts vertical spacing between list items. The example shows three list items about plant facts.

```html
  * The world's tallest-growing tree is the coast redwood
  * Bamboo can grow 35 inches in a single day
  * During the 1600s, tulips were worth more than gold
```

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

### Nested Combobox

Source: https://garden.zendesk.com/components/combobox

A Combobox listbox can contain nested levels for additional categorization of options. The example shows a fruit selection field.

```jsx
Fruit
```

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

### Import Textarea and Field

Source: https://garden.zendesk.com/components/textarea

Import statement for using Textarea and Field components.

```javascript
import { Textarea, Field } from '@zendeskgarden/react-forms'
```

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

### Autocomplete Combobox

Source: https://garden.zendesk.com/components/combobox

In conjunction with user-provided filtering, the `isAutocomplete` prop highlights an option for selection. The example shows a vegetable selection field.

```jsx
Vegetables
```

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

### MediaInput

Source: https://garden.zendesk.com/components/input

An input that displays media elements at the start and/or end. Extends InputHTMLAttributes<HTMLInputElement> and should be nested within a Field component.

```APIDOC
## Component: MediaInput

### Description
Displays provided media elements at the start and/or end of the input. Nest within a Field component.

### Import
`import { MediaInput } from '@zendeskgarden/react-forms'`

### Extends
`InputHTMLAttributes<HTMLInputElement>`

### Props
- **end** (ReactElement<any, string | JSXElementConstructor<any>>) - Optional - Accepts an "end" icon to display
- **focusInset** (boolean) - Optional - Applies inset `box-shadow` styling on focus
- **isBare** (boolean) - Optional - Removes borders and padding
- **isCompact** (boolean) - Optional - Applies compact styling
- **start** (ReactElement<any, string | JSXElementConstructor<any>>) - Optional - Accepts a "start" icon to display
- **validation** ('success' | 'warning' | 'error') - Optional - Applies validation state styling
- **wrapperProps** (any) - Optional - Default: {} - Applies props to the wrapping FauxInput element
- **wrapperRef** (any) - Optional - Applies a ref to the wrapping FauxInput element
```

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

### Import PALETTE from @zendeskgarden/react-theming

Source: https://garden.zendesk.com/components/palette

Import the PALETTE constant to access color palettes in Zendesk Garden components.

```javascript
import { PALETTE } from '@zendeskgarden/react-theming'
```
Tokens:
Raw