### PageHeader Theming Example (size.small.pad)

Source: https://v2.grommet.io/pageheader

Example of theme customization for padding when PageHeader size is 'small'.

```json
{
  "pageHeader": {
    "size": {
      "small": {
        "pad": {
          "top": "medium",
          "bottom": "small"
        }
      }
    }
  }
}
```

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

### PageHeader Theming Example (pad)

Source: https://v2.grommet.io/pageheader

Example of theme customization for the PageHeader padding, using a string value for consistent padding.

```json
{
  "pageHeader": {
    "pad": "large"
  }
}
```

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

### PageHeader Theming Example (size.small.title)

Source: https://v2.grommet.io/pageheader

Example of theme customization for the title when PageHeader size is 'small', applying Heading props.

```json
{
  "pageHeader": {
    "size": {
      "small": {
        "title": {
          "size": "small"
        }
      }
    }
  }
}
```

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

### PageHeader Theming Example (size.medium.pad)

Source: https://v2.grommet.io/pageheader

Example of theme customization for padding when PageHeader size is 'medium'. Defaults to global 'pageHeader.pad' if not specified.

```json
{
  "pageHeader": {
    "size": {
      "medium": {
        "pad": {}
      }
    }
  }
}
```

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

### SelectMultiple Basic Usage Example

Source: https://v2.grommet.io/selectmultiple

A basic example demonstrating how to use the SelectMultiple component. It shows how to provide placeholder text and an array of options for selection.

```jsx
function Example() {
  return (
    <SelectMultiple
      placeholder="Select"
      options={['small', 'medium', 'large']}
    />
  );
}
```

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

### SelectMultiple Prop: help String Example

Source: https://v2.grommet.io/selectmultiple

An example of the help prop using a string, providing simple help text above the options in the drop-down.

```javascript
help text
```

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

### Basic Menu Example

Source: https://v2.grommet.io/menu

A simple example demonstrating how to use the Menu component with basic items. It shows the structure for defining menu items with labels and click handlers.

```javascript
import { Menu } from 'grommet';

<Menu
  label="Menu"
  items={[
    { label: 'First Action', onClick: () => {} },
    { label: 'Second Action', onClick: () => {} },
  ]} 
/>
```

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

### PageHeader Theming Example (actions)

Source: https://v2.grommet.io/pageheader

Example of theme customization for the PageHeader's actions container, applying Box props to control alignment.

```json
{
  "pageHeader": {
    "actions": {
      "align": "end"
    }
  }
}
```

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

### SelectMultiple Prop: help Node Example

Source: https://v2.grommet.io/selectmultiple

An example of the help prop using a React node, allowing for more complex help text content above the options.

```jsx
<Box background='gray'> help text </Box>
```

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

### PageHeader Theming Example (title)

Source: https://v2.grommet.io/pageheader

Example of theme customization for the PageHeader's title, applying Heading props to control fill and margin.

```json
{
  "pageHeader": {
    "title": {
      "fill": true,
      "margin": "none"
    }
  }
}
```

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

### Grommet Header Component Example

Source: https://v2.grommet.io/header

Example of how to use the Grommet Header component with a background, an icon button, and a menu. This component acts as a container for introductory content and can be customized using Box properties.

```javascript
<Header background="brand">
  <Button icon={<Icons.Home />} hoverIndicator />
  <Menu label="account" items={[{ label: 'logout' }]} />
</Header>
```

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

### PageHeader Theming Example (size.small.subtitle)

Source: https://v2.grommet.io/pageheader

Example of theme customization for the subtitle when PageHeader size is 'small', applying Paragraph props.

```json
{
  "pageHeader": {
    "size": {
      "small": {
        "subtitle": {
          "size": "small"
        }
      }
    }
  }
}
```

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

### Chart Component Example - Grommet JS

Source: https://v2.grommet.io/chart

This example demonstrates the basic usage of the Grommet Chart component in JavaScript. It defines bounds and values to render a chart, with labels for data points. This is a foundational example for visualizing data within the Grommet framework.

```javascript
import { Chart } from 'grommet';

<Chart
  bounds={[[0, 7], [0, 100]]}
  values={[
    { value: [7, 100], label: 'one hundred' },
    { value: [6, 70], label: 'seventy' },
    { value: [5, 60], label: 'sixty' },
    { value: [4, 80], label: 'eighty' },
    { value: [3, 40], label: 'forty' },
    { value: [2, 0], label: 'zero' },
    { value: [1, 30], label: 'thirty' },
    { value: [0, 60], label: 'sixty' },
  ]}
  aria-label="chart"
/>;
```

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

### PageHeader Theming Example (size.medium.subtitle)

Source: https://v2.grommet.io/pageheader

Example of theme customization for the subtitle when PageHeader size is 'medium'. Defaults to global 'pageHeader.subtitle' if not specified.

