### Install Evergreen UI Framework

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/getting-started.mdx

Instructions for installing the Evergreen UI framework using npm or yarn. Requires React v16.8.0 or higher.

```shell
$ npm install evergreen-ui
// OR
$ yarn add evergreen-ui
```

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

### Complete Evergreen Table Example

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/table.mdx

A comprehensive example demonstrating the usage of Evergreen's table components. It includes a Table, Table.Head, Table.Body, and Table.Row, with functionality for selecting rows and displaying data. The example also shows how to create a searchable header cell.

```jsx
<Table>
  <Table.Head>
    <Table.SearchHeaderCell />
    <Table.TextHeaderCell>Last Activity</Table.TextHeaderCell>
    <Table.TextHeaderCell>ltv</Table.TextHeaderCell>
  </Table.Head>
  <Table.Body height={240}>
    {profiles.map((profile) => (
      <Table.Row key={profile.id} isSelectable onSelect={() => alert(profile.name)}>
        <Table.TextCell>{profile.name}</Table.TextCell>
        <Table.TextCell>{profile.lastActivity}</Table.TextCell>
        <Table.TextCell isNumber>{profile.ltv}</Table.TextCell>
      </Table.Row>
    ))}
  </Table.Body>
</Table>
```

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

### Default Autocomplete Example - React

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/autocomplete.mdx

Renders a basic Autocomplete component with a list of fruits. It logs the selected item to the console via the onChange prop. This example demonstrates the fundamental setup for the Autocomplete component.

```jsx
<Autocomplete
  title="Fruits"
  onChange={changedItem => console.log(changedItem)}
  items={['Apple', 'Apricot', 'Banana', 'Cherry', 'Cucumber']}
>
  {props => {
    const { getInputProps, getRef, inputValue } = props
    return (
      <TextInput
        placeholder="Fruits"
        value={inputValue}
        ref={getRef}
        {...getInputProps()}
      />
    )
  }}
</Autocomplete>
```

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

### Import Evergreen UI Components

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/getting-started.mdx

Example of importing core components and utilities from the Evergreen UI library into a JavaScript project.

```javascript
import { Button, Pane, Text, majorScale } from 'evergreen-ui'
```

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

### Fully Featured Autocomplete Example - React

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/autocomplete.mdx

Presents a comprehensive Autocomplete setup with full width, flex layout, options title, onFocus event handling, filtering, and a button to trigger the autocomplete. This example is similar to the Combobox component and is intended for advanced use cases.

```jsx
<Autocomplete
  title="Custom title"
  onChange={changedItem => console.log(changedItem)}
  items={['Apple', 'Apricot', 'Banana', 'Cherry', 'Cucumber']}
>
  {({
    key,
    getInputProps,
    getToggleButtonProps,
    getRef,
    inputValue,
    openMenu,
    toggleMenu
  }) => (
    <Pane key={key} ref={getRef} display="flex">
      <TextInput
        flex="1"
        placeholder="Many Options!"
        value={inputValue}
        onFocus={openMenu}
        {...getInputProps()}
      />
      <Button onClick={toggleMenu} {...getToggleButtonProps()}>
        Trigger
      </Button>
    </Pane>
  )}
</Autocomplete>
```

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

### Fully Featured SideSheet Example

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/side-sheet.mdx

A comprehensive example showcasing a SideSheet with a header containing a title, subtitle, and a tab bar. The content area displays a card and supports scrolling. It also demonstrates advanced props like `containerProps` for custom styling.

```jsx
function FullyFeaturedSidesheetExample() {
  const [isShown, setIsShown] = React.useState(false)
  const [selectedIndex, setSelectedIndex] = React.useState(0)
  return (
    <React.Fragment>
      <SideSheet
        isShown={isShown}
        onCloseComplete={() => setIsShown(false)}
        containerProps={{
          display: 'flex',
          flex: '1',
          flexDirection: 'column'
        }}
      >
        <Pane zIndex={1} flexShrink={0} elevation={0} backgroundColor="white">
          <Pane padding={16} borderBottom="muted">
            <Heading size={600}>Title</Heading>
            <Paragraph size={400} color="muted">
              Optional description or sub title
            </Paragraph>
          </Pane>
          <Pane display="flex" padding={8}>
            <Tablist>
              {['Traits', 'Event History', 'Identities'].map((tab, index) => (
                <Tab
                  key={tab}
                  isSelected={selectedIndex === index}
                  onSelect={() => setSelectedIndex(index)}
                >
                  {tab}
                </Tab>
              ))}
            </Tablist>
          </Pane>
        </Pane>
        <Pane flex="1" overflowY="scroll" background="tint1" padding={16}>
          <Card
            backgroundColor="white"
            elevation={0}
            height={240}
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <Heading>Some content</Heading>
          </Card>
        </Pane>
      </SideSheet>
      <Button onClick={() => setIsShown(true)}>Show Basic Side Sheet</Button>
    </React.Fragment>
  )
}
```

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

### Render basic Evergreen UI icon using JSX

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/foundations/icons.mdx

Demonstrates how to import and render a single Evergreen UI icon component in a React application. No additional props are required for default rendering. This snippet uses the CrossIcon as an example.

```jsx
<CrossIcon />
```

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

### Install Evergreen UI package with Yarn or npm

Source: https://github.com/segmentio/evergreen/blob/master/README.md

