---
name: Grouper
menu: Components
route: /components/grouper
---

import { Playground, Props } from 'docz'
import Grouper from './'
import Button from '../button'
import Badge from '../badge'

# Grouper

Renders a horizontal or vertical group of items.


## Import
`import { Grouper } from '@blasterjs/core'`

## Basic usage

<Playground>
  <Grouper>
    <Button>Hello</Button>
    <Button>Crazy</Button>
    <Button>World</Button>
  </Grouper>
</Playground>


## Vertical

<Playground>
  <Grouper vertical>
    <Button>Hello</Button>
    <Button>Crazy</Button>
    <Button>World</Button>
  </Grouper>
</Playground>


## Gutter

<Playground>
  <Grouper gutter={6} mb={8}>
    <Button>Hello</Button>
    <Button>Crazy</Button>
    <Button>World</Button>
  </Grouper>

  <Grouper gutter={3} vertical>
    <Badge>Hello</Badge>
    <Badge>Crazy</Badge>
    <Badge>World</Badge>
  </Grouper>
</Playground>


## Wrap

<Playground>
  <Grouper>
    <Button>Hello</Button>
    <Button>Crazy</Button>
    <Button>World</Button>
    <Button>Hello</Button>
    <Button>Crazy</Button>
    <Button>World</Button>
    <Button>Hello</Button>
    <Button>Crazy</Button>
    <Button>World</Button>
    <Button>Hello</Button>
    <Button>Crazy</Button>
    <Button>World</Button>
    <Button>Hello</Button>
    <Button>Crazy</Button>
    <Button>World</Button>
    <Button>Hello</Button>
    <Button>Crazy</Button>
    <Button>World</Button>
    <Button>Hello</Button>
    <Button>Crazy</Button>
    <Button>World</Button>
    <Button>Hello</Button>
    <Button>Crazy</Button>
    <Button>World</Button>
  </Grouper>
</Playground>


## Align and Justify

<Playground>
  <Grouper gutter={0} align="stretch">
    <input type="text" />
    <Button>Go</Button>
  </Grouper>
</Playground>

<Playground>
  <Grouper justify="flex-end">
    <Button>Hello</Button>
    <Button>Crazy</Button>
    <Button>World</Button>
  </Grouper>
</Playground>


## PropTypes
| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| vertical | bool | no | false | |
| justify | string | no | "flex-start" | passed to `justify-content` CSS property |
| align | string | no | "center" | passed to `align-items` CSS property |
| gutter | string or number | no | `space.2` | gap between children |
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `LAYOUT` | Style Prop |  |  | see [Style Props](/style-props) |


## Theming

### Schema
```
{
  space: {
    gutter
  },
  overrides: css`
    ...
  `
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/grouper)
- [Learn more about themeing](/blaster-theme)