```json
{
  "pageHeader": {
    "size": {
      "medium": {
        "subtitle": {}
      }
    }
  }
}
```

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

### Grommet DataFilters Usage Example

Source: https://v2.grommet.io/datafilters

An example demonstrating how to use the DataFilters component within a Grommet application, integrating it with Data, Toolbar, and DataTable components. This setup allows for interactive filtering of data displayed in a table.

```javascript
<Data
  data={[{ name: 'Scott' }, { name: 'Zelda' }]} 
>
  <Toolbar><DataFilters /></Toolbar>
  <DataTable />
</Data>
```

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

### PageHeader Theming Example (parent)

Source: https://v2.grommet.io/pageheader

Example of theme customization for the PageHeader's parent container, applying Box props to control alignment.

```json
{
  "pageHeader": {
    "parent": {
      "align": "start"
    }
  }
}
```

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

### Grommet Diagram Theme Configuration Examples (Object)

Source: https://v2.grommet.io/diagram

Shows how to configure the 'diagram.animation', 'diagram.line.color', and 'global.colors' properties within the Grommet theme object. These examples demonstrate setting durations for animations and defining color schemes.

```javascript
const theme = {
  diagram: {
    animation: {
      pulse: {
        duration: 1000,
      },
      draw: {
        duration: 2000,
      },
    },
    line: {
      color: "graph-0",
    },
  },
  global: {
    colors: {
      "graph-0": "#6FFFB0",
      "graph-1": "#00873D",
      // ... other color definitions
    },
  },
};
```

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

### Grommet Calendar Props Examples

Source: https://v2.grommet.io/calendar

This section showcases various ways to configure the Grommet Calendar component using its extensive props. Examples include setting date ranges, disabling specific dates, customizing the header, and internationalizing messages. These examples illustrate the flexibility and power of the Calendar component.

```javascript
// Example for 'bounds' prop
<Calendar bounds={["2018-09-01", "2018-12-31"]}/>
```

```javascript
// Example for 'disabled' prop with a date range
<Calendar disabled={ [["2018-12-23", "2018-12-26"]] }/>
```

```javascript
// Example for 'header' prop custom rendering
<Calendar header={({ date, locale, onPreviousMonth, onNextMonth, previousInBound, nextInBound }) => (
  <>
    <button onClick={onPreviousMonth} disabled={!previousInBound}>
      Previous
    </button>
    <span>{date.toLocaleDateString(locale, { month: 'long', year: 'numeric' }) }</span>
    <button onClick={onNextMonth} disabled={!nextInBound}>
      Next
    </button>
  </>
)}/>
```

```javascript
// Example for 'messages' prop customization
<Calendar messages={{ previous: "Prev Month", next: "Next Month" }}/>
```

```javascript
// Example for 'date' prop with a single date
<Calendar date="2018-10-16T12:22:00Z"/>
```

```javascript
// Example for 'dates' prop with multiple selected dates
<Calendar dates={["2018-10-12", "2018-10-17"]}/>
```

```javascript
// Example for 'dates' prop with a range of dates
<Calendar dates={ [["2018-10-19", "2018-11-23"]] }/>
```

```javascript
// Example for 'firstDayOfWeek' prop set to Monday
<Calendar firstDayOfWeek={1}/>
```

```javascript
// Example for 'children' prop to customize day rendering
<Calendar>{({ date, day, isInRange, isSelected }) => (
  <div style={{ padding: '5px', background: isSelected ? 'blue' : 'none' }}>
    {day}
  </div>
)}</Calendar>
```

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

### Grommet Diagram Component Example (React)

Source: https://v2.grommet.io/diagram

An example of how to use the Grommet Diagram component in a React application. It demonstrates setting up connections with specified 'fromTarget', 'toTarget', 'thickness', and 'color'.

```jsx
import React from 'react';
import { Stack, Diagram } from 'grommet';

const App = () => (
  <Stack guidingChild={1}>
    <Diagram
      connections={[
        {
          fromTarget: '1',
          toTarget: '2',
          thickness: 'xsmall',
          color: 'graph-0',
        },
        {
          fromTarget: '1',
          toTarget: '4',
          thickness: 'xsmall',
          color: 'graph-1',
          type: 'rectilinear',
        },
      ]} />
  </Stack>
);

export default App;
```

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

### Video Component Theming Examples

Source: https://v2.grommet.io/video

Demonstrates how to customize the appearance and behavior of the Video component through Grommet's theming system. Examples include setting caption background, icon replacements, scrubber color, and custom CSS styles.