Installs the evergreen‑ui library using either Yarn or npm. This step is required before any Evergreen components can be imported. No additional configuration is needed after installation.

```sh
$ yarn add evergreen-ui
# or
$ npm install --save evergreen-ui
```

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

### Migrate Nudge component to Pulsar with React

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/migrations/v7.mdx

Example of migrating the deprecated Nudge component to the new Pulsar component in React. This involves replacing the import and adjusting the JSX structure. Tooltip functionality needs separate handling.

```jsx
import React from 'react'
-import { Nudge, Paragraph } from 'evergreen-ui'
+import { Pulsar, Pane, Paragraph } from 'evergreen-ui'

-<Nudge position={Position.TOP_LEFT} isShown={true}>
-  <Paragraph>Hello world</Paragraph>
-</Nudge>
+
+<Pane position="relative" display="inline-block">
+  <Pulsar position={Position.TOP_LEFT} />
+  <Paragraph>Hello world</Paragraph>
+</Pane>
```

```jsx
import React from 'react'
-import { Nudge, Paragraph } from 'evergreen-ui'
+import { Tooltip, Pulsar, Pane, Paragraph } from 'evergreen-ui'

-<Nudge isShown={true} tooltipContent="Hello world">
-  <Paragraph>Hello world</Paragraph>
-</Nudge>
+
+<Pane position="relative" display="inline-block">
+  <Tooltip content="Hello world">
+    <Pulsar />
+  </Tooltip>
+  <Paragraph>Hello world</Paragraph>
+</Pane>
```

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

### Replace imports with local deprecatedDefaultTheme using jscodeshift

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/migrations/v7.mdx

This codemod helps replace imports from 'evergreen-ui' to a locally ejected deprecatedDefaultTheme object. It requires jscodeshift to be installed globally.

```bash
npm i -g jscodeshift && npx jscodeshift -t
node_modules/evergreen-ui/codemods/dist/6.0.0-7.0.0/replace-imports-with-local-path.js
--localPath=themes/deprecated-default-theme --importName=deprecatedDefaultTheme --parser=tsx
--extensions=js,jsx,ts,tsx fileOrDirectory --dry --print
```

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

### React JSX: Basic Overlay Example

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/overlay.mdx

Demonstrates how to use the Overlay component in a React application. It shows how to control the visibility of the overlay using a state variable and a button click. This component requires React and the Evergreen UI library.

```jsx
function BasicOverlayExample() {
  const [isShown, setIsShown] = React.useState(false)
  return (
    <React.Fragment>
      <Overlay isShown={isShown}></Overlay>
      <Button onClick={() => setIsShown(true)}>Click to Show Overlay</Button>
    </React.Fragment>
  )
}
```

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

### Pre Component Example (React)

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/foundations/typography.mdx

The Pre component renders a chunk of preformatted text, defaulting to a 'pre' element.

```jsx
<Pre>Preformatted text.</Pre>
```

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

### Use Evergreen UI Components in JSX

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/getting-started.mdx

Demonstrates how to use imported Evergreen UI components such as Pane, Button, and Text within a React JSX structure. Includes examples of layout and styling props.

```jsx
<Pane display="flex" alignItems="center" marginX={majorScale(2)}>
  <Button>Click me!</Button>
  <Text>This is a clickable Button</Text>
</Pane>
```

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

### Tooltip Positioning Examples (JSX)

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/tooltip.mdx

Illustrates how to position the Tooltip component using the `position` prop. It provides examples for TOP, RIGHT, BOTTOM, and LEFT positions. This snippet requires Tooltip, IconButton, Arrow icons, Pane, and Position enum.

```jsx
<Pane display="flex" justifyContent="space-between">
  <Tooltip content="Top" position={Position.TOP}>
    <IconButton icon={ArrowUpIcon} />
  </Tooltip>
  <Tooltip content="Right" position={Position.RIGHT}>
    <IconButton icon={ArrowRightIcon} />
  </Tooltip>
  <Tooltip content="Bottom" position={Position.BOTTOM}>
    <IconButton icon={ArrowDownIcon} />
  </Tooltip>
  <Tooltip content="Left" position={Position.LEFT}>
    <IconButton icon={ArrowLeftIcon} />
  </Tooltip>
</Pane>
```

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

### Basic SideSheet Example

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/side-sheet.mdx

Demonstrates the fundamental usage of the SideSheet component. It includes state management for visibility and a button to trigger its appearance. The onCloseComplete prop is used to reset the visibility state.

```jsx
function BasicSidesheetExample() {
  const [isShown, setIsShown] = React.useState(false)
  return (
    <React.Fragment>
      <SideSheet isShown={isShown} onCloseComplete={() => setIsShown(false)}>
        <Paragraph margin={40}>Basic Example</Paragraph>
      </SideSheet>
      <Button onClick={() => setIsShown(true)}>Show Basic Side Sheet</Button>
    </React.Fragment>
  )
}
```

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

### Replace SidebarTab component using jscodeshift

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/migrations/v7.mdx

This codemod programmatically updates instances of the SidebarTab component. It requires jscodeshift to be installed globally.

```bash
npm i -g jscodeshift && npx jscodeshift -t node_modules/evergreen-ui/codemods/dist/6.0.0-7.0.0/replace-sidebar-tab.js
--parser=tsx --extensions=js,jsx,ts,tsx fileOrDirectory --dry --print
```

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

