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

Blog

GitHub

Twitter

Discord

Shapes

Easy to use Square and Circle.

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.

Edit this page on GitHub.