```javascript
const customTheme = {
  global: {
    edgeSize: {
      responsiveBreakpoint: 'small',
      xsmall: '6px'
    }
  },
  video: {
    captions: {
      background: 'rgba(0, 0, 0, 0.7)'
    },
    icons: {
      closedCaption: <MyClosedCaptionIcon />,
      configure: <MyConfigureIcon />,
      fullScreen: <MyFullScreenIcon />,
      pause: <MyPauseIcon />,
      play: <MyPlayIcon />,
      reduceVolume: <MyReduceVolumeIcon />,
      volume: <MyVolumeIcon />
    },
    scrubber: {
      color: 'light-4'
    }
  }
};

// Usage with ThemeProvider
<Grommet theme={customTheme}>
  <Video />
</Grommet>

// Example of extend with CSS
<Video extend={css`color: 'blue'`} />

// Example of extend with a function
<Video extend={(props) => ({ /* styles */ })} />
```

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

### PageHeader Theming Example (subtitle)

Source: https://v2.grommet.io/pageheader

Example of theme customization for the PageHeader's subtitle, applying Paragraph props to control margin.

```json
{
  "pageHeader": {
    "subtitle": {
      "margin": "none"
    }
  }
}
```

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

### ToggleGroup options Prop Examples

Source: https://v2.grommet.io/togglegroup

Provides examples of how to define the options available within a ToggleGroup. It covers both simple string arrays and more complex objects with icons, labels, values, and tips.

```jsx
options=["option1", "option2"]
```

```jsx
options=[
  {
    icon: <Bold />,
    label:  "Bold"
    value: "bold",
    tip: "bold"
  }
]
```

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

### Grommet dir Prop Example (String)

Source: https://v2.grommet.io/grommet

Illustrates the use of the dir prop for specifying layout direction, particularly for right-to-left (RTL) contexts. The example shows setting it to 'rtl'.

```string
"rtl"
```

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

### PageHeader Theming Example (pad object)

Source: https://v2.grommet.io/pageheader

Example of theme customization for PageHeader padding using an object to specify different padding values for top and bottom.

```json
{
  "pageHeader": {
    "pad": {
      "top": "large",
      "bottom": "medium"
    }
  }
}
```

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

### Configuring DataChart Axes and Guides

Source: https://v2.grommet.io/datachart

Shows how to customize the axes and add guide lines to the DataChart. It demonstrates using the 'series' prop with a 'prefix' for formatting and the 'guide' prop to control axis granularity.

```jsx
() => {
const data = [{ date: '2020-08-20', amount: 2 }, { date: '2020-08-21', amount: 47 }, { date: '2020-08-22', amount: 33 }];
return (
<DataChart
data={data}
series={['date', { property: 'amount', prefix: '$' }]}
chart={[
{ property: 'amount', type: 'line', opacity: 'medium', thickness: 'xsmall', round },
{ property: 'amount', type: 'point', point: 'star', thickness: 'medium' }
]}
guide={{ x: { granularity: 'fine' } }}
/>
);
}
```

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

### Grommet full Prop Example (String 'min')

Source: https://v2.grommet.io/grommet

Provides an example of using the 'full' prop with the string value 'min'. This setting ensures the component occupies at least the whole viewport, allowing the viewport to manage scrolling.

```string
"min"
```

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

### Grommet Tabs Component Example

Source: https://v2.grommet.io/tabs

Demonstrates the basic structure and usage of the Grommet Tabs component, rendering two tabs with associated content. This example showcases how to define tabs and their content using JSX.

```jsx
<Tabs>
  <Tab title="tab 1">
    <Box pad="medium">One</Box>
  </Tab>
  <Tab title="tab 2">
    <Box pad="medium">Two</Box>
  </Tab>
</Tabs>
```

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

### List Component Usage Example (React)

Source: https://v2.grommet.io/list

A basic example demonstrating how to use the Grommet UI List component with sample data. It specifies keys for primary and secondary content display.

```jsx
<List
  primaryKey="name"
  secondaryKey="percent"
  data={[
    { name: 'Alan', percent: 20 },
    { name: 'Bryan', percent: 30 },
    { name: 'Chris', percent: 40 },
    { name: 'Eric', percent: 80 },
  ]} 
/>
```

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

### Install Grommet Stable Branch via NPM/Yarn

Source: https://v2.grommet.io/stablebranch

Update your 'package.json' to point to the grommet stable branch for installation. This allows access to the latest features before official releases.

```json
{
  "dependencies": {
    "grommet": "https://github.com/grommet/grommet/tarball/stable"
  }
}
```

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

### Data Component Props - Default View Object Example

Source: https://v2.grommet.io/data

Shows an example of the 'defaultView' prop, used to define the initial state of the data view, including properties, search, sort, page, and step.

```javascript
{
  properties: {
    country: ['US', 'UK'],
    age: {
      min: 22,
      max: 56,
    },
  },
  search: 'com',
  sort: {
    property: 'date',
    direction: 'desc',
  },
  page: 1,
  step: 50,
  columns: ['country']
}
```

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