### Replace Nudge component using jscodeshift

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/migrations/v7.mdx

This codemod automatically updates instances of the Nudge component to the new Pulsar component where possible. It requires jscodeshift to be installed globally.

```bash
npm i -g jscodeshift && npx jscodeshift -t node_modules/evergreen-ui/codemods/dist/6.0.0-7.0.0/replace-nudge.js
--parser=tsx --extensions=js,jsx,ts,tsx fileOrDirectory --dry --print
```

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

### Basic Avatar Setup with Size

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/avatar.mdx

Demonstrates how to create a basic avatar component using the 'name' and 'size' properties. The 'size' property controls both the width and height, and the initials will scale automatically.

```jsx
<Avatar name="Jeroen Ransijn" size={40} />
```

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

### Render dynamic Evergreen UI icon with Icon wrapper in JSX

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/foundations/icons.mdx

Uses the generic Icon component to render any icon passed via the icon prop, allowing dynamic selection at runtime. Size can also be specified. This example renders the CogIcon with a size of 12 pixels.

```jsx
<Icon icon={CogIcon} size={12} />
```

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

### Basic Pane Example with Properties

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/foundations/layers.mdx

Demonstrates the basic usage of the Pane component, showcasing its ability to accept various props for styling and functionality. It maps directly to the Box component from ui-box, allowing for extensive customization.

```jsx
<Pane
  is="section"
  ref={(ref) => console.log(ref)}
  background="tint2"
  border="muted"
  marginLeft={12}
  marginY={24}
  paddingTop={12}
  paddingX={40}
  width={120}
  height={120}
  cursor="help"
  onClick={() => alert('Works just like expected')}
/>
```

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

### Code Component Examples (React)

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/foundations/typography.mdx

The Code component, based on the Text component, renders a 'code' element and supports different sizes (300, 400, 500) and appearances like 'minimal'.

```jsx
<div>
  <div>
    <Code size={300}>The quick brown fox jumps over the lazy dog</Code>
  </div>
  <div>
    <Code size={400}>The quick brown fox jumps over the lazy dog</Code>
  </div>
  <div>
    <Code size={500}>The quick brown fox jumps over the lazy dog</Code>
  </div>
  <div>
    <Code size={300} appearance="minimal">
      The quick brown fox jumps over the lazy dog
    </Code>
  </div>
  <div>
    <Code size={400} appearance="minimal">
      The quick brown fox jumps over the lazy dog
    </Code>
  </div>
  <div>
    <Code size={500} appearance="minimal">
      The quick brown fox jumps over the lazy dog
    </Code>
  </div>
</div>
```

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

### Menu with Icons in JSX

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/menu.mdx

Example of a Menu with icons for each item, demonstrating visual enhancements.

```jsx
<Popover
  position={Position.BOTTOM_LEFT}
  content={
    <Menu>
      <Menu.Group>
        <Menu.Item icon={PeopleIcon}>Share...</Menu.Item>
        <Menu.Item icon={CircleArrowRightIcon}>Move...</Menu.Item>
        <Menu.Item icon={EditIcon} secondaryText="⌘R">
          Rename...
        </Menu.Item>
      </Menu.Group>
      <Menu.Divider />
      <Menu.Group>
        <Menu.Item icon={TrashIcon} intent="danger">
          Delete...
        </Menu.Item>
      </Menu.Group>
    </Menu>
  }
>
  <Button marginRight={16}>With Icons</Button>
</Popover>
```

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

### Basic OrderedList Usage

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/foundations/typography.mdx

This example shows the basic structure for using the OrderedList component, which renders a numbered list. It contains multiple ListItem components as children.

```jsx
<OrderedList>
  <ListItem>Lorem ipsum dolor sit amet</ListItem>
  <ListItem>Consectetur adipiscing elit</ListItem>
  <ListItem>Integer molestie lorem at massa</ListItem>
  <ListItem>Facilisis in pretium nisl aliquet</ListItem>
</OrderedList>
```

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

### Small Component Example (React)

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/foundations/typography.mdx

The Small component is designed to be used exclusively within other text components, such as Paragraph. It renders text with a smaller visual size.

```jsx
<Paragraph>
  The <Small>small</Small> component can only be used in a other text component
</Paragraph>
```

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

### Basic CornerDialog Example in React JSX

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/corner-dialog.mdx

This React JSX example demonstrates a basic implementation of the CornerDialog component from Evergreen. It uses React state to control visibility and includes a Button to trigger the dialog. Dependencies include React and Evergreen components; inputs are user clicks, outputs are the dialog display with title and content.

```jsx
function BasicCornerDialogExample() {
  const [isShown, setIsShown] = React.useState(false)
  return (
    <React.Fragment>
      <CornerDialog
        title="Welcome to this new feature"
        isShown={isShown}
        onCloseComplete={() => setIsShown(false)}
      >
        The corner dialog component is used for new feature announcements and
        feedback requests from the user.
      </CornerDialog>
      <Button onClick={() => setIsShown(true)}>
        Show “Learn More” Corner Dialog
      </Button>
    </React.Fragment>
  )
}
```

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

### TextInputField with Label and Description

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/text-input.mdx

Example of using the TextInputField component, which bundles a label, input, and description. It's suitable for standard form fields.

```jsx
<TextInputField
  label="Default text input field"
  description="This is a description."
  placeholder="Placeholder text"
/>
```

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

