GitHub
wwwwwwwwwwwwwwwwwww

Shapes

Easy to use Square and Circle.

yarnnpmbunpnpm
import { Circle, Square, XStack } from 'tamagui'



export function ShapesDemo() {

  return (

    <XStack padding="$2" space="$4">

      <Square size={100} backgroundColor="$color" elevation="$4" />

      <Circle size={100} backgroundColor="$color" elevation="$4" />

    </XStack>

  )

}

Features

  • Accepts size props as number or token value.

  • Sets min and max width and height.

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:

Props

  • size

    string | tokens.size

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

  • circular

    boolean

    Rounds the border radius to be circular.

    • Circle

    Circle extends Square, setting circular to true.

    Previous

    Separator

    Next

    Lucide Icons

    Edit this page on GitHub.