### Grommet Grid Layout Example

Source: https://v2.grommet.io/grid

This example demonstrates a basic layout using the Grommet Grid component. It defines rows, columns, gaps, and areas to structure content within Header, Nav, and Main sections.

```jsx
<Grid
  rows={['xxsmall', 'xsmall']}
  columns={['xsmall', 'small']}
  gap="small"
  areas={[
    { name: 'header', start: [0, 0], end: [1, 0] },
    { name: 'nav', start: [0, 1], end: [0, 1] },
    { name: 'main', start: [1, 1], end: [1, 1] },
  ]}>
  <Box gridArea="header" background="brand" />
  <Box gridArea="nav" background="light-5" />
  <Box gridArea="main" background="light-2" />
</Grid>
```

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

### Pagination Theming Example (Button Styles)

Source: https://v2.grommet.io/pagination

Provides an example of how to theme the pagination buttons using the 'pagination.button' theme object. This allows customization of active states, hover effects, colors, and sizes for the pagination buttons.

```javascript
const customTheme = {
  pagination: {
    button: {
      active: {
        background: {
          color: 'active-background',
        },
      },
      color: 'text-strong',
      hover: {
        background: {
          color: 'background-contrast',
        },
        color: undefined,
      },
      size: {
        small: {
          border: { radius: '3px', width: '2px' },
          pad: { vertical: '4px', horizontal: '4px' },
          font: '14px',
          height: '30px',
          width: '30px',
        },
        // ... other sizes
      },
    },
  },
};

// Usage with <Grommet theme={customTheme}>
// <Pagination numberItems={100} />
```

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

### React Select Component Example

Source: https://v2.grommet.io/select

Demonstrates basic usage of the Grommet Select component in a React application. It includes state management for the selected value and a list of options. This example requires React and Grommet.

```jsx
function Example() {
const [value, setValue] = React.useState('medium');
return (
<Select
options={['small', 'medium', 'large']}
value={value}
onChange={({ option }) => setValue(option)}
/>
);
}
```

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

### Grommet Icon a11yTitle Prop Example

Source: https://v2.grommet.io/icons

Example showing the 'a11yTitle' prop for Grommet icons, which provides a user-friendly label for screen readers. This prop accepts a string value.

```javascript
<Icons.Home a11yTitle="A user friendly label for screen readers" />
```

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

### SelectMultiple Prop: dropTarget Example

Source: https://v2.grommet.io/selectmultiple

An example showing how to use the dropTarget prop, which specifies a React reference for the element the options drop should align to.

```javascript
ref.current
```

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

### Video Component Props Examples

Source: https://v2.grommet.io/video

Illustrates various props available for the Grommet Video component, such as 'a11yTitle', 'alignSelf', 'autoPlay', 'controls', 'fit', 'gridArea', 'loop', 'margin', 'messages', and 'mute'. These examples show how to configure player behavior and appearance.

```jsx
// Example for a11yTitle
<Video a11yTitle="A user friendly label for screen readers">
  {/* ... video source ... */}
</Video>

// Example for autoPlay and loop
<Video autoPlay={true} loop={true}>
  {/* ... video source ... */}
</Video>

// Example for controls='over'
<Video controls="over">
  {/* ... video source ... */}
</Video>

// Example for fit='contain'
<Video fit="contain">
  {/* ... video source ... */}
</Video>

// Example for mute
<Video mute={true}>
  {/* ... video source ... */}
</Video>
```

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

### Tag Theming Examples

Source: https://v2.grommet.io/tag

Provides examples of how to customize the Tag component's appearance via theme properties. This includes adjustments to background, border, icons, padding, rounding, and size-specific styles.

```javascript
const customTheme = {
  "tag": {
    "background": "red",
    "border": true,
    "icons": {
      "remove": FormClose
    },
    "pad": {
      "horizontal": "small",
      "vertical": "xsmall"
    },
    "round": "large",
    "size": {
      "xsmall": {
        "pad": {
          "horizontal": "8px",
          "vertical": "xxsmall"
        },
        "icon": {
          "size": "18px"
        },
        "remove": {
          "size": "large"
        }
      }
    }
  }
};

```

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

### TextInput Props Example - React

Source: https://v2.grommet.io/textinput

Illustrates how to configure the TextInput component using its various props. This example highlights props like 'placeholder', 'icon', 'suggestions', and event handlers.

```jsx
<TextInput placeholder="search"
  icon={<Search />}
  suggestions={["apple", "banana", "orange"]}
  onChange={...}
  onSelect={...}
/>
```

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

### Grommet Box Layout Example

Source: https://v2.grommet.io/box

This example demonstrates a basic Box layout with row direction and borders. It utilizes nested Box components with different padding and background colors. This showcases the flexibility of Box for structuring content.