### Basic Group with Buttons in React (JSX)

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/group.mdx

Demonstrates a basic usage of the Group component with Button children. The example shows how to manage state for selected options and render buttons within a group.

```jsx
function BasicGroupExample() {
  const options = React.useMemo(
    () => [
      { label: 'Hourly', value: 'hourly' },
      { label: 'Daily', value: 'daily' },
      { label: 'Monthly', value: 'monthly' },
    ],
    []
  )
  const [selectedValue, setSelectedValue] = React.useState('daily')

  return (
    <Group>
      {options.map(({ label, value }) => (
        <Button key={label} isActive={selectedValue === value} onClick={() => setSelectedValue(value)}>
          {label}
        </Button>
      ))}
    </Group>
  )
}
```

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

### Replace onKeyPress with onKeyDown on Table.Row component

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/migrations/v6.mdx

Switches event handling from the deprecated onKeyPress to onKeyDown for Table.Row, ensuring consistent behavior across browsers.

```javascript
<Table.Row onKeyDown={() => {}} />
```

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

### React RadioGroup Default Size Example

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/radio.mdx

Demonstrates the default size usage of the RadioGroup component. It manages a group of radios, allowing selection of a single option from a predefined list. Requires React.

```jsx
function DefaultRadioGroupExample() {
  const [options] = React.useState([
    { label: 'Read-only', value: 'read-only' },
    { label: 'Write', value: 'write' },
    { label: 'Restricted', value: 'restricted' }
  ])

  const [value, setValue] = React.useState('restricted')
  return (
    <RadioGroup
      label="Permissions"
      value={value}
      options={options}
      onChange={event => setValue(event.target.value)}
    />
  )
}
```

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

### Link Component Example (React)

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/foundations/typography.mdx

The Link component is used for anchor links, rendering an 'a' element by default. It supports different size options (300, 400, 500) and color variations like 'neutral'.

```jsx
<div>
  <Link href="#" marginRight={12}>
    Default
  </Link>
  <Link href="#" marginRight={12} color="neutral">
    Neutral
  </Link>
</div>
```

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

### Customizing Button Base Styles with Evergreen Theming

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/theming.mdx

Example of creating a custom button style by merging default theme with custom base styles, including padding, border-radius, background color, and pseudo-selectors for hover, active, and focus states.

```jsx
function CustomButtonExample() {
  const theme = mergeTheme(defaultTheme, {
    components: {
      Button: {
        baseStyle: {
          color: 'white',
          paddingX: 12,
          paddingY: 8,
          borderRadius: 5,
          backgroundColor: 'indianred',
          selectors: {
            _hover: {
              backgroundColor: 'firebrick',
            },
            _active: {
              backgroundColor: 'darkred',
            },
            _focus: {
              boxShadow: '0 0 0 2px lightcoral',
            },
          }
        },
      },
    },
  })

  return (
    <ThemeProvider value={theme}>
      <Button appearance="none">Custom Button</Button>
    </ThemeProvider>
  )
}
```

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

### Re‑implement BackButton component using Evergreen UI Button

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/migrations/v6.mdx

Provides a custom BackButton component that mimics the removed component, using forwardRef, memo, and Evergreen's Button with ArrowLeftIcon. Exported for reuse across the application.

```javascript
import React, { forwardRef, memo } from 'react'
import { ArrowLeftIcon, Button } from 'evergreen-ui'

const BackButton = memo(
  forwardRef(function BackButton({ children = 'Back', ...props }, ref) {
    return (
      <Button iconBefore={ArrowLeftIcon} {...props} ref={ref}>
        {children}
      </Button>
    )
  })
)

BackButton.propTypes = {
  /** Composes the Button component as the base. */
  ...Button.propTypes
}

export default BackButton
```

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

### Strong Component Examples (React)

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/foundations/typography.mdx

The Strong component renders strong text, defaulting to a 'strong' element. Ensure the 'size' property is set when used within other text components like Paragraph for consistent styling.

```jsx
<div>
  <div>
    <Strong size={300}>The quick brown fox jumps over the lazy dog</Strong>
  </div>
  <div>
    <Strong size={400}>The quick brown fox jumps over the lazy dog</Strong>
  </div>
  <div>
    <Strong size={500}>The quick brown fox jumps over the lazy dog</Strong>
  </div>
</div>
```

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

### Replace marginTop="default" with majorScale on Heading component

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/migrations/v6.mdx

Updates Heading (or Paragraph) marginTop usage to the scalable majorScale value, as the default theme no longer supports the "default" keyword.

```javascript
<Heading marginTop={majorScale(3)}> ... </Heading>
```

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

### Eject deprecatedDefaultTheme using jscodeshift

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/migrations/v7.mdx

This codemod ejects the deprecatedDefaultTheme object into your local codebase, allowing for easier migration. It requires jscodeshift to be installed globally.

```bash
npm i -g jscodeshift && npx jscodeshift -t
node_modules/evergreen-ui/codemods/dist/6.0.0-7.0.0/eject-deprecated-default-theme.js --parser=tsx
--extensions=js,jsx,ts,tsx fileOrDirectory --dry --print
```

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

### React Radio Component States Example

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/radio.mdx

Shows different states of the Radio component, including default, checked, and disabled. These are typically used within a radio group to manage user selections. Requires React and Pane component.

