wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Core

Configuration
Tokens
Stack & Text
styled
Variants
Props
Themes
Animations
Theme
useMedia
useTheme
FontLanguage
Extras

Compiler

About
Install
Benchmarks

Theme

Colors
Tokens

Tamagui

Stacks
Headings
Text

Forms

Button
Checkbox
Form
Input & TextArea
Label
Progress
RadioGroup
Select
Slider
Switch
ToggleGroup

Panels

AlertDialog
Dialog
Popover
Sheet
Tooltip
Toast

Organize

Accordion
Group
Tabs

Content

Avatar
Card
Image
ListItem

Visual

LinearGradient
Separator
Square & Circle

Etc

Anchor
HTML Elements
ScrollView
Spinner
Unspaced
VisuallyHidden

Extras

Lucide Icons

Guides

Design Systems
Creating Custom Themes
How to Build a Button
Developing
Next.js
Expo
Vite
create-tamagui

Community

Community
Blog
GitHub
Twitter
Discord

Group

Layout buttons and more with groups.

Features

  • Accepts size prop that works on all styles.

  • Align vertically or horizontally.

  • Natural spacing and disabled props.

  • Use with or without Item for more control.

Usage

You can use Group by itself with the orientation property determining the direction it assumes.

By default, Groups will control the border radius of their children automatically - the first and last children will get their start/end radius set to match group radius. If it's a YGroup, it will adjust top/bottom radius. XGroup adjusts the left/right radius.

You can use Groups with or without Group.Item, depending on if you want to spacing and separators to be handled based on direct children, or on each Item rendered.

import { Button, XGroup } from 'tamagui'
// usage with Item:
export default () => (
<XGroup>
<XGroup.Item>
<Button>First</Button>
</XGroup.Item>
<XGroup.Item>
<Button>Second</Button>
</XGroup.Item>
<XGroup.Item>
<Button>Third</Button>
</XGroup.Item>
</XGroup>
)

For a simpler use case and backwards compat, you can also use it without Group.Item, which will just apply borders and spacing based on direct children. Note that Group will detect if any Group.Item is inside it, and automatically switch modes. If no Item, it spaces direct children:

import { Button, XGroup } from 'tamagui'
// usage without Item:
export default () => (
<XGroup>
<Button>First</Button>
<Button>Second</Button>
<Button>Third</Button>
</XGroup>
)

Sizing

The size property will use your tokens to grab the appropriate radius for borderRadius values which it will pass to the first and last child as style props for borderRadius.

import { Button, XGroup } from 'tamagui'
export default () => (
<XGroup size="$6">
<XGroup.Item>
<Button>First</Button>
</XGroup.Item>
<XGroup.Item>
<Button>Second</Button>
</XGroup.Item>
<XGroup.Item>
<Button>Third</Button>
</XGroup.Item>
</XGroup>
)

Disabled

The disabled property will pass to children

API Reference

Group

Group, XGroup and YGroup extend YStack, getting Tamagui standard props, plus:

Props

  • orientation

    "horizontal" | "vertical"

    Forces applying the border radius styles to left/right vs top/bottom. Defaults to horizontal for XGroup and vertical for YGroup.

  • size

    string | SizeTokens

    Set a size, number or one of the size token values.

  • disabled

    boolean

    Pass disabled down to children.

  • disablePassBorderRadius

    boolean | 'bottom' | 'top' | 'start' | 'end'

    Disables passing border radius to first/last children.

  • forceUseItem

    boolean

  • unstyled

    boolean

    Removes all default Tamagui styles.

  • Group.Item

    Wrap each of XGroup or YGroup's children in one of these. It lets Tamagui apply the needed styles to them. It accepts the following props:

    Props

  • children (required)

    ReactNode

  • forcePlacement

    "first" | "center" | "last"

    Forces the item to be a starting, center or ending item and gets the respective styles

  • Previous

    Accordion

    Next

    Tabs