```jsx
<Box
  direction="row"
  border={{ color: 'brand', size: 'large' }}
  pad="medium"
>
  <Box pad="small" background="dark-3" />
  <Box pad="medium" background="light-3" />
</Box>
```

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

### Basic Video Player Example

Source: https://v2.grommet.io/video

A simple example of how to embed a video player using the Grommet Video component. It includes a video source and a subtitle track. The controls are set to 'over' and the video fits the container 'cover'.

```jsx
<Video controls="over" fit="cover">
<source key="video" src="/assets/small.mp4" type="video/mp4" />
<track
key="cc"
label="English"
kind="subtitles"
srcLang="en"
src="/assets/small-en.vtt"
default
/>
</Video>
```

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

### DataSummary Component Usage Example

Source: https://v2.grommet.io/datasummary

Example demonstrating how to use the DataSummary component within a Grommet Data structure. It shows the basic setup with data and related components like DataTable. The DataSummary component itself is rendered without explicit props in this basic example.

```jsx
<Data
data={[{ name: 'Scott' }, { name: 'Zelda' }]}>
  <DataSummary />
  <DataTable />
</Data>
```

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

### ToggleGroup defaultValue Prop Examples

Source: https://v2.grommet.io/togglegroup

Illustrates how to set the initial selected value for the ToggleGroup component using the `defaultValue` prop. It shows examples for both single and multiple selections.

```jsx
defaultValue="option1"
```

```jsx
defaultValue=["option1", "option2"]
```

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

### MaskedInput Component Structure Example

Source: https://v2.grommet.io/maskedinput

This example demonstrates the basic structure of the MaskedInput component, defining a mask for time input with hour, minute, and seconds.

```jsx
<MaskedInput
mask={[
{
length: [1, 2],
options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', ],
regexp: /^1[1-2]$|^[0-9]$/,
placeholder: 'hh',
},
{
fixed: ':',
},
{
length: 2,
options: ['00', '15', '30', '45'],
regexp: /^[0-5][0-9]$|^[0-9]$/,
placeholder: 'mm',
},
{
fixed: ' ',
},
{
length: 2,
options: ['00', '15', '30', '45'],
regexp: /^[0-5][0-9]$|^[0-9]$/,
placeholder: 'ss',
},
]}
/>
```

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

### Accordion Theming Examples

Source: https://v2.grommet.io/accordion

These examples illustrate different ways to theme the Accordion component using Grommet's theme object. They cover background customization for hover states, text color for headings on hover, and defining heading levels and margins.

```json
{
  "accordion": {
    "hover": {
      "background": "background-contrast"
    },
    "heading": {
      "level": 4,
      "margin": "small"
    },
    "icons": {
      "collapse": <FormUp />
    }
  }
}
```

```json
{
  "accordion": {
    "hover": {
      "heading": {
        "color": "brand"
      }
    }
  }
}
```

```json
{
  "accordion": {
    "hover": {
      "background": {
        "dark": "light-4",
        "light": "dark-3"
      }
    }
  }
}
```

```json
{
  "accordion": {
    "theme.accordion.hover.background": {
      "color": "neutral-1",
      "dark": true,
      "opacity": true,
      "position": "bottom",
      "repeat": "no-repeat",
      "size": "cover",
      "image": "url(//my.com/assets/img.png)"
    }
  }
}
```

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

### Grommet Background Prop Examples (Object)

Source: https://v2.grommet.io/grommet

Shows how to configure the background prop using an object for more advanced styling options. This includes setting color, opacity, position, repeat, size, and image properties.

```object
{
  color: "neutral-1",
  dark: true,
  opacity: true,
  position: "bottom",
  repeat: "no-repeat",
  size: "cover",
  image: "url(//my.com/assets/img.png)",
  light: "string",
  clip: "text",
  rotate: 45
}
```

```object
{ dark: "light-2", light: "dark-2" }
```

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

### Grommet Box Align Prop Examples

Source: https://v2.grommet.io/box

The `align` prop controls how content is aligned along the cross axis within a Box. It accepts any valid CSS `align-items` value, including composed ones like 'first baseline' and 'unsafe start'. The examples show common alignment options.

```jsx
<Box align="start">
  {/* Content aligned to the start */}
</Box>
```

```jsx
<Box align="center">
  {/* Content aligned to the center */}
</Box>
```

```jsx
<Box align="end">
  {/* Content aligned to the end */}
</Box>
```

```jsx
<Box align="baseline">
  {/* Content aligned to the baseline */}
</Box>
```

```jsx
<Box align="stretch">
  {/* Content stretched */}
</Box>
```

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

### MaskedInput textAlign Prop Examples

Source: https://v2.grommet.io/maskedinput

Shows the 'textAlign' prop for MaskedInput, controlling the horizontal alignment of the text within the input field ('start', 'center', or 'end').

```javascript
"start"
```