```jsx
<Pane aria-label="Radio Group Label 12" role="group">
  <Radio checked name="group" label="Radio default" />
  <Radio name="group" checked label="Radio checked" />
  <Radio name="group" disabled label="Radio disabled" />
  <Radio name="group" disabled label="Radio checked disabled" />
</Pane>
```

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

### Migrate SidebarTab to Tab component with React

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/migrations/v7.mdx

Example demonstrating how to replace the removed SidebarTab component with the Tab component and the 'direction="vertical"' prop in React.

```jsx
import React from 'react'
-import { SidebarTab } from 'evergreen-ui'
+import { Tab } from 'evergreen-ui'

-<SidebarTab>Settings</SidebarTab>
+<Tab direction="vertical">Settings</Tab>
```

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

### Evergreen UI Button Component Examples (React)

Source: https://context7.com/segmentio/evergreen/llms.txt

Demonstrates various configurations for the Evergreen UI Button component, including different appearances, intents, sizes, loading states, icon usage, and integration with Box layout props. It requires React and specific components from 'evergreen-ui'.

```javascript
import React, { useState } from 'react'
import { Button, IconButton, TextDropdownButton, AddIcon, TrashIcon } from 'evergreen-ui'

function ButtonExamples() {
  const [loading, setLoading] = useState(false)

  const handleSave = async () => {
    setLoading(true)
    try {
      await fetch('/api/save', { method: 'POST' })
    } finally {
      setLoading(false)
    }
  }

  return (
    <div>
      {/* Basic buttons with appearances */}
      <Button appearance="default">Cancel</Button>
      <Button appearance="primary" intent="success" iconBefore={AddIcon}>
        Create Item
      </Button>
      <Button appearance="minimal">Minimal</Button>
      <Button appearance="primary" intent="danger" iconBefore={TrashIcon}>
        Delete
      </Button>

      {/* Sizes */}
      <Button size="small">Small Button</Button>
      <Button size="medium">Medium Button</Button>
      <Button size="large">Large Button</Button>

      {/* Loading state */}
      <Button isLoading={loading} onClick={handleSave}>
        Save Changes
      </Button>

      {/* Icon button */}
      <IconButton icon={AddIcon} appearance="minimal" />

      {/* Text dropdown button */}
      <TextDropdownButton>Options</TextDropdownButton>

      {/* With Box props for layout */}
      <Button marginRight={16} paddingX={24}>Custom Spacing</Button>
    </div>
  )
}

```

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

### All Pane Elevation Options

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/foundations/layers.mdx

Provides a comprehensive example of all available elevation levels for the Pane component, ranging from 0 to 4. Each level offers a distinct visual effect, suitable for different UI elements like toasts and dialogs.

```jsx
<Pane clearfix>
  <Pane
    elevation={0}
    float="left"
    backgroundColor="white"
    width={200}
    height={120}
    margin={24}
    display="flex"
    justifyContent="center"
    alignItems="center"
    flexDirection="column"
  >
    <Text>Elevation 0</Text>
    <Text size={300}>Flat Panes</Text>
  </Pane>
  <Pane
    elevation={1}
    float="left"
    width={200}
    height={120}
    margin={24}
    display="flex"
    justifyContent="center"
    alignItems="center"
    flexDirection="column"
  >
    <Text>Elevation 1</Text>
    <Text size={300}>Floating Panes</Text>
  </Pane>
  <Pane
    elevation={2}
    float="left"
    width={200}
    height={120}
    margin={24}
    display="flex"
    justifyContent="center"
    alignItems="center"
    flexDirection="column"
  >
    <Text>Elevation 2</Text>
    <Text size={300}>Popovers and Dropdowns</Text>
  </Pane>
  <Pane
    elevation={3}
    float="left"
    width={200}
    height={120}
    margin={24}
    display="flex"
    justifyContent="center"
    alignItems="center"
    flexDirection="column"
  >
    <Text>Elevation 3</Text>
    <Text size={300}>Toasts</Text>
  </Pane>
  <Pane
    elevation={4}
    float="left"
    width={200}
    height={120}
    margin={24}
    display="flex"
    justifyContent="center"
    alignItems="center"
    flexDirection="column"
  >
    <Text>Elevation 4</Text>
    <Text size={300}>Dialog</Text>
  </Pane>
</Pane>
```

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

### SSR Setup with Evergreen UI for Next.js

Source: https://context7.com/segmentio/evergreen/llms.txt

This snippet demonstrates how to configure Next.js for Server-Side Rendering using Evergreen UI. It includes setting up `_document.js` to extract and inject styles and `_app.js` to provide the theme. This ensures styles are rendered correctly on the server and hydrated on the client, improving performance and SEO.

```javascript
// pages/_document.js (Next.js)
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { extractStyles } from 'evergreen-ui'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    const { css, hydrationScript } = extractStyles()

    return {
      ...initialProps,
      css,
      hydrationScript
    }
  }

  render() {
    const { css, hydrationScript } = this.props

    return (
      <Html lang="en">
        <Head>
          {/* Inject extracted CSS */}
          <style
            id="evergreen-css"
            dangerouslySetInnerHTML={{ __html: css }}
          />
        </Head>
        <body>
          <Main />
          {/* Inject hydration script */}
          {hydrationScript}
          <NextScript />
        </body>
      </Html>
    )
  }
}

// pages/_app.js
import { ThemeProvider, defaultTheme } from 'evergreen-ui'

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider value={defaultTheme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

// Example page component
import { Button, Heading, Pane } from 'evergreen-ui'

export default function HomePage() {
  return (
    <Pane padding={40}>
      <Heading size={800} marginBottom={16}>
        Welcome to Evergreen
      </Heading>
      <Button appearance="primary">Get Started</Button>
    </Pane>
  )
}

```

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

