Shapes

<Highlights features={[ 'Accepts size props as number or token value.', 'Sets min and max width and height.', ]} />

Installation

Shapes is already installed in tamagui, or you can install it independently:

npm install @tamagui/shapes

Usage

Tamagui supports sizing shapes using your size tokens, or plain numbers.

import { Circle, Square } from 'tamagui'

export default () => (
  <>
    <Square size="$4" />
    <Square size={100} />
    <Circle size="$4" />
    <Circle size={100} />
  </>
)

API Reference

Square

Square extends Stack views inheriting all the Tamagui standard props, plus:

<PropsTable data={[ { name: 'size', required: false, type: 'string | tokens.size', description: Set a size, number or one of the size token values., }, { name: 'circular', required: false, type: 'boolean', description: Rounds the border radius to be circular., }, ]} />

Circle

Circle extends Square, setting circular to true.