```javascript
"center"
```

```javascript
"end"
```

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

### RadioButtonGroup Options (Array of Strings)

Source: https://v2.grommet.io/radiobuttongroup

Illustrates how to define options for the RadioButtonGroup component using an array of strings. This is a simple way to present choices to the user. This example assumes the Grommet library is installed and available.

```javascript
["option1", "option2"]
```

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

### Grommet Tabs justify Prop Example

Source: https://v2.grommet.io/tabs

Illustrates the `justify` prop for aligning the tab controls along the main axis within the Grommet Tabs component. Available options include 'start', 'center', and 'end'.

```jsx
<Tabs justify="center">
  {/* ... tabs content ... */}
</Tabs>
```

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

### Grommet Tabs alignControls Prop Example

Source: https://v2.grommet.io/tabs

Demonstrates the `alignControls` prop for aligning tab controls vertically within the Grommet Tabs component. This prop accepts values like 'start', 'center', 'end', and 'stretch' to control the alignment.

```jsx
<Tabs alignControls="center">
  {/* ... tabs content ... */}
</Tabs>
```

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

### Grommet Tabs alignSelf Prop Example

Source: https://v2.grommet.io/tabs

Illustrates the `alignSelf` prop for aligning the Grommet Tabs component along the cross axis within a flex container or along the column axis within a grid. It accepts values such as 'start', 'center', 'end', 'stretch', and 'baseline'.

```jsx
<Box>
  <Tabs alignSelf="center">
    {/* ... tabs content ... */}
  </Tabs>
</Box>
```

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

### Grommet Tabs Theming Example (global.colors.border)

Source: https://v2.grommet.io/tabs

Illustrates theming the border color for Grommet Tabs using the `global.colors.border` theme property. This example shows how to set a custom color for borders in both light and dark modes.

```javascript
const theme = {
  global: {
    colors: {
      border: { dark: 'white', light: 'gray' }
    }
  }
};

<Grommet theme={theme}>
  <Tabs />
</Grommet>
```

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

### Select Options Container Styles (Grommet Box Props)

Source: https://v2.grommet.io/selectmultiple

Defines styling for the container of select options using Grommet's Box component properties. Accepts an object of valid Box props. Example: { align: "start", pad: "small" }.

```javascript
{
  align: "start",
  pad: "small"
}
```

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

### Carousel Prop: alignSelf Examples

Source: https://v2.grommet.io/carousel

Illustrates the possible string values for the `alignSelf` prop in the Grommet Carousel. This prop controls how the carousel aligns itself along the cross axis within a parent Box or along the column axis within a Grid. Accepted values include 'start', 'center', 'end', 'stretch', and 'baseline'.

```jsx
"start"
```

```jsx
"center"
```

```jsx
"end"
```

```jsx
"stretch"
```

```jsx
"baseline"
```

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

### DataSearch Usage Example (React)

Source: https://v2.grommet.io/datasearch

Example of how to integrate the DataSearch component within a Grommet application, utilizing it alongside Data, Toolbar, and DataTable components. It demonstrates passing data to the Data component and placing DataSearch within a Toolbar.

```jsx
<Data
data={[{ name: 'Scott' }, { name: 'Zelda' }]}
>
<Toolbar><DataSearch /></Toolbar>
<DataTable />
</Data>
```

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

### Text Component Props Examples

Source: https://v2.grommet.io/text

Illustrates the usage of various props for the Grommet Text component, such as 'a11yTitle' for accessibility, 'color' for text styling, and 'size' for font dimensions. These examples showcase how to customize the appearance and behavior of the Text component.

```jsx
<
  Text
  a11yTitle="a user friendly label for screen readers"
  alignSelf="start"
  color="brand"
  size="large"
  textAlign="center"
  truncate
  weight="bold"
>
  This is a sample text.
</Text>
```

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

### Layer 'background' Prop Examples

Source: https://v2.grommet.io/layer

Demonstrates setting the background of the Layer component using various options. This includes using color identifiers, image URLs, or a complex object for detailed background styling including color, image, position, and opacity.

```javascript
<Layer background="neutral-1">...</Layer>
<Layer background="url(//my.com/assets/img.png)">...</Layer>
<Layer background={{ color: "neutral-1", dark: true, image: "url(//my.com/assets/img.png)", position: "bottom", opacity: true, repeat: "no-repeat", size: "cover" }}>...</Layer>
<Layer background={{ dark: "light-2", light: "dark-2" }}>...</Layer>
```

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

### Page Component Usage Example

Source: https://v2.grommet.io/page

Demonstrates how to use the Grommet Page component with a PageContent container and a Paragraph. This example shows basic layout structure. The Page component accepts 'kind' prop to define layout type, and PageContent allows background customization.

```jsx
<Page kind="narrow">
  <PageContent background="light-3">
    <Paragraph>
      Some content
    </Paragraph>
  </PageContent>
</Page>
```

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