### Render Basic SearchInput Component

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/search-input.mdx

Demonstrates how to render a basic SearchInput component. It accepts a placeholder prop for user guidance. This component functions similarly to a standard text input.

```jsx
<SearchInput placeholder="Filter traits..." />
```

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

### JavaScript: Build Layouts with Pane and Card Components in Evergreen UI

Source: https://context7.com/segmentio/evergreen/llms.txt

Illustrates how to construct flexible layouts and UI elements using Evergreen UI's Pane and Card components in React. Demonstrates styling options like backgrounds, elevation, borders, and responsive layouts using flexbox and grid. Includes examples for basic content sections, interactive cards, and column layouts.

```javascript
import React from 'react'
import { Pane, Card, Heading, Paragraph, majorScale, minorScale } from 'evergreen-ui'

function LayoutExample() {
  return (
    <Pane padding={majorScale(3)}>
      {/* Basic pane with background */}
      <Pane background="tint2" padding={majorScale(2)} marginBottom={majorScale(2)}>
        <Heading size={500}>Section Title</Heading>
        <Paragraph marginTop={minorScale(2)}>Content goes here</Paragraph>
      </Pane>

      {/* Card with elevation */}
      <Card
        elevation={1}
        hoverElevation={2}
        padding={majorScale(2)}
        marginBottom={majorScale(2)}
      >
        <Heading size={400}>Interactive Card</Heading>
        <Paragraph marginTop={minorScale(2)}>
          This card has elevation and hover effects
        </Paragraph>
      </Card>

      {/* Bordered pane */}
      <Pane
        border
        borderRadius={8}
        padding={majorScale(2)}
        marginBottom={majorScale(2)}
      >
        <Heading size={400}>Bordered Container</Heading>
      </Pane>

      {/* Flex layout */}
      <Pane display="flex" gap={majorScale(2)}>
        <Pane flex={1} background="tint2" padding={majorScale(2)}>
          Left column
        </Pane>
        <Pane flex={1} background="tint2" padding={majorScale(2)}>
          Right column
        </Pane>
      </Pane>

      {/* Grid layout */}
      <Pane
        display="grid"
        gridTemplateColumns="repeat(3, 1fr)"
        gap={majorScale(2)}
        marginTop={majorScale(2)}
      >
        {[1, 2, 3].map(i => (
          <Card key={i} elevation={1} padding={majorScale(2)}>
            Item {i}
          </Card>
        ))}
      </Pane>
    </Pane>
  )
}

```

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

### Migrate SegmentedControl to Group and Button with React

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/migrations/v7.mdx

Example showing the migration from the removed SegmentedControl component to a combination of Group and Button components in React. Manual state management for click events and active states is now required.

```jsx
import React, { useState } from 'react'
-import { SegmentedControl } from 'evergreen-ui'
+import { Group, Button } from 'evergreen-ui'

const OPTIONS = [
  { label: 'Small (24px)', value: 'small' },
  { label: 'Medium (32px)', value: 'medium' },
  { label: 'Large (40px)', value: 'large' }
]

const App: React.FC = () => {
  const [size, setSize] = useState<string>('small')

  return (
-    <SegmentedControl
-      onChange={setSize}
-      options={OPTIONS}
-      value={size}
-    />
+
+    <Group>
+      {OPTIONS.map(({ value, label }) => (
+        <Button
+          isActive={value === size}
+          key={label}
+          onClick={() => setSize(value)}
+        >
+          {label}
+        </Button>
+      ))}
+    </Group>
+  )
+)
}
```

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

### SSR Setup with Evergreen UI for Express

Source: https://context7.com/segmentio/evergreen/llms.txt

This code demonstrates how to set up Server-Side Rendering (SSR) for an Express application using Evergreen UI. It uses `react-dom/server` to render the React component tree and `evergreen-ui`'s `extractStyles` to collect CSS. The generated HTML includes the extracted styles and hydration script, ensuring a consistent look and feel between server and client.

```javascript
// For Express SSR
import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { extractStyles } from 'evergreen-ui'
import App from './App'

const app = express()

app.get('*', (req, res) => {
  const htmlContent = renderToString(<App />)
  const { css, cache, hydrationScript } = extractStyles()

  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <style id="evergreen-css">${css}</style>
      </head>
      <body>
        <div id="root">${htmlContent}</div>
        ${hydrationScript}
        <script src="/bundle.js"></script>
      </body>
    </html>
  `

  res.send(html)
})

app.listen(3000)

