GitHub

Shapes

Easy to use Square and Circle

Square and Circle turn one size value into matching width and height with full Tamagui styling.

Features

  • Numeric or token-based sizes

  • Minimum and maximum width and height

Installation

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

yarn add @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 View inheriting all the Tamagui standard props, plus:

Props

  • size

    SizeTokens | number

    A number is px, a string is a size token key.

  • circular

    boolean

    Rounds the border radius to be circular.

    • Circle

    Circle extends Square, setting circular to true.

    Previous

    Spinner

    Edit this page on GitHub.