### Data Component Props - onView Function Example

Source: https://v2.grommet.io/data

An example of the 'onView' prop, a function called when the data view changes (search, filter, sort, page), receiving an object describing the current view.

```javascript
(view) => {}
```

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

### Grommet Image Component Props Examples

Source: https://v2.grommet.io/image

Illustrates various props available for the Grommet Image component, including accessibility titles, alignment, fallback sources, fill options, fitting methods, grid areas, margins, and opacity.

```javascript
a11yTitle: "a user friendly label for screen readers"
alignSelf: "start"
fallback: "https://image-url"
fill: "horizontal"
fit: "cover"
gridArea: "a parent grid area name"
margin: "medium"
opacity: true
```

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

### SelectMultiple Prop: messages Example

Source: https://v2.grommet.io/selectmultiple

An example of the messages prop, an object used to customize messages for the SelectMultiple component, such as the multiple selection message.

```javascript
{
  multiple: "string"
}
```

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

### SelectMultiple Prop: emptySearchMessage String Example

Source: https://v2.grommet.io/selectmultiple

An example of the emptySearchMessage prop using a string, which displays a message when no matching results are found after searching.

```javascript
"No matches found"
```

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

### Grommet Meter Component Props Examples (React)

Source: https://v2.grommet.io/meter

Illustrates various ways to configure the Grommet Meter component using its extensive props. This includes setting colors, sizes, directions, and providing structured data for multiple values.

```javascript
// Example using 'value' prop
<Meter value={10} />

// Example using 'values' prop with custom colors and onClick
<Meter
  values={[
    {
      value: 45,
      color: "graph-0",
      label: "forty-five",
      onClick: () => {}
    }
  ]}
/>

// Example with 'type' and 'direction'
<Meter type="bar" direction="horizontal" />

// Example with 'size' and 'thickness'
<Meter size="large" thickness="medium" />

// Example with background and round props
<Meter
  background={{ color: "light-2", opacity: "medium" }}
  round={true}
/>
```

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

### SelectMultiple Prop: dropAlign Example

Source: https://v2.grommet.io/selectmultiple

An example object for the dropAlign prop, which controls the alignment of the options drop-down menu relative to the select component.

```javascript
{
  top: "bottom",
  left: "left"
}
```

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

### Grommet Background Prop Examples (String)

Source: https://v2.grommet.io/grommet

Illustrates how to set the background prop of the Grommet component using a string, either a color identifier or a URL for an image. This is a simple way to apply background styles.

```string
"neutral-1"
```

```string
"url(//my.com/assets/img.png)"
```

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

### Basic Grommet Footer Usage

Source: https://v2.grommet.io/footer

Demonstrates the basic structure of a Grommet Footer component with background, padding, and internal text and anchor elements. Requires the Grommet library to be installed and imported.

```javascript
import { Footer, Text, Anchor } from 'grommet';

<Footer background="brand" pad="medium">
  <Text>Copyright</Text>
  <Anchor label="About" />
</Footer>
```

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

### Grommet Column Sizing Object Example

Source: https://v2.grommet.io/grid

Demonstrates defining column sizing in a Grommet Grid using an object. This allows for control over how columns stretch to fit available space, with options for 'fit' or 'fill'.

```javascript
{
  count: "fit",
  size: "..."
}
```

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

### SelectMultiple Prop: emptySearchMessage Node Example

Source: https://v2.grommet.io/selectmultiple

An example of the emptySearchMessage prop using a React node, allowing for richer content when no search results are found.

```jsx
<Text> No results found. <Text/>
```

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

### SelectMultiple Prop: disabledKey String Example

Source: https://v2.grommet.io/selectmultiple

Shows an example of the disabledKey prop when options are objects. A string is used as a key to determine if an option should be disabled.

```javascript
"key"
```

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

### SelectMultiple Prop: defaultValue Examples

Source: https://v2.grommet.io/selectmultiple

Provides examples of the defaultValue prop, which sets the initially selected value. It accepts an array of strings, objects, or numbers.

```javascript
["string", ...]
```

```javascript
[{...}, {...}]
```

```javascript
[1, 2]
```

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

### Basic React App with Grommet Component

Source: https://v2.grommet.io/index

This snippet demonstrates a simple React application using the Grommet framework. It includes importing necessary components like `Grommet` and `Box`, and rendering a `Button` with basic properties such as label, primary style, and an onClick event handler. The app is then rendered to the DOM.

```jsx
const App = props => (
<Grommet>
<Box align="center" background="graph-2" pad="medium">
<Button
label="hello world"
primary 
onClick={() => alert('hello, world')}
/>
</Box>
</Grommet>
);

render(<App />);
```

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

### DataTable Data Prop Example

Source: https://v2.grommet.io/datatable