```

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

### Resize Evergreen UI icon with size prop in JSX

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/foundations/icons.mdx

Shows how to change an icon's dimensions by providing the size prop. The value is interpreted as pixel size for the SVG. This example renders a BanCircleIcon at 40 pixels.

```jsx
<BanCircleIcon size={40} />
```

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

### Basic Tablist Implementation

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/tabs.mdx

Demonstrates the basic usage of Tablist and Tab components to create a standard tabbed interface. It manages tab selection state and renders corresponding content panels. Assumes React and Evergreen UI library are available.

```jsx
function BasicTabsExample() {
  const [selectedIndex, setSelectedIndex] = React.useState(0)
  const [tabs] = React.useState(['Traits', 'Event History', 'Identities'])
  return (
    <Pane height={120}>
      <Tablist marginBottom={16} flexBasis={240} marginRight={24}>
        {tabs.map((tab, index) => (
          <Tab
            aria-controls={`panel-${tab}`}
            isSelected={index === selectedIndex}
            key={tab}
            onSelect={() => setSelectedIndex(index)}
          >
            {tab}
          </Tab>
        ))}
      </Tablist>
      <Pane padding={16} background="tint1" flex="1">
        {tabs.map((tab, index) => (
          <Pane
            aria-labelledby={tab}
            aria-hidden={index !== selectedIndex}
            display={index === selectedIndex ? 'block' : 'none'}
            key={tab}
            role="tabpanel"
          >
            <Paragraph>Panel {tab}</Paragraph>
          </Pane>
        ))}
      </Pane>
    </Pane>
  )
}
```

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

### Render Evergreen Button component in a React app

Source: https://github.com/segmentio/evergreen/blob/master/README.md

Demonstrates importing and rendering a Button component from evergreen‑ui within a React application. The example assumes a standard Create React App setup and renders the button into the root DOM node.

```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'

ReactDOM.render(<Button>I am using 🌲 Evergreen!</Button>, document.getElementById('root'))
```

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

### Implement Autocomplete and Combobox in React with Evergreen UI

Source: https://context7.com/segmentio/evergreen/llms.txt

Demonstrates how to create searchable input components with custom rendering and state management. Includes examples for simple autocomplete, combobox with object items, and custom input rendering. Uses React hooks for state management and Evergreen UI components.

```javascript
import React, { useState } from 'react'\nimport {\n  Autocomplete,\n  Combobox,\n  Pane,\n  Text,\n  Avatar,\n  majorScale\n} from 'evergreen-ui'\n\nfunction AutocompleteExample() {\n  const [selectedUser, setSelectedUser] = useState('')\n  const [selectedItem, setSelectedItem] = useState(null)\n\n  const users = [\n    'John Doe',\n    'Jane Smith',\n    'Bob Johnson',\n    'Alice Williams',\n    'Charlie Brown'\n  ]\n\n  const items = [\n    { id: 1, name: 'React', category: 'Framework' },\n    { id: 2, name: 'Vue', category: 'Framework' },\n    { id: 3, name: 'Angular', category: 'Framework' },\n    { id: 4, name: 'TypeScript', category: 'Language' },\n    { id: 5, name: 'JavaScript', category: 'Language' }\n  ]\n\n  return (\n    <Pane padding={majorScale(3)}>\n      {/* Simple autocomplete */}\n      <Autocomplete\n        title="User"\n        onChange={setSelectedUser}\n        items={users}\n      >\n        {props => {\n          const { getInputProps, getRef, inputValue } = props\n          return (\n            <input\n              placeholder="Search users..."\n              value={inputValue}\n              ref={getRef}\n              {...getInputProps()}\n              style={{\n                width: '100%',\n                padding: 8,\n                fontSize: 14,\n                border: '1px solid #ccc',\n                borderRadius: 4\n              }}\n            />\n          )\n        }}\n      </Autocomplete>\n\n      <Text marginTop={majorScale(2)} display="block">\n        Selected: {selectedUser || 'None'}\n      </Text>\n\n      {/* Combobox with custom rendering */}\n      <Combobox\n        openOnFocus\n        placeholder="Search frameworks..."\n        items={items}\n        itemToString={item => item ? item.name : ''}\n        onChange={setSelectedItem}\n        marginTop={majorScale(3)}\n      />\n\n      {selectedItem && (\n        <Pane marginTop={majorScale(2)}>\n          <Text>Selected: {selectedItem.name}</Text><br />\n          <Text size={300} color="muted">Category: {selectedItem.category}</Text>\n        </Pane>\n      )}\n\n      {/* Autocomplete with custom item renderer */}\n      <Autocomplete\n        title="Team Members"\n        onChange={setSelectedUser}\n        items={users}\n        marginTop={majorScale(3)}\n      >\n        {props => {\n          const { getInputProps, getRef, inputValue, openMenu } = props\n          return (\n            <input\n              placeholder="Type to search..."\n              value={inputValue}\n              ref={getRef}\n              {...getInputProps({\n                onFocus: () => openMenu()\n              })}\n              style={{\n                width: '100%',\n                padding: 8,\n                fontSize: 14,\n                border: '1px solid #ccc',\n                borderRadius: 4\n              }}\n            />\n          )\n        }}\n      </Autocomplete>\n    </Pane>\n  )\n}
```

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

### Update Component Theme Selectors in Evergreen

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/migrations/v7.mdx

This example shows how to migrate pseudoselectors in custom themes for Evergreen components. Previously defined pseudoselectors like _isSelectable and _disabled should now be nested within a 'selectors' object. This change aligns with ui-box@5.2.0's new selectors API for defining prop-based states.

```diff
const baseStyle = {
  outline: 'none',
  textDecoration: 'none',
  display: 'flex',
  position: 'relative',
  paddingX: 12,

+  selectors: {
    _isSelectable: {
      cursor: 'pointer'
    },

    _disabled: {
      cursor: 'not-allowed',
      userSelect: 'none'
    }
+  }
}
```

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

### Non-table Empty State Example (React)

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/patterns/empty-states.mdx

Shows an example of a non-table empty state, typically used for content outside of tables. This example includes a dark background for contrast and a primary call to action. It utilizes the EmptyState component and requires appropriate icons.

```jsx
<EmptyState
  background="dark"
  title="You need permission for these sources"
  orientation="horizontal"
  icon={<LockIcon color="#EBAC91" />}
  iconBgColor="#F8E3DA"
  description="To see these sources, request access."
  primaryCta={<EmptyState.PrimaryButton>Request access</EmptyState.PrimaryButton>}
