### 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) => ( )) const ItemGroupComponent = forwardRef((props, ref) => ( )) ``` -------------------------------- ### 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 `` to include an icon at the beginning of the span. ```jsx ``` -------------------------------- ### 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 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` ### Props - **end** (ReactElement>) - 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>) - 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' ```