Provides an example of the 'data' prop for the DataTable component, which expects an array of objects. Each object in the array represents a row in the table.

```array
[{}]
```

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

### PageHeader 'subtitle' Prop Example (String)

Source: https://v2.grommet.io/pageheader

Provides an example of setting the subtitle for the PageHeader component using a simple string. This string is rendered as a paragraph element.

```jsx
"This page provides documentation for PageHeader."
```

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

### Grommet Tabs Theming Example (global.borderSize)

Source: https://v2.grommet.io/tabs

Demonstrates how to theme the border size for Grommet components, including Tabs, by overriding the `global.borderSize` theme value. This allows for consistent border styling across the application.

```javascript
const theme = {
  global: {
    borderSize: {
      small: '2px',
      medium: '6px'
    }
  }
};

<Grommet theme={theme}>
  <Tabs />
</Grommet>
```

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

### MaskedInput id Prop Example

Source: https://v2.grommet.io/maskedinput

Example of the 'id' prop for MaskedInput, used to assign a unique identifier to the input element for HTML and accessibility purposes.

```javascript
"InputId"
```

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

### DropButton dropAlign Prop Example (JavaScript)

Source: https://v2.grommet.io/dropbutton

An example of configuring the 'dropAlign' prop for DropButton to control the position of the drop relative to the button. Memoization is recommended for performance.

```javascript
const dropAlignment = {
  top: "bottom",
  right: "right"
};

<DropButton
  dropAlign={dropAlignment}
  label="Align Drop"
  dropContent={<Box />} 
/>;
```

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

### RadioButton label Prop Example (Node)

Source: https://v2.grommet.io/radiobutton

This example illustrates the 'label' prop for the RadioButton component, which specifies the text displayed next to the control. It accepts a React node.

```javascript
"label"
```

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

### Toolbar Component Usage (Grommet)

Source: https://v2.grommet.io/toolbar

Demonstrates the basic structure and usage of the Grommet Toolbar component. It includes examples of integrating search input, filter drop buttons, and primary action buttons within the toolbar. This snippet requires the Grommet library to render correctly.

```javascript
<Toolbar>
  <TextInput icon={<Icons.Search />} />
  <DropButton kind="toolbar" icon={<Icons.Filter />} />
  <Button label="Create" primary />
</Toolbar>
```

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

### Layer 'onClickOutside' Prop Example

Source: https://v2.grommet.io/layer

Provides an example of the 'onClickOutside' prop, which defines a function to be executed when the user clicks outside of a modal Layer. This is commonly used to close the layer.

```javascript
<Layer onClickOutside={() => console.log('Clicked outside!')}>...</Layer>
```

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

### NameValueList Value Props Example (React)

Source: https://v2.grommet.io/namevaluelist

Customizes the alignment and width of the value in NameValueList pairs with the 'valueProps' object. This example sets width to 'large' and alignment to 'end'.

```jsx
```json
{ "width": "large", "align": "end" }
```
```

```jsx
```json
{ "width": { "min": "...", "max": "..." } }
```
```

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

### Default Notification Example - React

Source: https://v2.grommet.io/notification

A basic example of the Notification component displaying a title and message. It includes an onClose handler but does not specify the 'toast' prop, rendering a non-expiring notification.

```jsx
<Notification
  title="Default Status Title"
  message="This is an example of a notification message"
  onClose={() => {}}
/>
```

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

### Grommet Icon Color Prop Examples

Source: https://v2.grommet.io/icons

Demonstrates the 'color' prop for Grommet icons, allowing color to be set using string names or an object for theme-specific dark/light mode colors. Defaults to 'plain'.

```javascript
<Icons.Home color='plain' />
<Icons.Home color={{ dark: 'white', light: 'black' }} />
```

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

### ToggleGroup Theme: button.pad Examples

Source: https://v2.grommet.io/togglegroup

Demonstrates the theming options for the padding of buttons within the ToggleGroup component. It shows configurations using string-based sizes and detailed object structures.

```javascript
toggleGroup.button.pad: "none"
```

```javascript
toggleGroup.button.pad: "xxsmall"
```

```javascript
toggleGroup.button.pad: "xsmall"
```

```javascript
toggleGroup.button.pad: "small"
```

```javascript
toggleGroup.button.pad: "medium"
```

```javascript
toggleGroup.button.pad: "large"
```

```javascript
toggleGroup.button.pad: "xlarge"
```

```javascript
toggleGroup.button.pad: "any CSS size"
```

```javascript
toggleGroup.button.pad: {
  vertical: "11px",
  horizontal: "11px",
}
```

```javascript
toggleGroup.button.pad: {
  vertical: "...",
  horizontal: "...",
  top: "...",
  bottom: "...",
  left: "...",
  right: "...",
  start: "...",
  end: "..."
}
```