/>
```

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

### Create a searchable Table with React and Evergreen UI

Source: https://context7.com/segmentio/evergreen/llms.txt

Demonstrates how to implement a searchable and sortable table component using Evergreen UI's Table. Includes filtering functionality and avatar integration. Requires React and evergreen-ui as dependencies.

```javascript
import React, { useState } from 'react'
import { Table, Avatar } from 'evergreen-ui'

function TableExample() {
  const [searchQuery, setSearchQuery] = useState('')
  const [data, setData] = useState([
    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' }
  ])

  const filteredData = data.filter(item =>
    item.name.toLowerCase().includes(searchQuery.toLowerCase())
  )

  return (
    <Table>
      <Table.Head>
        <Table.SearchHeaderCell
          onChange={setSearchQuery}
          value={searchQuery}
          placeholder="Search by name..."
        />
        <Table.TextHeaderCell>Name</Table.TextHeaderCell>
        <Table.TextHeaderCell>Email</Table.TextHeaderCell>
        <Table.TextHeaderCell>Role</Table.TextHeaderCell>
      </Table.Head>
      <Table.Body height={240}>
        {filteredData.map(user => (
          <Table.Row key={user.id} isSelectable>
            <Table.Cell display="flex" alignItems="center">
              <Avatar name={user.name} size={32} marginRight={8} />
            </Table.Cell>
            <Table.TextCell>{user.name}</Table.TextCell>
            <Table.TextCell>{user.email}</Table.TextCell>
            <Table.TextCell>{user.role}</Table.TextCell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  )
}
```

```javascript
function VirtualTableExample() {
  const items = Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    name: `User ${i}`,
    email: `user${i}@example.com`
  }))

  return (
    <Table>
      <Table.Head>
        <Table.TextHeaderCell>Name</Table.TextHeaderCell>
        <Table.TextHeaderCell>Email</Table.TextHeaderCell>
      </Table.Head>
      <Table.VirtualBody height={600}>
        {items.map(item => (
          <Table.Row key={item.id} height={48}>
            <Table.TextCell>{item.name}</Table.TextCell>
            <Table.TextCell>{item.email}</Table.TextCell>
          </Table.Row>
        ))}
      </Table.VirtualBody>
    </Table>
  )
}
```

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

### Using Default Theme in Evergreen Components

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/theming.mdx

Demonstrates how to apply the default Evergreen theme to various components like Heading, Button, Alert, and Checkbox using the ThemeProvider.

```jsx
<ThemeProvider value={defaultTheme}>
  <Pane display="flex" flexDirection="column" alignItems="flex-start">
    <Heading marginBottom={majorScale(2)}>Using Default Theme</Heading>
    <Button marginBottom={majorScale(2)} appearance="primary">
      Confirm
    </Button>
    <Alert marginBottom={majorScale(2)} title="There was an issue processing your data!" intent="warning" />
    <Checkbox checked={true} marginBottom={majorScale(2)} label="I agree" />
  </Pane>
</ThemeProvider>
```

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

### Evergreen Table Text Header Cell Example

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/table.mdx

An example of using the Table.TextHeaderCell component in Evergreen for standard text headers within a table. This is a common component for labeling columns.

```jsx
<Table.Head>
  <Table.TextHeaderCell>Age</Table.TextHeaderCell>
  <Table.TextHeaderCell>Email</Table.TextHeaderCell>
</Table.Head>
```

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

### Migrate from classicTheme to defaultTheme in Evergreen

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/introduction/migrations/v7.mdx

This code snippet demonstrates the migration from using `classicTheme` to `defaultTheme` with Evergreen's `ThemeProvider`. The `classicTheme` has been removed in v7, and applications should now use the `defaultTheme` for consistent styling. This change simplifies the theming system and aligns with modern visual design principles.

```diff
import React from 'react'
-import { classicTheme, ThemeProvider } from 'evergreen-ui'
+import { defaultTheme, ThemeProvider } from 'evergreen-ui'

const App: React.FC = (props) => {
  const { children } = props
-  return <ThemeProvider value={classicTheme}>{children}</ThemeProvider>
+  return <ThemeProvider value={defaultTheme}>{children}</ThemeProvider>
}
```

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

### Full width TagInput component styling

Source: https://github.com/segmentio/evergreen/blob/master/docs/documentation/components/tag-input.mdx

Illustrates width customization using the width prop set to 100%. Demonstrates responsive container sizing for tag input. Retains standard controlled behavior with state management.

```jsx
function FullWidthTagInputExample() {
  const [values, setValues] = React.useState(['Kauri', 'Willow'])
  return (
    <TagInput
      inputProps={{ placeholder: 'Add trees...' }}
      values={values}
      width="100%"
      onChange={(values) => {
        setValues(values)
      }}
    />
  )
}
```